Page tree
Skip to end of metadata
Go to start of metadata

This guide explains how to use the design concepts that changed with "Material Design".

What is Material Design ?

Material design is a new visual language which synthesizes the classic principles of good design with the innovation and possibility of technology and science. The properties which Material Design provide, are only valid for Android Lollipop devices.For more information about Material Design check the link.

Status Bar Color & Transparency

Status bar has many properties, and these are;

Property Name
Description
iOS
Android
colorGets and Sets statusBar background colorx
height()Function; Gets statusBar height
transparentGets and Sets statusBar is transparent or opaquex

styleGets and Sets statusBar font color for iOSx
visibleGets and Sets statusBar is visible or not

Default value of transparent is false, and background color is black. The appearance of default status bar on device is as below :

If the transparency of statusBar is true, although background color is defined, it is not shown.

function page1_onShow() {
	SMF.UI.statusBar.visible = true;
	SMF.UI.statusBar.transparent = true;
	SMF.UI.statusBar.color = SMF.UI.Color.BLUE;
	var myLbl = new SMF.UI.Label({
			text : this.statusBar.height,
			borderColor : SMF.UI.Color.ORANGE,
			borderWidth : 5,
			horizontalGap : 20
		});
	page1.add(myLbl);
}

In order to give a specific color to statusBar, transparency must be false.

HideOnContentScroll and Overlay

Action bar object have new features which are available only for Lollipop.
HideOnContentScroll : Action Bar associates with a vertical scrolling UI object. Then automatically hides/shows itself according to the scroll action within that control(only for repeatbox). Only with a simple control, you can use this property.

this.actionBar.hideOnContentScroll = true;

       

In the second image, repeatbox is scrolled to down and therefore action bar is hidded. When you scroll repeatbox back to top, action bar will be seen again. 

Overlay : If overlay property is true; then top origin will start from under status bar for objects, page background will start from under status bar and SliderDrawer will start from under status bar. 

this.actionBar.hideOnContentScroll = true;
this.actionBar.overlay = true;

         

Point of Origin

The top origin of the page can be changed by using overlay property of ActionBar 

this.actionBar.overlay = true;

Let's see the change in the origin with an example. Use a container and two rectangle objects with different colors in it, in order to see the position easily. Let's look at the change of the position of origin.

var myRect1 = new SMF.UI.Rectangle({
		left : "0%",
		top : "0%",
		width : "100%",
		height : "50%",
		fillColor : SMF.UI.Color.WHITE,
		borderWidth : 2,
		borderColor : SMF.UI.Color.RED
	});
var myRect2 = new SMF.UI.Rectangle({
		left : "0%",
		top : "50%",
		width : "100%",
		height : "50%",
		fillColor : SMF.UI.Color.BLUE,
		borderWidth : 2,
		borderColor : SMF.UI.Color.RED
	});
var myContainer = new SMF.UI.Container({
		left : "60%",
		top : "0%",
		width : "25%"
	});
myContainer.add(myRect1);
myContainer.add(myRect2);
function page1_Self_OnShow() {
	header.init(this);
	header.setTitle("page1");
	header.setRightItem("RItem");
	header.setLeftItem();
	SMF.UI.statusBar.visible = true;
	SMF.UI.statusBar.transparent = false;
	SMF.UI.statusBar.background = SMF.UI.Color.BLUE;
	this.actionBar.overlay = true;
	page1.add(myContainer);
}

Animations

In order to perform new animations, UI.Object.animate() method can be used. 

Each animation will have a type property which will be the determining animation type.

Let's make an example about Reveal Effect animation which is placed under UIObject.animate().

The parameters are :

  • type : this should be set as reveal.
  • center : center will be represented by two values(x and y).
  • radius : change of radius will be represented as two numbers(from and to).
  • onFinish : It's an event can do functions onFinish.
var myButton = new SMF.UI.TextButton({
		left : "15%",
		top : "35%",
		width : "75%",
		height : "20%",
		text : "reveal animate ex",
		onPressed : function (e) {
			this.animate({
				type : "reveal",
				center : {
					x : this.width / 2,
					y : this.height / 2
				},
				radius : {
					from : 20, //pixel
					to : 200
				},
				onFinish : function (e) {
					//do nothing
				}
			});
		}
	});

Add myButton to your page and then press on it in order to see the reveal effect animation. Note that, sliderDrawer object does not support reveal effect animation.

Effects

Effects of UI Objects are grouped under objects folder ".effects" property. The effect is located with its name, under the ".effects" property. And contains its own unique properties and methods.
Let's consider the ripple effect. A simple usage will be seen as below :

var rectangle1= new SMF.UI.Rectangle({
		left : "15%",
		top : "35%",
		width : "75%",
		height : "20%",
		
		onPressed : function (e) {}
	});
rectangle1.effects.ripple.enabled = true;
page1.add(rectangle1);

Now, let's define a color for ripple effect :

var rectangle1= new SMF.UI.Rectangle({
		left : "15%",
		top : "35%",
		width : "75%",
		height : "20%",	

		onPressed : function (e) {}
	});
rectangle1.effects.ripple.enabled = true;
rectangle1.effects.ripple.color = SMF.UI.Color.BLUE;
page1.add(rectangle1);

As you keep on touching the rectangle, it’s effect grows and finally fills the rectangle completely.
Now, add a mask to ripple effect and see how it is shown on device :

var rectangle1= new SMF.UI.Rectangle({
		left : "15%",
		top : "35%",
		width : "75%",
		height : "20%",
		text : "ripple",
		onPressed : function (e) {}
	});
rectangle1.effects.ripple.enabled = true;
rectangle1.effects.ripple.color = SMF.UI.Color.BLUE;
rectangle1.effects.ripple.mask = "images:/eight.png";
page1.add(rectangle1);

When you touch on the rectangle, 8 shaped image will be shown as a ripple effect as in the picture above.

Z-Index

Every UI object, except Page, have a z value. Using z value will change which object is appearing on top. Some properties are; it can have only "dp" values, it can have a negative value instead of positive ones, default value is zero.Z-index usage will be used in an example, in the Shadows section.

Shadows

There are some restrictions for objects in order to have shadow, these are :

For button to have shadow, it must not have border or rounded edge value greater than zero. That means, button must have borderWidth = 0 and roundedEdge = 0.

For image, it's outline must be defined in order to get shadow casting. In other words, in order to have a shadow property for an image, it's outline method must be called, otherwise it won’t work.

The objects which do not support shadow are; TextBox, mapView, canvas, line, slider, searchBar, activityIndicator, sliderDrawer, webView, switchButton.

Let's perform an animate in order to see the shadow.

var myLabel = new SMF.UI.Label({
		left : "15%",
		top : "35%",
		width : "75%",
		height : "20%",
		text : "shadow",
		fontColor : SMF.UI.Color.WHITE,
		backgroundTransparent : false,
		fillColor : SMF.UI.Color.BLUE,
		borderWidth : 2,
		borderColor : SMF.UI.Color.BLUE,
		onTouch : function (e) {
			this.animate({
				property : "z",
				endValue : 90,
				motionEase : SMF.UI.MotionEase.PLAIN,
				duration : 1000,
				onFinish : function () {}
			});
		}
	});

Add this label to your page and then touch on it, you will see the shadow animate.

      

When you add the label into your page, you will see it as in the image on the left. Try to touch on the label then you will see the shadow effect. Shadow slowly can be seen by animate.
If you run the same code for iOS, nothing changes. Although, the label is touched animate does not start and shadow is not seen on iOS.

Actual Size and Outline

Image object supports some new features in order to give better experience for material design about shadow effects. These new features are; Actual Size and Outline(shadow). Actual Size can get two properties of Image object. These properties are; actualHeight and actualWidth. These properties are read-only properties. Outline is the function to set the shadow outline of the image. Outline method is meaningless when it is not used for shadow. Outline method has two inputs; one of them is the "type" and value of the "type" can be Rectangle, RoundedRect or Oval. The other input is "radius" which will take a value between 0 and 100.You can use the below example in order to see how outline works.

var myImage = new SMF.UI.Image({

		left : "15%",
		top : "35%",
		width : "75%",
		height : "20%",
		image : "images://test.png",
		onTouch : function (e) {
			this.outline(SMF.UI.ImageOutline.OVAL, 99);
		}
	});

        

After you run the outline method, image will be seen as in the right picture above.