Last Updated:

Navigation Drawer in Android with Example

In this tutorial we will implement in a simple application on Android. Let's consider the features and methods of implementing this component. Navigation Drawer

Short review Android Navigation Drawer

Navigation Drawer is a menu that leaves the left or right of the screen on the user's swipe (smooth swipe). This is one of the most user-friendly and popular components of the user interface in Android. Its convenience lies in the fact that it does not occupy a permanent place on the screen, can accommodate a large amount of information and users are accustomed to using it.

To call the Navigation Drawer component, you need to click on the icon in the ActionBar or swipe to the left or right of the screen. By clicking on the Drawer Layout element, you can invoke various components of the interface like a regular menu.

 

In this article, we implement Navigation Drawer using the Drawer Layout API from the Android Support Library.

Creation of Android Navigation Drawer. Practice

In our application, we will use three fragments that will be invoked by clicking on the elements of the Navigation Drawer component. The adapter will be responsible for managing the items and the host will be MainActivity.

To implement Navigation Drawer, we'll need a class as the root layout element of the activity_main.xml, which will contain the Toolbar component and a FrameLayout container for the Fragment components. The list of menu items in will represent the ListView:android.support.v4.widget.DrawerLayoutLinearLayout

With the tag, we included the . Define the layout itself in the folder res/layout/toolbar.xml:includeToolbar

Importantly! Since we use , then in the file styles.xml it is necessary to specify the parent theme, otherwise the application will "fall" with an error:ToolbarTheme.AppCompat.Light.NoActionBar

Now let's define a layout for item_row.xml, a single element in the NavigationDrawer:ListView

As you can see, it is very simple and contains only 2 widgets: to display the name of the item and to display the icon.TextViewImageView

The item names themselves are defined in the strings file.xml using the :string-array

Now let's define the data model class that the adapter will use to display in the ListView:

Let's imagine the adapter class below:

Now let's write the fragment classes that will appear on the screen after clicking on the menu items in navigation Drawer:

And the layout fragment_email.xml to it:

The classes and layouts of the slices are almost identical except for the names, so simply create 2 more of the same slices:

  • The class and its layout fragment_info.xmlInfoFragment
  • The class and its layout fragment_map.xmlMapFragment

The listing of the MainActivity class is as follows:

A complete listing of the strings.xml file is shown below:

The AndroidManifest.xml file remains unchanged.

Now we have to synchronize the project using Gradle and run it on the device:

Download the project "Example of creating a Navigation Drawer in Android".

Follow the updates of the Android section and subscribe to the updates of the site.