Navigation drawer in Android part 1: How to create a navigation drawer

Intro

This post is the first part of three posts series. In this post we will create a navigation drawer in an android project using Views instead of Fragments. In the second part we will see how to add a toggle button on the navigation drawer and add listeners for that button, and in the third part we will see a simple way to add a drop-down items on a navigation drawer without using ExpandableListView.

The navigation drawer is a UI panel that shows your app’s main navigation menu. The drawer appears when the user touches the drawer icon  in the app bar or when the user swipes a finger from the left edge of the screen.

The Exercise

First we are going to create a new project in Android Studio. I will name the project Navigation Drawer Exercise, but you can use whatever name you find suiting. In this project I will be using ButterKife Library, if you have not used it before, you can find instructions here. Also we will have to add the android design library in order to create the navigation drawer. In your app/build.gradle file add the dependency “implementation ‘com.android.support:design:28.0.0′”.

We will create an empty activity named HomeActivity.  When created the layout of this activity will look like this:

 

To add a navigation drawer, we must replace the root layout Constraint Layout with Drawer Layout. The xml code will look like this. We are adding a Frame Layout that we will be using to add different views on the home screen. The color attributes are optional and they depend on your desire.

Next you have to create a new Android Resource Directory of type menu. To do this you need to do a right click on the res folder in project view on android studio and select new – Android Resource File.

Then change the resource type of the file to menu and name it accordingly:

Inside the menu xml file create the menu items that  you will need. We will create three menu items: Home, Profile and Logout. A menu item should have three parts: id, title and icon.

To create icons for the menu items you need to right click on the drawable folder in android studio project view, then click New – Vector Asset.

After that click on the Clip Art icon and select your desired icon, click OK, then next and finish.

Next we need to create a custom toolbar and include it in the home activity’s layout and a custom header for the navigation drawer. Also you will need to change the style of home activity, to select a different no-toolbar theme, so that your custom theme will be shown. First let’s create the toolbar, right click on the layout folder and select New- Create new layout resource file.

In the toolbar we will create a TextView that will hold the toolbar title later on. The xml code for the toolbar will look like this:

After that we need to change the style of the activity, so we open the AndroidManifest file and we change android: theme to android:theme=”@style/Theme.AppCompat.Light.NoActionBar”

After that in the activity_home.xml we will create an AppBar layout and a toolbar and include the toolbar layout we created before. The xml code for the home activity will now look like this:

Now let’s create the header for the navigation drawer. We follow the same instructions for creating the toolbar. Right click on the layout folder and select New- Create new layout resource file. I will name the xml file header. In the header we will add just a TextView as a title and we will change the background color, but you can add whatever you need, profile picture, other elements, etc. The code for this layout file will look like this:

We will add the header.xml in the NavigationView element in activity_home.xml, like this:

Now that our layout is done we move in the HomeActivity.java. We will be using ButterKnife to bind the layout files, and first we declare our variables and bind our layout elements :

Then we will create a method that we will call setupUi() where we will do exactly what the name says, set up the UI. This method we will call in the onCreate().

You will notice that R.string.open and R.string.open are turning red. You will need to create this strings. In the res/values folder in the strings.xml file we will add two more strings

If you run the app now, you will notice that you can open the navigation drawer by swiping, but the burger button on the toolbar does nothing. To give this button functionality we will need to override another method in home activity:

Now run the app again and the burger button does his job of opening the drawer menu.

Now you will see how to use View instead of Fragment. You can read more about that here.  We will create another Java class named Profile. Right click on the package name and select New – Java Class.

After this we will crate a new layout resource file named view_profile.xml. You already know this, right click on the layout folder and select New- Create new layout resource file. In this layout file we will just add one TextView that will display the text “This is profile page”. It will look like this:

Now in the Profile class we will add code to bind this view in the class. First we will extend this class with the ConstraintLayout class, than we will create a constructor with context as parameter, and call super in the constructor. We will create a method named init() where we will inflate the view_profile layout. It will look like this:

Now we will go back in the HomeActivity class and we will set the code to get a functional navigation drawer. We will create two new methods setupNavigationView() and switchScreen(int id). First in the switchScreen(int id) method we will create a switch where we will go through all of the menu items in the navigation drawer and add functionality they will perform when clicked. In our case when we click on “Home” we want to start the home activity, when clicked on “Profile” we want to add the profile view, and when clicked on “Logout we want to leave the app. This method will look like this:

In the other method, setupNavigationView() we will add a listener so that we will know when a menu item is selected and we will call the switchScreen(id) method on click. We will call this method in the setupUi method.

We can also make home as a view instead of activity, but it was good to see how to start an activity from the navigation drawer. This is our final result:

You can get the whole project here : https://github.com/AleksandarGulevski/NavigationDrawerExercise

See you in part two. Happy coding!