Developing for Google Material Design In Smartface

Smartface comes with Material Design support both for iOS and Android and as Android 5.0 finally gains ground and Android M is on the way, we would like to share how you can apply Material Design concepts in your Smartface projects.

Smartface is fully native and you can develop next generation iOS and Android apps with Material Design only using JavaScript.


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.

Material Design is a platform agnostic approach and most developments are applicable to both iOS and Android L/M projects with Smartface single codebase and even similar principles can also be applied to web projects.

Click here for more information about Material Design.


To access the guide on using Material Design and see explanation with codes, you can visit the guide page. This guide aims to present commonly used Material Design implementations. Below is a summary of what’s included:


Status Bar Color & Transparency

With Android Lollipop, you have more control over the status bar. It has many properties, some of which are new:

  • visible : If visible property is true, status bar will be shown on device.
  • transparent : If transparent property is true, origin starts from top 0,0(behind status bar)
  • background : In order to change the color of status bar, background property will be used.
  • style : Style property can be changed with SMF.UI.StatusBarStyle. This is only valid for iOS7+.
  • height : Height of status bar can not be changed, it will only be read. Height property is different for different devices.

HideOnContentScroll and Overlay

Action bar object have new features that 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.
  • 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 shiftObjectsDown property. It takes boolean values.

When it is set as true, Page, Dialogs position in Page and SliderDrawer will be effected.


In order to perform animations, UI.Object.animate() method can be used. This usage offers new animations. Each animation will have a type property which will be the determining animation type.

Visit the Antimations section in the guide for an example code for using animations.


Effects of UI Objects are grouped under objects.effects property. The effect is located with its name, under the .effects property. And contains its own unique properties and methods.


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.


With the introduction of the z-index, objects also have shadows indicating their floating status.

Yet, 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 an edge = 0 and rounded edge = 0.
  • For image, its outline must be defined in order to get shadow casted. In other words, in order to have a shadow property for an image, its outline method must be called, otherwise it won’t work.
  • The objects which do not support shadow are; editbox, mapView, canvas, line, slider, searchBar, activityIndicator, sliderDrawer, webView, switchButton.

Actual Size and Outline

Image object supports some new features in order to give better experience for material design shadow effects. These new features are; Actual Size and Outline(shadow).

  • Actual Size can be 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, type value can be Rectangle, RoundedRect or Oval. The other input is radius which will take a value between 0 and 100.


No native iOS or Android knowledge is needed to develop great Material Design apps. Use Smartface to develop native iOS and Android apps just with JavaScript.

You can visit the guide page for more information on Material Design development and you can visit the Smartface Developer Center for more iOS and Android development resources. Stay tuned for more guides. For updates, you can follow us on Twitter @smartface_io

Download Smartface now and start coding right away for Material Design!