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;
|color||Gets and Sets statusBar background color||x||✓|
|height()||Function; Gets statusBar height||✓||✓|
|transparent||Gets and Sets statusBar is transparent or opaque||x|
|style||Gets and Sets statusBar font color for iOS||✓||x|
|visible||Gets 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.
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.
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.
Point of Origin
The top origin of the page can be changed by using overlay property of ActionBar
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.
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.
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 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 :
Now, let's define a color for ripple effect :
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 :
When you touch on the rectangle, 8 shaped image will be shown as a ripple effect as in the picture above.
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.
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.
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.
After you run the outline method, image will be seen as in the right picture above.