Navigation Drawer Android Example _ JavaTechig
Transcript of 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
-
8/9/2019 Navigation Drawer Android Example _ JavaTechig
2/10
13/2/2015 Navigation Drawer Android Example | JavaTechig
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.
-
8/9/2019 Navigation Drawer Android Example _ JavaTechig
3/10
13/2/2015 Navigation Drawer Android Example | JavaTechig
http://javatechig.com/android/navigation-drawer-android-example 3
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);
-
8/9/2019 Navigation Drawer Android Example _ JavaTechig
4/10
13/2/2015 Navigation Drawer Android Example | JavaTechig
http://javatechig.com/android/navigation-drawer-android-example 4
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,
-
8/9/2019 Navigation Drawer Android Example _ JavaTechig
5/10
13/2/2015 Navigation Drawer Android Example | JavaTechig
http://javatechig.com/android/navigation-drawer-android-example 5
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
-
8/9/2019 Navigation Drawer Android Example _ JavaTechig
6/10
13/2/2015 Navigation Drawer Android Example | JavaTechig
http://javatechig.com/android/navigation-drawer-android-example 6
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
-
8/9/2019 Navigation Drawer Android Example _ JavaTechig
7/10
13/2/2015 Navigation Drawer Android Example | JavaTechig
http://javatechig.com/android/navigation-drawer-android-example 7
• •
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/9/2019 Navigation Drawer Android Example _ JavaTechig
8/10
13/2/2015 Navigation Drawer Android Example | JavaTechig
http://javatechig.com/android/navigation-drawer-android-example 8
• •
• •
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
-
8/9/2019 Navigation Drawer Android Example _ JavaTechig
9/10
13/2/2015 Navigation Drawer Android Example | JavaTechig
http://javatechig.com/android/navigation-drawer-android-example 9
• •
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
-
8/9/2019 Navigation Drawer Android Example _ JavaTechig
10/10
13/2/2015 Navigation Drawer Android Example | JavaTechig
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/