Navigation Drawer Android Example _ JavaTechig

8/9/2019 Navigation Drawer Android Example _ JavaTechig

1/10

13/2/2015 Navigation Drawer Android Example | JavaTechig

http://javatechig.com/android/navigation-drawer-android-example

Navigation Drawer Android Example

Posted on Oct 16, 2013 by Nilanchala in Android with 46Comments

Table of Contents

1. Navigation Drawer Design2. When to Use the Navigation Drawer

3. Creating a Navigation Drawer

3.1. Create a Drawer Layout

3.2. Initialize the Drawer List

3.3. Handle Navigation Click Events

3.4. Listen for Open and Close Events

4. Download Complete Source

5. Working Demo

The navigation drawer is a panel that displays the app’s main

navigation commands on the left side of the screen. It is not visible by

default, and can be shown while user swipes right or while clicking on

the open menu icon in the ActionBar. This example describes How to

implement a navigation drawer using Support

Library the DrawerLayout API.

1. Navigation Drawer Design

Navigation drawer is an overlay panel, that is replaced with the legacy

application dashboard screen or menu. Now we don’t need to create a

dedicated activity for showing all application options. For example, if

you look at the older version of Facebook app, the dashboard screen

was only the way to play around with the app. Lets say, if you are

inside messages, you wont be able to get into the friends list, unless

you come back to dashboard.

Follow 20

Follow @javatechig 210 followers

Connect with us

Sign up to receive email updates when

a new tutorial is added.

Subscribe

Email Subscribe

Categories

Android Apps Blackberry Blog

Books Core Java C Programming

Cross Platform Data Structures

Design Design Patterns Eclipse

Gaming Git HTML5

IBM Worklight J2ME Java

Libgdx Mac OS X Open Source

PhoneGap Reviews SE Concepts

Sencha Touch Servlets Struts

Tips Tools Video Wordpress

Xamarin

Home Java Tutorials Android Xamarin Other Tutorials Blog Sample Apps

Search … SearchAbout Our Team Write for us Advertise Contact us

avatechig

6,891 people like Javatechig.

Facebook social plugin

Like

http://javatechig.com/topics/cross-platform/ibm-worklighthttp://javatechig.com/http://javatechig.com/android-tutorialshttp://javatechig.com/topics/tipshttp://javatechig.com/topics/toolshttp://javatechig.com/topics/videohttp://javatechig.com/topics/wordpresshttp://javatechig.com/topics/androidhttp://javatechig.tumblr.com/http://javatechig.com/write-for-ushttp://javatechig.com/topics/cross-platformhttp://javatechig.com/topics/xamarinhttp://javatechig.com/contributorshttp://javatechig.com/author/nilanchalahttp://www.facebook.com/javatechighttp://javatechig.com/topics/bloghttp://javatechig.com/topics/design-patternshttp://javatechig.com/topics/cross-platform/html5http://javatechig.com/topics/gaming/libgdxhttp://javatechig.com/topics/wordpresshttp://feeds.feedburner.com/javatechighttp://javatechig.com/topics/toolshttp://javatechig.com/android-tutorialshttp://javatechig.com/topics/chttp://javatechig.com/topics/videohttp://www.pintrest.com/javatechighttp://javatechig.com/topics/reviewshttp://www.reddit.com/submit?url=http%3A%2F%2Fjavatechig.com%2F%3Fp%3D3787http://javatechig.com/topics/cross-platform/ibm-worklighthttp://javatechig.com/topics/cross-platform/phonegaphttp://javatechig.com/topics/eclipsehttps://plus.google.com/share?url=http%3A%2F%2Fjavatechig.com%2F%3Fp%3D3787http://linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fjavatechig.com%2F%3Fp%3D3787&title=Navigation%20Drawer%20Android%20Examplehttp://javatechig.com/topics/xamarinhttp://javatechig.com/topics/appshttp://javatechig.com/android/navigation-drawer-android-examplehttp://javatechig.com/topics/java/core-javahttp://javatechig.com/topics/gaminghttp://javatechig.com/topics/java/blackberryhttp://javatechig.com/topics/android/opensourcehttp://javatechig.com/topics/java/servletshttp://javatechig.com/topics/bookshttp://twitter.com/javatechighttp://javatechig.com/http://javatechig.com/topics/java/strutshttp://javatechig.com/abouthttp://javatechig.com/topics/se-conceptshttp://javatechig.com/topics/androidhttp://www.facebook.com/sharer.php?u=http%3A%2F%2Fjavatechig.com%2F%3Fp%3D3787&t=Navigation%20Drawer%20Android%20Examplehttp://javatechig.com/open-source-sample-appshttp://javatechig.com/topics/mac-os-xhttp://javatechig.com/android/[email protected]://javatechig.com/topics/tipshttp://javatechig.com/topics/data-structureshttp://javatechig.com/advertisehttp://javatechig.com/topics/bloghttp://javatechig.com/contacthttp://javatechig.com/http://javatechig.com/topics/cross-platform/sencha-touchhttp://javatechig.com/topics/githttp://javatechig.com/topics/javahttps://plus.google.com/u/0/b/113993447712840443333http://javatechig.com/topics/java/j2mehttp://twitter.com/home?status=Navigation%20Drawer%20Android%20Example%20http%3A%2F%2Fjavatechig.com%2F%3Fp%3D3787http://javatechig.com/topics/design


2/10


http://javatechig.com/android/navigation-drawer-android-example 2

The latest version of Facebook App is using the Navigation Drawer.

2. When to Use the Navigation Drawer

Before you decide to use a navigation drawer in your app, you should

understand the use cases and design principles defined in

the Navigation Drawer design guide. It is not an general replacement

for top-level menu navigation.

More information on design guidelines follow here.

3. Creating a Navigation Drawer

This lesson describes step by step tutorial to Implement a navigation

drawer using the DrawerLayout APIs available in the Support Library.

3.1. Create a Drawer Layout

To create a navigation drawer, first declare your user interface with a

DrawerLayout object as the root view of your layout.

Inside the DrawerLayout, 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 navigation drawer. In

this example, our layout uses a DrawerLayout with two child views.

One FrameLayout to contain the main content, and a ListView for the

navigation drawer. The FrameLayout is used to hold the child view’s

populated by a Fragment at runtime.


3/10



Key Notes:

The main content view is used as first child in the

DrawerLayout. The XML order implies z-ordering and thedrawer must be on top of the content.

The main content view is set to match the parent view’s width

and height, because it represents the entire UI when the

navigation drawer is hidden.

The drawer view specifies its width in dp units and the height

matches the parent view. The drawer width should be no more

than 320dp so the user can always see a portion of the main

content.

3.2. Initialize the Drawer List

Now, first initialize the navigation drawer’s list of items. As here the

navigation drawer consists a ListView, so the list can be populated by

an Adapter.

// Within which the entire activity is enclosed

private DrawerLayout mDrawerLayout;

// ListView represents Navigation Drawer

private ListView mDrawerList;

// Getting reference to the DrawerLayout

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

mDrawerList = (ListView) findViewById(R.id.drawer_list);

// Creating an ArrayAdapter to add items to the listview mDrawerLi

ArrayAdapter adapter = new ArrayAdapter(getBaseCont

R.layout.drawer_list_item, getResources().getStrin

// Setting the adapter on mDrawerList

mDrawerList.setAdapter(adapter);


4/10



3.3. Handle Navigation Click Events

When the user selects an item in the drawer’s list, the system calls

onItemClick() on the OnItemClickListener given to

setOnItemClickListener(). In this example, selecting each item in the

list inserts a different Fragment into the main content view

FrameLayout.

// Setting item click listener for the listview mDrawerList

mDrawerList.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view,

int position, long id) {

// Getting an array of rivers

String[] menuItems = getResources().getStringArray(R.array.

// Currently selected river

mTitle = menuItems[position];

// Creating a fragment object

WebViewFragment rFragment = new WebViewFragment();

// Passing selected item information to fragment

Bundle data = new Bundle();

data.putInt("position", position);

data.putString("url", getUrl(position));

rFragment.setArguments(data);

// Getting reference to the FragmentManager

FragmentManager fragmentManager = getFragmentManager();

// Creating a fragment transaction

FragmentTransaction ft = fragmentManager.beginTransaction()

// Adding a fragment to the fragment transaction

ft.replace(R.id.content_frame, rFragment);

// Committing the transaction

ft.commit();

// Closing the drawer

mDrawerLayout.closeDrawer(mDrawerList);

}

});

3.4. Listen for Open and Close Events

We can also listen to the drawer open and close event. To listen for

drawer open and close events, we can extend the

ActionBarDrawerToggle class. The ActionBarDrawerToggle

implements DrawerLayout.DrawerListener.

// Getting reference to the ActionBarDrawerToggle

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,


5/10



R.drawable.ic_drawer, R.string.drawer_open,

R.string.drawer_close) {

/** Called when drawer is closed */

public void onDrawerClosed(View view) {

getActionBar().setTitle(mTitle);

invalidateOptionsMenu();

}

/** Called when a drawer is opened */

public void onDrawerOpened(View drawerView) {

getActionBar().setTitle("JAVATECHIG.COM");

invalidateOptionsMenu();

}

};

// Setting DrawerToggle on DrawerLayout

mDrawerLayout.setDrawerListener(mDrawerToggle);

4. Download Complete Source

Download Source Code on Github

5. Working Demo

Nilanchala

A blogger, a bit of tech freak and a software developer. He is a

thought leader in the fusion of design and mobile technologies.

Follow him on Twitter or Google plus.

Related Posts

http://javatechig.com/android/how-to-drag-a-view-in-androidhttp://javatechig.com/author/nilanchalahttp://javatechig.com/android/android-toast-examplehttp://javatechig.com/wp-content/uploads/2013/10/Navigation-Drawer-Android-Example.gifhttps://plus.google.com/u/0/+NilanchalaPanigrahy?rel=authorhttps://twitter.com/npanigrahyhttp://javatechig.com/android/setting-android_home-environmental-variable-on-machttp://javatechig.com/android/how-to-get-list-of-installed-apps-in-androidhttps://github.com/javatechig/AndroidNavigationDrawer


6/10



46 Comments

• •

santiagop593 •

Thanks a lot !! awesome tutorial

Check out my cryptography app that uses Navigation Drawers

https://play.google.com/store/...

• •

asim Memon •

hey how can i slide main layout toward the right (as per linkdin style). ?

• •

arnold •

how can i add the grid view as the main content in this drawer....have no clue

on how to do that

• •

Zafer •

How can I handle both activity and fragment on Navigation Drawer?

• •

Ryan Pedersen •

here is a slight improvement to the settings menu hiding

http://toastdroid.com/2014/04/...

• •

Saimon Alam •

Hey man, I learned a lot from this. Thanks 4 the gr eat tutorial. But what I'm

puzzled abt is that when I click on an item on the drawer the title on the

actionbar changes and the drawer closes but I still get a blank page. It seems

2 me that the fragment is not getting loaded at all.

I should also mention that I couldn't import the project 2 eclipse directly bcoz it

did not recognize it as a valid project. So I simply created the java and XML

files with the exact same names as in the project and copied the images and

string resources; and I did add internet permission in the manifest as well.

Everything works except 4 the fragment part.

Any help will be more than appreciated. Thanks a lot.

Misha Lashkov •

Hi, thanks for the awesome code, one uestion thou h, when startin the

How to Get List of

Installed Apps in

Android

How to Drag a

View in Android

Android Toast

Example

Setting

ANDROID_HOME

Environmental

Variable on Mac

http://javatechig.com/android/how-to-get-list-of-installed-apps-in-androidhttp://javatechig.com/android/setting-android_home-environmental-variable-on-machttp://javatechig.com/android/how-to-get-list-of-installed-apps-in-androidhttp://javatechig.com/android/how-to-drag-a-view-in-androidhttp://javatechig.com/android/android-toast-examplehttp://javatechig.com/android/setting-android_home-environmental-variable-on-machttp://javatechig.com/android/how-to-get-list-of-installed-apps-in-androidhttp://javatechig.com/android/setting-android_home-environmental-variable-on-machttp://javatechig.com/android/how-to-drag-a-view-in-androidhttp://javatechig.com/android/android-toast-example


7/10



• •

application it will show a blank page, could you modify the code so it will start

with case 0 (home)?

Thank you!

• •

JavaTechig • Mod

Thanks for your suggestions. We will do the required changes.

• •

Sanjayjith M •

I created one application and I used navigation drawer to navigate from one

fragment to another. In that, if I navigate from one fragment to another and if

again comeback to the same fragment. Its not getting resume. Its simply

showing Unfortunately the app was closed. Can you tell me how to use

onresume method properly in fragment???

• •

JavaTechig • Mod

can you paste the error message here ?

• •

osama akb •

i'm beginner in eclipse and i downloaded the source code , i want to open it but

i dont know how to open it

• •

JavaTechig • Mod

Just start eclipse. In your workspace click File-> Import -> Existing

android code into workspace.

• •

osama akb •

good job dude . but i want to make navigation drawer that let me like . for example if i clicked on android it open a webview (url)

• •

avatechig •

how to get this

• •

JavaTechig • Mod

Checkout this lib..

https://github.com/jfeinstein1...

By default in android Navigation menu, you cannot move the action bar

while menu is open. But you can achieve with the above github code.

avatechig •

what i do for getting

that exact screen shot in android


8/10



• •

• •

avatechig •

By which Concept it is Possible correctly as above screen shot

shown

• •

avatechig •

How to get this will u pls heip me pls send the code for this

• •

Bruno •

I love you!

• •

Thibautfrance •

Hello, great job, i have one question, how to add ico for each menu side byside .

Answer please thanks

• •

Davide Pirelli •

great tutorial man, all working perfectly..but...how can i implement onBack();

history in webviews fragment?

• •

Davide Pirelli •

How can i make a function that "goBack" in history of a webview fragment?

BTW this guide rule! Great works, all of your guide are well written and simple

to understand ;)

• •

Davide Pirelli •

How can i get "one step back" with backbutton?

Thanks in advance!

• •

Jermaine Thomas •

Hey, lovely sample app. My only problem is each of the items in the menu

opens the url in the browser (outside of the app) can you please advise.

• •

JavaTechig • Mod

which app or device are you testing on?

Jermaine Thomas •

Hey, testing on os 4.2.2 but i saw the problem, there was no

webclient view initiated. So i added the line below just before

webView.loadUrl(url); in the WebViewFragment.java file


9/10



• •

webView.setWebViewClient(new WebViewClient());

• •

Coziie •

First ever Android sample I downloaded from web worked!! I'm new to Java

and never had a success in running a demo app downloaded from web.

Your's is the first working sample of Android i found online. Thank you very

much.

• •

JavaTechig • Mod

Thanks for reading.

• •

Harsh •

This is by far the best tutorial.

• •

Jorell Rutledge •

How would you add icons to the navigation drawer? Also, how would you

enable the webview to go back? Any help would be amazing.

• •

hibautfrance •

YEs javatechig, it would be perfect :)

• •

Madiyar •

How do swipe with action bar like this picture

• •

JavaTechig • Mod

This is no more a android design pattern. Suggest to go with default

android guidelines.

• •

Adrian Coman •

This requires API level 11, so it's available for Android 3.0+ if i'm not mistaken.

• •

JavaTechig • Mod

Yes, the above example works 3.0+

• •

Bastien •

nice example. But there is an issue. If my fragment is doing too much of

background work the navigation closing is causing a delay. Any workaround

on this ?

JavaTechig • Mod


10/10


htt //j t hi / d id/ i ti d d id l 10

• •

Yes, do the fragment transaction on onDrawerClosed()

• •

Kenito •

I cant download the source code

• •

ortex67 •

Webview works only with navigation drawer while application starts with a

blank page.

• •

JavaTechig • Mod

It is just an example of navigation drawer. You can fix such bugs

• •

Mahesh Vemuri •

will it work on android 2.3?

• •

Mahesh Vemuri •

Will this work on android 2.3?

JavaTechig • Mod

Currentl the exam le is develo ed for 4.0 and above

Advertise | Contact us | Privacy Policy | Terms of Use © 2012-2015 JavaTechig All rights reserved.
http://javatechig.com/privacy-policyhttp://javatechig.com/advertisehttp://javatechig.com/legalhttp://javatechig.com/contact/http://javatechig.com/

Navigation Drawer Android Example _ JavaTechig

Documents

Transcript of Navigation Drawer Android Example _ JavaTechig