What is Android Material Design?

Google provides material design brings with it new, exciting ways to delight your users with a visually appealing Android app. But what is material design? Google introduced a material design that describes an interface that incorporates tactile surfaces, bold graphic design and also a fluid motion to create beautiful, intuitive experiences.Material design is developed for better user experience.Material design is comprehensive guide for visual, motion, and interactive design across platforms and devices. Android now includes support for material design applications.Material designs are started from android 5.0 lollipop version.The Design Support library is compatible with Android 2.3 lollipop(API level 9) and above.

Android provides you following elements to build material design applications:

• A new theme
• New Widgets for complex designs like lists and cards
• New APIs for custom shadows and applying different animations
• Vector Drawables
• Custom Animations
• Widgets for navigation drawers and another component.

How to implement the material design in android application?

To create applications with material design-

1. Review the material design specification
2. Apply the material theme to your app.
3. Create your layouts which follow material design guidelines
4. Specify the elevation of your views to cast shadows
5. Use the system widgets for lists and cards.

Material Design Specification

1.Material is Metaphor

The material metaphor is the unifying theory of a rationalized space and system of motion. The material is grounded in tactile reality which is inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.Surfaces and edges of material provide visual cues that are grounded in reality. Using familiar tactile attributes helps users quickly understand affordances.The flexibility of material creates new affordances that supersede those in the physical world, without breaking the rules of physics.The fundamentals of light, surface, and movement are key to conveying how objects move, interacting with each other, and exist in space and in relation to each other.

2.Bold, graphic, intentional

Foundational elements of print based design are typography, grids, scale, color, and use of imagery guide visual treatments. They create the hierarchy, meaning, and focus. Deliberate color choices, edge to edge imagery, large scale typography, and international whitespace create a bold and graphic interface that immerse the user experience.

3.Motion provides meaning

Motion respects and reinforces the user as a prime mover. Primary user actions are inflection points that initiate motion and transforming the whole design. All action takes place in single environment. Objects are presented to user without breaking the continuity of user experience Motion is meaningful and appropriate, serving to focus attention and also maintain continuity.

Maintaining Backward Compatibility                                           

You can add many material design features to your application maintaining with versions of Android earlier than 5.0.You can also use v7 Support Libraries r21 and above that includes following features:

• Material design styles for some system widgets when you apply one of the Theme.AppCompat themes.
• Colour palette theme attributes in the Theme.AppCompat themes
• The Recycle review widget to display data collection.
• The Cardview widget to create cards.

Apply The Material Theme

To apply material theme in your application, specify a style that inherits from android:Theme:Material

<resources>
<!– Base application theme. –>
<style name=“AppTheme” parent=“Theme.AppCompat.Light.NoActionBar”>
<!– Customize your own theme here. –>
<item name=“primary”>@color/primary</item>
<item name=“accent”>@color/accent</item>
</style>
</resources>

The material theme provides us an updated system widgets that let you set their color palette and set default animations for touch feedback and activity transitions in your applications.

Setting Elevation in Your Views

Views can cast shadows and elevation value of a view determines the size of the shadow and its drawing order. To set the elevation of the view, use the android: elevation attribute in your layouts:

<EditText
android:layout_width=“100dp”
android:layout_height=“100dp”
android:textColor=“@color/black”
android:elevation=“10dp”        
android:textSize=“20dp”
</EditText>

Create cards and lists

Recyclerview is a more advanced version of the List view that supports different layout types and provides performance improvements.Card View lets you show pieces of information inside cards with a consistent look across apps.

Declare card view in your app :

<android.support.v7.widget.CardView
android:layout_width=“100dp”
android:layout_height=“100dp”

     android:elevation=“7dp”
android:layout_marginLeft=“10dp”>
</android.support.v7.widget.CardView>

Declare recyclerview in your app:

<android.support.v7.widget.RecyclerView
android:layout_width=”300dp”
android:layout_height=”300dp”
android:layout_marginLeft=”10dp”>
</android.support.v7.widget.RecyclerView>

Mugdha Sitaprao

Mugdha is well experienced in Mobile Application Development expertise in Android with 1 year of experience.