Pages

Saturday, January 24, 2015

Setting ToolBar As ActionBar with Navigation Drawer and Lollipop Drawer Toggle Animation

This tutorial shows how to set Android Toolbar as ActionBar along with beautiful Android Navigation Drawer and Drawer Toggle animation.

First Step: Import Support Libraries 

If you are using Gradle, add appcompat as dependency in your build.gradle file.


 dependencies {  
   compile "com.android.support:appcompat-v7:21.0.+"  
 }  


Second Step: Add ToolBar and Navigation Drawer in the XML Layout file.


activity_main.xml



 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:app="http://schemas.android.com/apk/res-auto"  
   android:layout_width="fill_parent"  
   android:layout_height="fill_parent"  
   android:orientation="vertical">  
   <android.support.v7.widget.Toolbar  
     android:id="@+id/toolbar"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:layout_marginTop="@dimen/statusbar_padding"  
     android:background="@color/transparent"  
     android:elevation="3dp"  
     android:minHeight="?attr/actionBarSize"  
     app:popupTheme="@style/ThemeOverlay.AppCompat.Light"  
     app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"  
     app:title="@string/app_name"  
     app:titleTextAppearance="@style/MyTheme.MyToolbar.TitleTextStyle_Main" />  
   <android.support.v4.widget.DrawerLayout  
     android:id="@+id/drawer_layout"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent">  
     <!-- The main content view -->  
     <RelativeLayout  
       android:id="@+id/container"  
       android:layout_width="match_parent"  
       android:layout_height="match_parent">  
     </RelativeLayout>  
     <!-- The navigation drawer -->  
     <FrameLayout  
       android:layout_width="@dimen/navdrawer_width"  
       android:layout_height="match_parent"  
       android:layout_gravity="start">  
       <ScrollView  
         android:id="@+id/drawer"  
         android:layout_width="match_parent"  
         android:layout_height="match_parent"  
         android:background="@color/navdrawer_background">  
         <LinearLayout  
           android:layout_width="match_parent"  
           android:layout_height="wrap_content"  
           android:orientation="vertical">  
           <include layout="@layout/navdrawer_content" />  
         </LinearLayout>  
       </ScrollView>  
     </FrameLayout>  
   </android.support.v4.widget.DrawerLayout>  
 </LinearLayout>  


Note: Create themes based on your requirements for toolbar.

Third Step: Link XML to JAVA Class

ActivityMain.Java (extends ActionBarActivity)



  @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);  
     ActionBarDrawerToggle mDrawerToggle;   
    Toolbar  toolbar = (Toolbar) findViewById(R.id.toolbar);  
     setSupportActionBar(toolbar);  
     mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar,  
         R.string.hello_world, R.string.hello_world);  
     mDrawerToggle.setDrawerIndicatorEnabled(true);  
     mDrawerLayout.post(new Runnable() {  
       @Override  
       public void run() {  
         mDrawerToggle.syncState();  
       }  
     });  
     mDrawerLayout.setDrawerListener(mDrawerToggle);  
     mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, Gravity.START);  
 }  

Fourth Step: Set Theme


In styles.xml create a new theme and add this theme as the Application theme in the Manifest.xml file



  <style name="Theme.Sample" parent="Theme.AppCompat.Light">  
     <item name="windowActionBar">false</item>  
   </style>  

Now Run your code.


Your Toolbar with Navigation Drawer look similar to this screenshot.

Happy Coding....:)