Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Android Lollipop Navigation Drawer Using AppCompat 21

    • 0
    • 2
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 561
    Comment on it

    This tutorial is very useful if you are using material design navigation drawer. In Android's Lollipop navigation drawer it provide smooth animation when we swipe across the screen from left edge. You may use to this same functionality in older versions, But now you have to use android appcompat v-7.21.0.+ support library to give same effect to older version of android app.

    Step-1 Before to start, Create a new Project in Android Studio then add

     `compile 'com.android.support:appcompat-v7:21.0.2'` libraries in your buid.gradle 
    

    Step-2 Add colorPrimary and colorPrimaryDark in your color.xml file.

    <resources>
        <color name="colorPrimary">#00AFF0</color>
        <color name="colorPrimaryDark">#038BBF</color>
    </resources>
    

    Step-3 Add drawer's open/close string value in your strings.xml file.

    <resources>
     <string name="action_settings">Settings</string>
        <string name="drawer_open">open</string>
        <string name="drawer_close">close</string>
    </resources>
    

    Step-4 Create activity_main.xml file for MainActivity.

    <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>
    

    Step-5 Create toolbar.xml layout file .

    <?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>
    

    Step-6 Create MainActivity.java class which must extends ActionBarActivity and set your toolbar as support actionbar.

    import android.content.res.Configuration;
    import android.os.Bundle;
    import android.support.v4.widget.DrawerLayout;
    import android.support.v7.app.ActionBarActivity;
    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;
    
    
    
    /**
     * Created by arvindkumar on 4/6/15.
     */
    public class MainActivity extends ActionBarActivity {
    
        private Toolbar toolbar;
        private DrawerLayout drawerLayout;
        private ActionBarDrawerToggle drawerToggle;
        private ListView leftDrawerList;
        private ArrayAdapter<String> navigationDrawerAdapter;
        private String[] leftSliderData = {"Home", "Settings", "Log Out", "About", "Contact Me"};
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            setContentView(R.layout.activity_main);
            nitView();
    
            if (toolbar != null) {
                toolbar.setTitle("My 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>( MainActivity.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.menu_main, 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);
        }
    }
    

    Step-7 Create styles.xml in values folder .

    <resources>
    
        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</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>
    

    Step-8 Your AndroidManifest.xml .

    <manifest
        xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.android.mylollipopnavigationdrawer">
    
      <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:theme="@style/AppTheme"><!--splash screen-->
            <activity
                android:name="com.android.mylollipopnavigationdrawer.MainActivity"
                android:label="@string/app_name"
                android:screenOrientation="portrait">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
        </application>
    </manifest>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: