Android Design Support Library

Google introduced the Android Design Support Library which brings a number of important material design components to developers. The components are backwards compatible, with support back to Android 2.1 and implementing them is easier than previously. The library includes a navigation drawer view, floating labels for editing text, a floating action button (FAB), snack bar, Tabs view.

The Design Support Library can be included in your Android projects by importing the Gradle dependency.

          compile 'com.android.support:design:22.2.0'

Navigation View:

The NavigationView makes it easy to create Material Design-style side drawer layouts. It consists of the header and the menu.

<android.support.v4.widget.DrawerLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/drawer_layout"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:fitsSystemWindows="true">

      <FrameLayout
              android:id="@+id/main_content_frame"
              android:layout_width="match_parent"
              android:layout_height="match_parent" />

          <android.support.design.widget.NavigationView
                   android:id="@+id/navigation_view"
                   android:layout_width="wrap_content"
                   android:layout_height="match_parent"
                   android:layout_gravity="start"
                   app:headerLayout="@layout/navigation_header"
                   app:menu="@menu/drawer" />

</android.support.v4.widget.DrawerLayout>


This view supports two key attributes:

Header Layout:

The optional headerLayout attribute is used to declare a layout to be used for the header section of the Drawer. This is the space shown above our navigational items, a common use is a profile section header.

Menu:

The menu attribute is used to declare the menu resource to be used for the navigation items in the drawer. It is also possible to call inflateMenu() to inflate a menu programmatically.

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

      xmlns:tools="http://schemas.android.com/tools"
      tools:context=".MainActivity">
       <group android:checkableBehavior="single">
                <item
                            android:id="@+id/navigation_item_1"
                            android:checked="true"
                            android:icon="@drawable/home_icon"
                            android:title="@string/home" />
                <item
                            android:id="@+id/navigation_item_2"
                            android:icon="@drawable/message_icon"
                            android:title="@string/messages" />
                <item
                            android:id="@+id/navigation_item_3"
                            android:icon="@drawable/message_icon"
                            android:title="@string/friends" />
                <item
                            android:id="@+id/navigation_item_4"
                            android:icon="@drawable/message_icon"
                            android:title="@string/discussion" />
       </group>
</menu>

Floating Action Button:

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

With the Design Support Library, floating action buttons can be included in a layout with a few simple lines of XML. Each button is easily customizable with icons and colors. Two sizes are available, standard(56dp) and mini (40dp).

<android.support.design.widget.FloatingActionButton
         android:id="@+id/fab"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="end|bottom"
         android:layout_margin="16dp"
         android:src="@drawable/ic_fab" /

Snack Bar:

Snackbars are like Toasts, but a bit more flexible. A snackbar contains an action and can be dismissed.

Snackbars are shown on the bottom of the screen and contain text with an optional single action. They automatically time out after the given time length by animating off the screen. In addition, users can swipe them away before the timeout.

Snackbar 

            .make(view, R.string.snackbar_text, Snackbar.LENGTH_LONG)                         .setAction(R.string.bar_action, mOnClickListener) 

            .show();

         

Floating Labels for EditText:

The new TextInputLayout allows us to wrap EditText views in order to display floating labels above the EditText field. When an EditText has focus, the assigned hint will ‘float’ above the view to the top-left hand side. This is useful as it still provides context to the user whilst data is being input.

To implement this we just wrap our EditText in the TextInput Layout:

<android.support.design.widget.TextInputLayout
              android:layout_width="match_parent"
              android:layout_height="wrap_content" >

<EditText
                android:id="@+id/edit_text_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress"
                android:hint="@string/hint_email" />

</android.support.design.widget.TextInputLayout>