How To Make Android Lollipop Navigation Drawer Using AppCompat 21 Example

Please follow and like us:

Lollipop Navigation Drawer

 

Android material design Lollipop Navigation Drawer gives smooth animation when you swipe across the screen from left edge. You may see this and think about how to implement same functionality in older versions, But now not to worry because using android appcompat v-7 support library, we can give same effect to older versions of android app.

 

 Lollipop Navigation Drawer Example Step by Step

Before we start Lollipop Navigation Drawer , make sure you update to latest SDK.
Create new Project in Android Studio, then add appcompat-v7.21.0.+ and appcompat-v4.21.0.+ libraries in your buid.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 21
    buildToolsVersion "21.1.1"
    defaultConfig {
        applicationId "nkdroid.com.lollipopdrawer"
        minSdkVersion 8
        targetSdkVersion 21
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            runProguard false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.2'
    compile 'com.android.support:support-v4:21.0.2'
}

Add primaryColor and primarycolorDark in your color.xml file for Lollipop Navigation Drawer

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primaryColor">#2196F3</color>
    <color name="primaryColorDark">#0D47A1</color>
</resources>

Add drawer open/close string value in your strings.xml file for Lollipop Navigation Drawer

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Lollipop Drawer</string>
    <string name="action_settings">Settings</string>
    <string name="drawer_open">open</string>
    <string name="drawer_close">close</string>
</resources>

Your activity_my.xml layout file looks like this for Lollipop Navigation Drawer

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <include layout="@layout/toolbar" />

    <android.support.v4.widget.DrawerLayout
        android:layout_width="match_parent"
        android:id="@+id/drawerLayout"
        android:layout_height="match_parent">

        <!-- activity view -->
        <RelativeLayout
            android:layout_width="match_parent"
            android:background="#fff"
            android:layout_height="match_parent">

            <TextView
                android:layout_centerInParent="true"
                android:layout_width="wrap_content"
                android:textColor="#000"
                android:text="Activity Content"
                android:layout_height="wrap_content" />
        </RelativeLayout>

        <!-- navigation drawer -->
        <RelativeLayout
            android:layout_gravity="left|start"
            android:layout_width="match_parent"
            android:background="#fff"
            android:layout_height="match_parent">

            <ListView
                android:id="@+id/left_drawer"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:divider="#eee"
                android:background="#fff"
                android:dividerHeight="1dp" />
        </RelativeLayout>

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

</LinearLayout>

Your toolbar.xml layout file looks like this for Lollipop Navigation Drawer

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

Your MyActivity.java looks like this:
Here your activity must extends ActionBarActivity and set your toolbar as support actionbar.

import android.content.res.Configuration;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MyActivity extends ActionBarActivity {

    private Toolbar toolbar;
    private DrawerLayout drawerLayout;
    private ActionBarDrawerToggle drawerToggle;
    private ListView leftDrawerList;
    private ArrayAdapter<String> navigationDrawerAdapter;
    private String[] leftSliderData = {"Home", "Android", "Sitemap", "About", "Contact Me"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);
        nitView();
        if (toolbar != null) {
            toolbar.setTitle("Navigation Drawer");
            setSupportActionBar(toolbar);
        }
        initDrawer();
    }

    private void nitView() {
        leftDrawerList = (ListView) findViewById(R.id.left_drawer);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        navigationDrawerAdapter=new ArrayAdapter<String>( MyActivity.this, android.R.layout.simple_list_item_1, leftSliderData);
        leftDrawerList.setAdapter(navigationDrawerAdapter);
    }

    private void initDrawer() {

        drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close) {

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);

            }

            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);

            }
        };
        drawerLayout.setDrawerListener(drawerToggle);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        drawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        drawerToggle.onConfigurationChanged(newConfig);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.my, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        if (drawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Create style.xml file in values-21 folder for Lollipop Navigation Drawer

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="myAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryColorDark</item>
        <item name="android:statusBarColor">@color/primaryColorDark</item>

        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    </style>

    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/black</item>
    </style>

</resources>

Create your style.xml file in values folder for older versions then for Lollipop Navigation Drawer

<resources>

    <style name="myAppTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryColorDark</item>
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    </style>

    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/black</item>
    </style>

</resources>

Your AndroidManifest.xml is looks like this for Lollipop Navigation Drawer

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="nkdroid.com.lollipopdrawer" >

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/myAppTheme" >
        <activity
            android:name=".MyActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Check our  new tutorials also:

Android Push Notifications

Integrating Google Admob in android app

Android Google Analytics Example Integration

Stay connected for latest android development tutorials for beginners.