great place to work

A Dive into the Material Design World


Material Design

François de la Rochefoucauld has, rightly, said that “The only thing constant in life is change” Change is inevitable and it, definitely, has its effects on every sphere, including the User interface design. And, the result is a great concept – “The Material Design”.

The concept of Material design has revolutionized the design world. Now that many are moving towards adopting, material design in their design implementation, let us delve deeper and obtain some knowledge about it.

What is Material Design?

The concept of Material design is all about delivering a “clean, layered and aesthetically flat” user interface to the users. From 2011 onwards, Google had started this User Interface evolution by introducing it in the web applications. If we compare the old with the updated User Interfaces of Google’s search engine, we can notice the difference.

Google Search

The comparison of both images, clearly, calls out a Clean UI concept. Clean UI showcases, only, the most required elements on each screen, hiding the underlying complexity. Material design is, aesthetically, flat, specifically, the colors and also gives a 3-dimensional view by bringing z-axis in to play. Moreover, Material design is an attempt to develop a relation between the real and digital world.

Much more than just a new user interface, Material Design is a set of best practices that are designed to help the third-party application developers to build applications that emphasize usability and consistency. The new design concept of Material Design gives the best user experience for Android applications.

There are several design concepts, currently, in the market.  What really differentiates is the uniqueness of the Material design.

Best Practices

Some of the best practices in this design are:

1. Visual effects: It provides visual effects on user touch of UI elements, which allows the users to identify their actions in a simple way.

  • Ripple effect: Touch feedback is used to immediately acknowledge user touch of a UI element.
  • Elevation: This is one of the most important and an attractive feature that is introduced in Material Design, bringing z-axis in to play and, thereby, giving a 3D feel to views.
  • Circular Reveal: This is used to show and hide UI elements. A clipping circle is used to express this feature.
  • View state changes: An example of this feature would be to animate the elevation of an element of a view, on press.

 2. Color Pattern:  The color palette recommends usage of the following set of color patterns:

    • Dark primary color, status bars
    • Primary color, Action bars
    • Light primary color
    • Text/Icons
    • Accent color, used for elements which require user’s attention, like the floating action button
    • Primary text, action bar text colors
    • Secondary text
    • Divider color

Colour Pattern - Material Design

Palette Preview - Material Design

3. Element Movements: Avoid abrupt changes while moving elements, accelerate them swiftly and decelerate them slowly.

4. Object Generation: When a new object is generated, as a result of direct user interaction, surface growth motion should originate from the point of input.

5. Content Blocks: In order to control free space in large screens, display units are stretched to their limits of readability, by adding large paddings from edges. It’s, also, good to use elements, such as floating action button in such empty space

6. Dimensions/Style: Earlier, there were no guidelines for UI dimensions. Now, the material design brings standard dimensions for UI components, based on their type and functionality. For instance, the Floating Action Button (FAB). Some of the standards, recommended by Android, for this component are:

  • Size: FAB is available only in default (56dp) and mini size (40dp).
  • Icon: Even if the component size varies, icon size (24dp) should remain constant.
  • Position: FAB should be placed at a minimum distance of 16dp from the edge on Phone and 24dp on tablet.
  • Sub-Actions: FAB can fling out related actions upon press. As a general rule, it should have, at least, three options upon press but not more than six, including the original floating action button target. Don’t put overflow menus in the FAB actions. There should be, at the most, two taps from the initial screen to get to the intended destination.
  • Number of FABs: There should be only one floating action button, per screen, to increase its prominence and represent, only, the most common action.
  • Style: Google recommends, using circular icon, to show the primary action pattern, across applications. On multiple lateral screens, like tabs, the button should show and hide, if the action contained on each is different. The button should stay on screen, if the action is the same and should translate to a new position, if necessary.

Main Components Introduced in Material Design

There are many elements in Material design. The primary elements in Material design are:

1. Swipe to Refresh Layout: Earlier, external library were used for including pull to refresh layout, but from lollipop onwards this is introduced as a View.

2. Recycler View: Earlier, there were two separate views and implementations for displaying linear and grid layouts. Recycler view integrated the functionalities of linear, grid and staggered grid, by introducing built-in layout manager functionality.

  • Recycler View does not need invocation of a function like “notifyDataSetChanged()” when an item is added or deleted from your List, which results in huge performance optimization.
  • Recycle and reuse: The user scrolls to view more items. During scroll, the moment an item goes out of the view; its view can be recycled and reused to display the next item.  

3. Card View: Tweaking a little, considering the most subtle detail has resulted in an amazing effect on the UI. Specifically, an enhanced frame layout with shadow, elevation and rounded corners gives a new identity to Android UI.

4. Palette: This allows to, dynamically, extract color from the image and set the background, text colors etc., accordingly. For example, changing the display-name, text color, based on the profile picture.

5. Chips: They are used to represent complex entities in small blocks. For example, contact chips represent contact information that users have for people in a compact way. Contact chips, efficiently, confirm that the user will be sending their message to the correct person.   

Implementation Challenges

The above section explained the basis of Material design and its features. Like any other technology, even material design has certain set of challenges while implementing in reality. These are some of the factors for developers to consider, before they begin with their application development process, in a hurdle free manner.

1. Right Knowledge: As Material design has certain best practices to consider, developers/designers need to have a good knowledge on each component’s implementation. With the lack of knowledge, it’s easy to get bothered. Therefore, I would recommend you to watch the videos, graphical representations, overviews, etc. that are based on Material Designs, available in the developer site, before staring the work.

2. Effect on Pre-Lollipop devices: In order to bring a new look and feel, the new material theme should be integrated with the application. Since, Material theme is supported only in Lollipop devices; appcompat theme needs to be used to support Pre-Lollipop devices. Layout effects like elevation, ripple etc. are supported only in Lollipop, hence, separate layouts need to be created for both types of devices. Also, lollipop animations are not, currently, available for the previous OS versions.

3. Backward Compatibility: Many of the components behave differently in Lollipop and Pre-Lollipop devices. For example:

  • Switch-compat: This works perfectly in lollipop devices, but in pre-lollipop devices the thumb image needs to be specified, explicitly
  • Notification: As per Google design guidelines, “Notification icons must be entirely white. Also, the system may scale down and/or darken the icons”. Applications, targeting the Lollipop platform, set a white color filter for icons. So, if you do not follow the design guidelines, the notification icon will appear as pure white in the status bar for lollipop devices.

4. Customization: Too much customization leads to overhead: Since, more customization is now in the hands of developers, default listeners are not present in the new components. For example, in listview onItem,SelectedListener is present by default, but in RecyclerView this listener needs to be implemented separately.

5. Eclipse to Android Studio Movement: Though it is not a complete challenge, one important change that developers would notice is the Eclipse to Studio movement. Most of the material design code samples are studio compatible; also, studio lets more customization compared to Eclipse. Therefore, to pursue Material Design, developers will have to, eventually, move to Studio. Eclipse is based on ANT build system, which is less flexible, compared to gradle in Android Studio. Gradle is a plugin based system, which means if you have your own programming language and if you want to automate a task; then you can write a complete plugin for that. Google has announced Android Studio as the official IDE for Android Application development and recommends developers to switch from Eclipse to Android Studio. There will be few hiccups during this movement and the ones that would appear immediately are:

  • Hardware requirement: Google recommends 4GB RAM for Studio, but we do have other applications running in parallel, So, practically, we would need, at least, 8GB RAM to have a smooth system.
  • Adhering with Studio environment: It is, definitely, difficult for the developers to adhere to Android Studio, because of its changes ranging from differences in handling external libraries to complexities during its initial setup. 

Material Design – The Way Forward!

We have got a fair idea of the best practices as well as the challenges that we would encounter while perusing Material Design. Nevertheless, we will have to acknowledge the fact that a sound knowledge in Material Design is a must to go ahead with it.  As we envision, the scope of Material Design is not limited, it would extend throughout Google’s array of web and mobile products, providing a consistent experience, across all platforms and applications. Material Design is definitely, the future.

The capabilities of Material design are infinite. So, let your creative minds explore the Material Design world and go innovate!


Eldho Alias

App Development – Android Expert, RapidValue Solutions

Please Share Your Thoughts & Comments Below.

How can we help you?