Introduction

In this lecture we will describe about how can create Navigation Drawer in Material Design.And also describe what is Navigation Drawer. why we can use it. After reading these lecture you will also able Understand Navigation drawer and also create Navigation Drawer of your application.

Prerequisite

If you not understand this lecture. Navigation Drawer in Material Design.You should also read my previous lectures How to Create Project – Material design And Toolbar in Android Material design .These lecture are interrelate of each other.

What is Navigation Drawer

Navigation Drawer a panel that displays the Navigation options on the left edge of the screen. It is hidden most of the time. But when the user swipes a finger from the left edge of the screen then appears.Navigation Drawer is available in every Google app always at left side. For more detail about how can design the Navigation Drawer please click Navigation Drawer in material design

Navigation Drawer in Material design

Implementation Section

In this lecture we will describe how can make a Navigation Drawer in material design I can divided into four step

  1.  I  will describe design guidelines
  2.  I will describe layout structure
  3. Integrating with toolbar
  4. Finishing step

First think add a navigation Drawer in layout. Navigation Drawer consists two parts First part that are show in every time and second part is outside the screen.When user click on it. then appears.It is always towards the left. Drawer Position is controlled by the Android:Layout_gravity to show child to exact position left or right.For Drawer Fragment. You need to add a new fragment class how can add detail is provide below here.

Now we create a new  class and layout in one step.

Step 1=<- create a new Class and Layout ><-Right click-><-Package name->Select <-New ->then you click on<-Fragment>and Select <-Blank fragment-> that are show in below pic.

Alt Tag Navigation Drawer in material design

Step2=Step1<-WriteName->Ok.

Alt Tag Navigation Drawer in material design assine name

Basic Layout XML

  • ADD a Drawer Layout with two child first is your main layout and second is your drawer layout.

First of all you will open Layout.XMl file add a android .Support.v4.widget.Drawer layout and  XMl code write inside  this library. And set height and width match parent.And second is drawer layout. Drawer layout is add at the end After closing tag of Relative layout.It consists of <fragment tag with different attributes> this is a second part that is outside the screen when user click on it. then appears.It is always towards the left.

After complete this step you will open a activity_main.XMl and write the following code

And Write the following code Fragement_navigation_Drawer layout. XML file

So you will find out the value folder expand this value folder and click on string .XML and add string resource. .Write the following code in string resource file.

  • Navigation Drawer Setps

  • ADD a Drawer Layout with two child first is your main layout and second is your drawer layout.
  • Initialize the drawer layout
  • Create a instance of DrawerBarDrawerToggle and specify the Activity Drawer layout object and open and close Activity
  • Invalidate the option menu when the drawer is open.

After that you will open NavigationDrawerFragement.java file file and write the following code

After that you will open MainActivity.java file file and write the following code

Run the Application

Alt Tag Navigation Drawer in material design output image

Run the application when you click on button left side at top of app bar.Then navigation drawer appears that is show in a below pic.

Alt Tag Navigation Drawer in material design output navigation


 

  • Navigation Drawer inside the App Bar

In this part we learn about can use Navigation Drawer inside inside the app Bar . So this is a work that will done this section.please read this lecture carefully all the detail is provides step by step.First of you create a new layout and how create a new layout detail is provide below here.

Layout XML

Now we create a new Layout.

Step 3=<- Create a new Layout name activity_appbar->Right click> the ->layout folder-> select ->New option-> and click ->layout resource folder->

Step4=Step3->WriteName->Ok.

Alt Tag navigation Drawer in material design

 And Write the following code activity_appbar layout. XML file

MainActiviy

After that you will open a MainActivity.java class file.And you are  add a new Layout into MainActivity.java class file that is set ContentView(layout.activity_main_appbar). After that you will see Navigation Drawer are show inside the app bar.This is a work that are to perform to show Navigation Drawer inside the app bar.

 Run the Application

Alt Tag navigation drawer inside the appbar


  • Navigation Drawer how change the color

In this part we learn about Navigation Drawer how can change .when the user swipes a finger from the left edge of the screen then Navigation Drawer appears not just appears but also change the color . So this is a work that will done this section.Please read this lecture carefully all the detail is provides step by step.Method that is used for change the color show below.This method is use when a drawer position change

Public abstract void onDrawerSlide (View drawerView , float SlideOffset)

Parameter

  • dawerView  The view that was moved.
  • offsetSlide  offset is describe the range (o,1) One means drawer is completely open and Zero means drawer is cloused.

After this setp you will open a NavigationDrawerFragement. java class file add this function onDrawerSlide inside the ActionBarDrawerToggle at the end of onDrawerClosed method.Write the following code

 Run the Application

Alt Tag Navigation Drawer in material design change color

Conclusion

In this lecture we learn about Navigation Drawer in Material Design. First we  were learn about how  can create a  Navigation Drawer.Then we  learn how can use Navigation drawer inside the app bar . Last we learn how can change color when you swipe at left side. I hope you will understand this lecture.Thank you for reading this lecture Hope you got the idea.