Shashwat Pradhan Shashwat Pradhan

The Material Design Journey

At Emberify we have been researching & prototyping on some Android User Interfaces for our new apps. Coming in from the slick holo them to a more comprehensive visual language of Material Design, Android definitely has come a long way.

To understand Material Design we need to understand its three fundamental principles:

1. Material is metaphor: It is embodied with reality, yet open to imagination without breaking the rules of physics. Elements like surface, ink, edges, light, paper and movement rationalise it with reality.

2. Bold, graphic and intentional: Typography, grids, colour, space and imagery give it a feel of print-based design. User actions are the core of the functionality which provides the user the waypoints for navigation.

3. Motion provides meaning: With motion the designer can tell the user a story. With animations, users can feel in control with every interaction. It provides smooth and efficient transitions providing continuity.

Material design brings in many new elements. Co-planar paper which provides a feeling of depth with shadows. The Floating Action Button (aka FAB) provides the user with a hallmark action of the app. Bold contrasting colours from the newly expanded palette bring in much more expression.  The evolved Roboto typography is rounder and has an enhanced readability. Imagery is supposed to be more comprehensive and immersive to be able to tell a story to the user.

Personally I really like the new app bar and the FAB in terms of practicality. It makes the whole Android experience more fun and consistent. It really brings a nice unified experience across all platforms and devices. Definitely embodies Google’s unique feel.

These UI paradigms definitely make the user interface and experience stand out from other platforms which might take new Android users some time to get accustomed to. The learning curve won’t be too steep though if the app is modelled correctly since Material Design is very natural and intuitive. While designing Instant for Android, the initial plan was to make it using a neat holo dark theme. We had planned to use the tab bar working with swipe animations. Then as Lollipop got closer we decided to move the whole project to a Material Design theme. The Google Material Design website was a great resource even considering its age.

Instant-Banner

In terms of development it was tricky. Our development team didn’t want to move to Android Studio from Eclipse since it was still in beta at that time and there would be a learning curve involved. But the documentation and samples for Eclipse are really scarce and incomplete. I’m still not even sure whether all the functionalities of Android Studio for the new Lollipop elements exist in Eclipse. We had to build some custom elements and use open source libraries to get the app bar and FAB. The shadows and some effects were achieved through custom code in Java & XML. This way we could support all users from Ice Cream Sandwich(4.0) pretty easily. Overall we managed to represent material design in a reasonable way with Instant for Android. As we move ahead with the development of Instant for Android, we plan to eventually move our code base as modules in Android Studio. Since it is now the official IDE, Eclipse with ADT is receiving secondary treatment. We will use a gradle wrapper to migrate our current Eclipse project.
Instant tracks device usage time. It works similar to fitness trackers for smartphone usage by making the user aware of the data. With graphs and limit reminders, Instant wants to help users find a balanced lifestyle. We built the entire user interface based on Material design. Instant for Android is available on Google Play for free: https://play.google.com/store/apps/details?id=com.emberify.instant