Posted by Mithilesh Joshi, Seo Consultant

Posted by Mithilesh Joshi, Seo Consultant 

Created  By Ian Lake, Developer Advocate

Android 5.0 Lollipop was one of the most significant Android releases ever, in no small part 

due to the introduction of material design, a new design language that refreshed the entire 

Android experience. Our detailed spec is a great place to start to adopt material design, but 

we understand that it can be a challenge for developers, particularly ones concerned with

 backward compatibility. With a little help from the new Android Design Support Library, 

we’re bringing a number of important material design components to all developers and to

 all Android 2.1 or higher devices. You’ll find a navigation drawer view, floating labels for 

editing text, a floating action button, snackbar, tabs, and a motion and scroll framework to 

tie them together.

Navigation View

The navigation drawer can be an important focal point for identity and navigation within your
 app and consistency in the design here can make a considerable difference in how easy
 your app is to navigate, particularly for first time users.NavigationView makes this easier by 
providing the framework you need for the navigation drawer as well as the ability to inflate
 your navigation items through a menu resource.

You use NavigationView as DrawerLayout’s drawer content view with a layout such as:

        xmlns:android="http://schemas.android.com/apk/res/android"

        xmlns:app="http://schemas.android.com/apk/res-auto"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:fitsSystemWindows="true">




    




    

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:layout_gravity="start"

            app:headerLayout="@layout/drawer_header"

            app:menu="@menu/drawer"/>

You’ll note two attributes for NavigationView: app:headerLayout controls the (optional) layout used for the header.app:menu is the menu resource inflated for the navigation items (which can also be updated at runtime). NavigationViewtakes care of the scrim protection of the status bar for you, ensuring that your NavigationView interacts with the status bar appropriately on API21+ devices.

The simplest drawer menus will be a collection of checkable menu items:

 android:checkableBehavior="single">


    

        android:id="@+id/navigation_item_1"

        android:checked="true"

        android:icon="@drawable/ic_android"

        android:title="@string/navigation_item_1"/>

    

        android:id="@+id/navigation_item_2"

        android:icon="@drawable/ic_android"

        android:title="@string/navigation_item_2"/>

The checked item will appear highlighted in the navigation drawer, ensuring the user knows which navigation item is currently selected.

You can also use subheaders in your menu to separate groups of items:

    android:id="@+id/navigation_subheader"

    android:title="@string/navigation_subheader">

    



        

            android:id="@+id/navigation_sub_item_1"

            android:icon="@drawable/ic_android"

            android:title="@string/navigation_sub_item_1"/>

        

            android:id="@+id/navigation_sub_item_2"

            android:icon="@drawable/ic_android"

            android:title="@string/navigation_sub_item_2"/>

    

You’ll get callbacks on selected items by setting a OnNavigationItemSelectedListener usingsetNavigationItemSelectedListener(). This provides you with the MenuItem that was clicked, allowing you to handle selection events, changed the checked status, load new content, programmatically close the drawer, or any other actions you may want.

Floating labels for editing text

Even the humble EditText has room to improve in material design. While an EditText alone will hide the hint text after the first character is typed, you can now wrap it in a TextInputLayout, causing the hint text to become a floating label above the EditText, ensuring that users never lose context in what they are entering.

In addition to showing hints, you can also display an error message below the EditText by calling setError().

Floating Action Button

A floating action button is a round button denoting a primary action on your interface. The Design library’sFloatingActionButton gives you a single consistent implementation, by default colored using the colorAccent from your theme.

In addition to the normal size floating action button, it also supports the mini size (fabSize="mini") when visual continuity with other elements is critical. As FloatingActionButton extends ImageView, you’ll use android:src or any of the methods such as setImageDrawable() to control the icon shown within the FloatingActionButton.