Android NavigationDrawer

Android NavigationDrawer

You might have noticed that lot of android applications introduced a sliding panel menu to navigate between major modules of the application. Previously this kind of UI was done using some third party libraries where a list view and some swiping gestures used to achieve this. But now android itself officially introduced sliding panel menu by introducing a newer concept called Navigation Drawer.

Most of the time Sliding Menu (Navigation Drawer) will be hidden and can be shown by swiping the screen from left edge to right or tapping the app icon on the action bar.

You might have heard of android Material Design which was introduced in Android Lollipop version. In Material Design lot of new things were introduced like Material Theme, new widgets, custom shadows, vector drawables and custom animations. If you haven’t working on Material Design yet, this article will give you a good start.

For Icons you can download it from here. You will get all sizes of icon here, that you can use in your project.

Go through the below links which give you much knowledge over Material Design :

Example

In this tutorial, we are going to learn how to use navigation drawer to add a sliding menu to your application using material design.

VIDEO DEMO

Before starting you can go through my ToolBar Tutorial article for Color Schemes and styles for Material Design.

1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java).

2. Open your your AndroidManifest.xml file and set TargetSDK to 21 or 22 according to Lollipop and I had added two more activities because i am using three activities.

3. Open res ⇒ values ⇒ strings.xml and add below string values.

4. Open res ⇒ values ⇒ colors.xml and add the below color values. If you don’t find colors.xml, create a new resource file with the name.

5. Open res ⇒ values ⇒ dimens.xml and add below dimensions.

6. Open styles.xml under res ⇒ values and add below styles. The styles defined in this styles.xml are common to all the android versions.

7. Now under res, create a folder named values-v21. Inside values-v21, create another styles.xml with the below styles. These styles are specific to Android Lollipop only.

8. Now, create a layout naming toolbar.xml in this layout create a toolbar set background and theme to it and this layout we are going to use in our other layouts.

9. Android introduced a newer UI element called DrawerLayout for Navigation Drawer. Open your layout file (activity_main.xml) for main activity and type the following code.

Here FrameLayout is used to replace the main content using Fragments and it should be always the first child of the layout for z-index purpose.

10. For navigation items we have to create a custom view xml file that will inflate over ListView.

11. Now, for fragments that will shown on navigation item click we have to create fragments. So, we have to create xml according to number of menu items. This is one fragment xml file, similarly we can make many more.

12. Now, for all fragments we have to create separate class and add the following code to that class. This is for the one class file, Similarly we can create many more.

13. Create a class named Navigations_Items.java with the below code. This model class is POJO class that defines each row in navigation drawer menu.

14. Now, create an Adapter Class for inflating view over ListView.

15. Finally, add the following code to the MainActivity.java. In this activity we set DrawerLayout and set ActionBarDrawerToggle. On listview item click we set fragments over FrameLayout.

16. Finally, all done  –  run the app and you will get the output as shown in video.

Thanks. :)

Download Source Code – >

 

 

 

COMMENTS (1)
Reply

hello sir, how can i set title for menus in navigation drawer ?

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Name (required)
Email (required)