In Google I/O conference 2014, Google had unveiled its latest version of mobile operating system – “Android Lollipop” also referred to as “Android L”. The Android L brought some under the hood changes such as support for 64 bit processors and a new runtime environment, known as Android Run Time (ART). ART, which uses Ahead of Time (AOT) compilation, replaced the Dalvik virtual machine which uses Just in Time (JIT) compilation. It also included features which are more visible and evident to the users upfront. The list includes a refreshed notification system, device sharing, enhanced security and improved battery life. Acknowledging the significance of these changes, we can still say, above all the most prominent in Android L was the introduction of the material design.
Material Design
Material design is a visual language developed by Google which intends to bring a consistent user experience across all devices be it a Smartphone, Tablet, Smart watch, TV’s, Automobiles or Desktops. Material design seems to takes inspiration from how the user views, perceives and interacts with any material (object) in real life.
The materials in real life have certain properties and attributes like dimensions, shadows, shapes, colors, edges and the fact that they can move. Material design brings these real life concepts to digital material created from pixels (Buttons, Bars, Lists, Views and etc) through the use of bold colors, grid-based layouts, responsive animations, meaningful transitions, padding, and depth effects such as lighting, elevation and shadows.
In this blog post, we would cover the newly introduced properties for UI elements and a list of new animations in Android L and conclude with couple of best practices to ponder, while developing using material design.
To work with elevations, Google added a “Z” property for UI elements, consisting of 2 components – Elevation and Translation. The elevation component is a static component, used to define elevation for UI elements. The elevated element promotes the user to understand and prioritize the options present on the screen. These UI elements when elevated cast shadow and as one would associate with objects in real life, elements with higher elevation cast a bigger shadow. Also with respect to drawing order, elements with higher elevation value are on top of elements with lower elevation which helps to focus and establish hierarchy.
The Translation component is a dynamic component used for creating animations. Example of a translation would be rising of an element to an elevation. This translation can be used as a part of animations.
Android L also introduced 2 new widgets: RecyclerView and CardView which supports material design styles and animations. The Recycler View is an advanced and flexible version of the existing List View widget, which is used to show a list of items. An example of such a feature would be the list of contacts. The Recycler View uses a layout manager and adapter for creating lists. The layout manager is used to position the item in the view and the adapter is used to access the items from the dataset. To simplify things, Recycler View also comes with built in layout managers (LinearLayout, GridLayout and StaggeredGridLayout) and default animations for common item operations, such as removal or addition of items. One can even create custom layout managers and animations to be used with Recycler View.
The Card View feature is a completely new widget introduced in Android L which extends the FrameLayout. Typically, a CardView is used to present a single item in a List or Grid. Following material design specification of the widget allows the developer to create cards with shadows and rounded corners.
Android L has introduced a pool of animations to keep the user visually engaged and provide meaningful response to their actions. Let us see them in brief:
- Touch feedback: Used to immediately acknowledge user touch of UI element. By default ripple effect is used to express this contact.
- Circular Reveal: Used to show and hide UI elements. A clipping circle is used to express this feature.
- Activity transitions: Used to visually connect the transition of an element from one state to another. Fading out an element which exits from the view would be an apt example to describe this feature.
- View state changes: Used to animate the change in state of a view. An example of this would be to animate the elevation of an element of a view when pressed.
Through my study and analysis, I have come across some best practices to be followed while using material design to achieve an intuitive and rational user interface. They are as follows:
- Provide visual confirmation when user touches UI elements
- When moving elements, accelerate them swiftly and decelerate them slowly to avoid abrupt changes
- When an object enters the frame, move it at its peak velocity
- Don’t make changes to the object’s velocity as it exits the frame
- Consider object size while moving them. Smaller object tends to move faster than larger objects
- Show animations between state changes
- When a new object is generated as a result of direct user interaction, surface growth motion should originate from the point of input
Material design looks more than simply a design overhaul by Google. Some of Google’s products, or to be more precise Google apps (Gmail, YouTube, and Google Drive) are already available in material design and with daily news of app providers updating their products with the material design, it surely signifies a positive trend. However, it would be interesting to see how the update would blend with devices which have customized android skins.
