Sunday, 24 August 2014

Android navigation drawer tutorial | Android navigation drawer with activities | Android Sliding Navigation Drawer – Example

Hello Droid Guys
     Today,  I am going to share the tutorial of  "Android sliding navigation drawer". You also find many tutorial on Google which helps you to show navigation drawer but most of them are using fragment to do that. Here, are the few good tutorial which I follows:
Android Navigation Drawer
Navigation drawer activity

1. https://developer.android.com/design/patterns/navigation-drawer.html
2. http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/

Here, I am going show sliding menu using activity. We can also achieve
the functionality of  Navigation drawer with activities.

This Android tutorial describes How to implement a navigation drawer using  Support Library the DrawerLayout API.

1. Create Drawer Layout :
            To create a navigation drawer, We first declare user interface with a
DrawerLayout as the root view of layout.

Inside the Drawer Layout, add one view that contains the main content for the
screen (your primary layout when the drawer is hidden) and another view that
contains the contents of the navigationdrawer. In this example, I am using a DrawerLayout
with two child. One a Relative layout with webView(the main content), and other
with a ListView for the navigation drawer. The webview is my activity content view.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/drawer_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >
    <!--
          main content
     -->

    <RelativeLayout

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:background="#ffffff" >

        <WebView

            android:id="@+id/webview"

            android:layout_width="fill_parent"

            android:layout_height="fill_parent"

            android:background="#ffffff" />

    </RelativeLayout>

    <!--
        navigation list item
    -->
    <FrameLayout

        android:id="@+id/content_frame"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

    <ListView

        android:id="@+id/left_drawer"

        android:layout_width="240dp"

        android:layout_height="match_parent"

        android:layout_gravity="left"

        android:background="#2A323D"

        android:cacheColorHint="#00000000"

        android:choiceMode="singleChoice" />



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


2. Initialize the Drawer List :
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.left_drawer);

mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,
		GravityCompat.START);
// set up the drawer's list view with items and click listener
mDrawerList.setAdapter(new MenuDrawerListAdapter(this, menuItemTitles,
			Config.drawerMenuItemsIconIds));
mDrawerList.setOnItemClickListener(new DrawerItemClickListener());


3. Handle Navigation List click event :

/* The click listener for ListView in the navigation drawer */
public class DrawerItemClickListener implements
	ListView.OnItemClickListener {
	@Override
	public void onItemClick(AdapterView parent, View view, int position,
		long id) {
		switch (position) {
		case 0: {
		Intent main = new Intent(getApplicationContext(),
				MainActivity.class);
		startActivity(main);
		finish();
		break;
        	}
		case 1: {
		Intent list = new Intent(getApplicationContext(),
				ListActivity.class);
		startActivity(list);
		finish();
		break;
		}
			
		default:
		break;
         }
	}
}

Download Code : Navigation Drawer Demo

Hope this will help someone.
Enjoy Coding...   :)

Mukesh Yadav

Hi Guys I am from Delhi working as Web/Mobile Application Developer(Android Developer), also have knowledge of Roboelctric and Mockito ,android test driven development... Blogging has been my passion and I think blogging is one of the powerful medium to share knowledge and ideas....

0 comments:

Post a Comment

 

Copyright @ 2013 Android Developer Blog.

Blog Widget by LinkWithin