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.

 


 
    
 

 

 
    
 
    
 

 



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.

 

 
 
    
 
    
 
        
 
 
        
 
        
 
         
 
 
 
    
 
 
    
 
 

 

 

 
 

It will give design output like below one



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.

 
    
 
        
 
 
        
 
        
        
 
    
 
 
    
 
 



It will look like below screen :



TabLayout

We need to put Tablayout inside AppBarLayout like below :


 
            
 
 
            
 
            
 
             
 
 
 
        



Then in java code you can add Tabs
mTabLayout=(TabLayout)findViewById(com.himotech.matrialdesign.R.id.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().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"));




You can check exiting project from Github