andorid material design with design support library

Android design support library give us many material design components that are support from android 2.1 and higher devices.

I am using android studio for creating app using design support library so if you don’t have android studio then get it from Download studio.

Below are new components provided by design support lib.

  1.  AppBarLayout
  2.  CollapsingToolbarLayout
  3.  FloatingActionButton
  4.  NavigationView
  5.  SnackBar
  6.  TabLayout
  7.  TextInputLayout

You must take care below thing while you want your view to be support from andorid 2.1 and above .

android.support.design.widget.*

In stead of * your view will come.

AppBarLayout is a vertical LinearLayout which implements many of the features of material designs app bar concept, namely scrolling gestures.

Children should provide their desired scrolling behavior through setScrollFlags(int) and the associated layout xml attribute: app:layout_scrollFlags.

This view depends heavily on being used as a direct child within a CoordinatorLayout. If you use AppBarLayout within a different ViewGroup, most of it’s functionality will not work.

AppBarLayout also requires a separate scrolling sibling in order to know when to scroll. The binding is done through the AppBarLayout.ScrollingViewBehavior behavior class, meaning that you should set your scrolling view’s behavior to be an instance of AppBarLayout.ScrollingViewBehavior. A string resource containing the full class name is available.

 
<android.support.design.widget.CoordinatorLayout
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.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <!-- Your scrolling content -->

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

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

    <android.support.v7.widget.Toolbar
    ...
    app:layout_scrollFlags="scroll|enterAlways"/>

    <android.support.design.widget.TabLayout
    ...
    app:layout_scrollFlags="scroll|enterAlways"/>

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

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

You can see google guide for using AppBarLayout  from Google Design Spec AppBar and example use in my app at github.

CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout. CollapsingToolbarLayout contains the following features:

CollpasingToolbarLayout is use full when you want your top header content to be collapse from RecycleView or  NestedScrollView .

NOTE: Scrolling Technique will not work with Listview use RecycleView or NestedScrollView instead of it.

FloatingActionButton :

You can see in top image where i have use floating button over RecycleView and below is xml layout that used for it.


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeActivity"
android:background="@color/white"
    >

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coodinate_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/btn_next_screen"
    >


    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:background="@color/white"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/viewpager"
        />

    <android.support.design.widget.AppBarLayout
        android:id="@+id/abar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_home"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways">


        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            style="@style/DesignTabLayout"


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

        <!--app:tabBackground="@color/tab_bg"
app:tabMode="fixed"
app:tabIndicatorHeight="5dp"
        --> <!--  app:tabBackground="@color/tab_bg"
                app:tabIndicatorColor="@color/tab_indicator"
                app:tabIndicatorHeight="5dp"
-->



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


    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        app:layout_anchor="@+id/viewpager"
        app:layout_anchorGravity="bottom|right"
        android:id="@+id/floatin_ab_home"
        app:fabSize="mini"
        android:src="@drawable/ic_content_add"

        />


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

<android.support.v7.widget.AppCompatButton
    android:id="@+id/btn_next_screen"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/adview"
    android:layout_centerHorizontal="true"
    android:onClick="startNextScreen"
    android:text="@string/next_screen"
    android:layout_marginBottom="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:padding="5dp"
    app:backgroundTint="@color/tab_bg"
    app:backgroundTintMode="src_over"
    />

<com.mopub.mobileads.MoPubView
    android:id="@+id/adview"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    />

</RelativeLayout>

It will give design output like below one

HomeScreen

NavigationView

Represents a standard navigation menu for application. The menu contents can be populated by a menu resource file.

NavigationView is typically placed inside a DrawerLayout.

<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_drawer_new"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize">


        </android.support.v7.widget.Toolbar>

        <!-- your content layout -->
        <FrameLayout
            android:id="@+id/id_fragment_holder"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/toolbar_drawer_new"
            android:background="@color/white"></FrameLayout>

    </RelativeLayout>


    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/menu_drawer_new"
        android:id="@+id/navigation_view"
        app:itemIconTint="@color/drawer_menu_selector"
        android:background="@color/white"
        app:itemTextColor="@color/drawer_txt_menu_selector"
        app:itemBackground="@drawable/bg_white_ripple"

        />


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

It will look like below screen :

NavigationView

TabLayout

We need to put Tablayout inside AppBarLayout like below :

<android.support.design.widget.AppBarLayout
            android:id="@+id/abar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_home"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimary"
                android:minHeight="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways">


            </android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

               style="@style/DesignTabLayout"


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

            <!--app:tabBackground="@color/tab_bg"
app:tabMode="fixed"
app:tabIndicatorHeight="5dp"
            --> <!--  app:tabBackground="@color/tab_bg"
                app:tabIndicatorColor="@color/tab_indicator"
                app:tabIndicatorHeight="5dp"
-->



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

Then in java code you can add Tabs

mTabLayout=(TabLayout)findViewById(com.himotech.matrialdesign.R.id.tab_layout);</pre>
<pre>/*mTabLayout.addTab(mTabLayout.newTab().setCustomView(R.layout.custom_tab_layout));

mTabLayout.addTab(mTabLayout.newTab().setCustomView(R.layout.custom_tab_layout));

mTabLayout.addTab(mTabLayout.newTab().setCustomView(R.layout.custom_tab_layout));*/

mTabLayout.addTab(mTabLayout.newTab().setText("Tab One"));

mTabLayout.addTab(mTabLayout.newTab().setText("Tab Two"));

mTabLayout.addTab(mTabLayout.newTab().setText("Tab Third"));

TabLayout

You can check exiting project from Github