Material Design Component Navigation Rail in Android

Last Updated : 12 Dec, 2021

Material Design Components (MDC Android) offers designers and developers a way to implement Material Design in their Android applications. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android applications. Material design in Android is one of the key features that attracts and engages the customer towards the application. This is a special type of design, which is guided by Google. So in this article, it has been demonstrated how to use Navigation Rail in android. Have a look at the following image to get an overview of the discussion.

Create an empty activity project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Add Required Dependency

Include google material design components dependency in the build.gradle file. After adding the dependencies don’t forget to click on the “Sync Now” button present at the top right corner. Note that the Navigation Rail is introduced in the latest release of the material design components version that is 1.4.0 and above.

implementation ‘com.google.android.material:material:1.4.0’

Note that while syncing your project you need to be connected to the network and make sure that you are adding the dependency to the app-level Gradle file as shown below.

Why Navigation Rail?

Navigation rail provides movement between the primary screens or destination of the application. This basically is a side navigation component that displays a minimum of three to a maximum of seven destinations. Each destination has an associated icon and label. The navigation rail is used for larger screens like tablets and desktop screens.

When to Use Navigation Rail?

As it is said the Navigation Rail is only ideal for the larger screens, and when the application product has top-level destinations that are easily accessible and these destinations can be main destinations or the screens of the application product. Navigation Rail shouldn’t be used for the applications which are implemented for the smaller size screens and the application shouldn’t possess one or two top-level destinations, it should have a minimum of three and a maximum of seven destinations.

The Navigation Rail is placed on the left side of the screen for Left To Right (LTR) languages and right for Right To Left (RTL) languages.

Anatomy of the Navigation Rail

Anatomy of the Navigation Rail

Steps to implement Navigation Rail in Android

Step 1: Creating menu with icons for the Navigation Rail

The menu for Navigation Rail contains four sample items files, images, music, videos also associated icons for each label. To implement the same invoke the following code inside the navigation_rail_menu.xml file, under the menu folder.

XML

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/files"
        android:enabled="true"
        android:icon="@drawable/ic_folder"
        android:title="Files" />
    <item
        android:id="@+id/images"
        android:enabled="true"
        android:icon="@drawable/ic_image"
        android:title="Images" />
    <item
        android:id="@+id/music"
        android:enabled="true"
        android:icon="@drawable/ic_music"
        android:title="Music" />
    <item
        android:id="@+id/videos"
        android:enabled="true"
        android:icon="@drawable/ic_movie"
        android:title="Videos" />
</menu>

Step 2: Creating Floating Action Button layout for Navigation Rail

However, this is optional to include the floating action button for the navigation rail. To include the Floating Action Button we have to create a separate single view layout and it should only contain the Floating Action Button as root view, and also the Floating Action Button size should be auto. To implement the same invoke the following code inside the navigation_rail_fab.xml file, under the layout folder.

XML

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.floatingactionbutton.FloatingActionButton
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/nav_rail_fab"
    android:clipToPadding="false"
    app:fabSize="auto"
    app:srcCompat="@drawable/ic_add" />

Step 3: Working with activity_main.xml file

The main and only layout of the file contains the Navigation Rail and attaching the navigation_rail_menu.xml and navigation_rail_fab to it. To implement the same invoke the following code inside the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    tools:context=".MainActivity">
 
    <com.google.android.material.navigationrail.NavigationRailView
        android:id="@+id/navigationRail"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:headerLayout="@layout/navigation_rail_fab"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:menu="@menu/navigation_rail_menu" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Output UI:

Step 4: Working with MainActivity.kt file

In the MainActivity.kt file we need to handle the click listener for all the items in the Navigation Rail container. Upon clicking these items the simple toast message appears. To implement the same invoke the following code inside MainActivity.kt file.

Kotlin

import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.floatingactionbutton.FloatingActionButton
import com.google.android.material.navigationrail.NavigationRailView
 
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        val navRailFab: FloatingActionButton = findViewById(R.id.nav_rail_fab)
        navRailFab.setOnClickListener {
            Toast.makeText(this, "FAB Clicked!", Toast.LENGTH_SHORT).show()
        }
 
        val navigationRail: NavigationRailView = findViewById(R.id.navigationRail)
        navigationRail.setOnItemSelectedListener { menuItem ->
            when (menuItem.itemId) {
                R.id.files -> {
                    Toast.makeText(this, "Files", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.images -> {
                    Toast.makeText(this, "Images", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.music -> {
                    Toast.makeText(this, "Music", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.videos -> {
                    Toast.makeText(this, "Videos", Toast.LENGTH_SHORT).show()
                    true
                }
                else -> false
            }
        }
    }
}