In last week post, I mentioned that I worked with navigation drawer and in this week post I will talk about navigation drawer and we will work out a simple example on how to implement a navigation drawer in your app.
According to Android Developers website “The navigation drawer is a UI panel that shows your app’s main navigation menu. It is hidden when not in use, but appears when the user swipes a finger from the left edge of the screen or, when at the top level of the app, the user touches the drawer icon in the app bar. ”
So what’s that means?
You most likely came across an app that uses navigation drawer before, such as Mishwar, Telegram, Gmail and lots of other apps, you just swipe from the left edge of your screen and your app navigation drawer will appear just like opening a drawer hence comes the name. When the drawer opens you will find a navigation menu items that allow you to navigate to different destinations in your app by just click on one of items. When you reach your destination you can choose to close the navigation drawer as we will see in our example. You can also add a button in the action bar at the top of the app and use it to open the navigation drawer.
As Linus Torvalds once said “Talk is cheap. Show me the code”. So I will jump right in the code.
We will build a simple app with only one activity containing a navigation drawer with a couple of menu items. The activity has a text and whenever we click on one of the navigation drawer menu items the text will change accordingly.
I will use Android Studio 3.0.1 in this example. The min SDK was 15 and targeted SDK was 27.
As usual open a new project and make sure you check include kotlin support option and choose empty activity.
At the time of writing this post I used the following dependencies:
implementation 'com.android.support:appcompat-v7:27.1.1' implementation 'com.android.support:design:27.1.1'
Now you should sync your project.
Now you need to add the navigation drawer to the app layout, so first you need to change the root view to be DrawerLayout and inside the DrawerLayout you can add a layout for the main content of the activity UI, which mean what appears in the screen when the navigation drawer is hidden, and also you need to add another view for the navigation drawer contents, as shown below:
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.narbase.navigationdrawerexample.MainActivity"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/navigationDrawerItemText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:textSize="30sp" tools:text="Test Text" /> </RelativeLayout> <android.support.design.widget.NavigationView android:id="@+id/navigationDrawer" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" /> </android.support.v4.widget.DrawerLayout>
From the layout above in the NavigationView we set the layout gravity to start to support right to left (RTL) language.
Now its time to specify the menu items for our navigation drawer. To do that you need to specify a menu resource in the layout using app:menu as shown below:
<android.support.design.widget.NavigationView
android:id="@+id/navigationDrawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="@menu/drawer_view"/>
Now we need to create the menu resource that contains the menu items itself. In res/menu file we create the file drawer_view.xml as shown below:
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/appleItem" android:title="@string/apple" /> <item android:id="@+id/orangeItem" android:title="@string/orange" /> <item android:id="@+id/bananaItem" android:title="@string/banana" /> </menu>
In res/values/strings.xml we add the following:
<string name="apple">Apple</string> <string name="orange">Orange</string> <string name="banana">Banana</string>
In MainActivity we will set a listener for the item click so when you click on an item (checked by item id) a certain action happens, in our case, it will display the title of the menu item in the text view in the screen and after that, the navigation drawer is closed. All that shown in the code below:
package com.narbase.navigationdrawerexample import android.support.v7.app.AppCompatActivity import android.os.Bundle import kotlinx.android.synthetic.main.activity_main.* class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) navigationDrawer.setNavigationItemSelectedListener { menuItem -> when (menuItem.itemId) { R.id.appleItem -> navigationDrawerItemText.text = menuItem.title R.id.orangeItem -> navigationDrawerItemText.text = menuItem.title R.id.bananaItem -> navigationDrawerItemText.text = menuItem.title } drawerLayout.closeDrawers() true } } }
Just like that navigation drawer is set and ready and the output will look something like the following:
You will find this week example on Github.
I hope you benefit from this week post, and there are more about navigation drawer and I encourage you to check the Android Developers website and Material Design website for more details about navigation drawer.
If you have any questions, thoughts or feedback please lets us know at the comments. But for now, that’s it for this week.
Till next week.
