Navigation Rail View | Android Studio | Kotlin

Navigation Rail View

In this comprehensive tutorial, we delve into the use of the NavigationRailView, a versatile component introduced in Android’s Material Design library. Ideal for larger screen devices like tablets and foldables, NavigationRailView offers an efficient way to implement vertical navigation alongside your app's content.

We’ll guide you through setting up the NavigationRailView in Android Studio using Java, discussing how it enhances user experience by organizing key navigation options in a sleek and modern vertical layout. Whether you're transitioning from BottomNavigationView or building an app designed for a wide-screen format, this tutorial will help you understand how to integrate NavigationRailView effectively.

1. What is Navigation RailView 
2. Implement Navigation RailView 
3. Handle Navigation RailView Item Selection 
4. Show the Label of a selected menu item 
5. Show the Labels of all menu items 
6. Click the Menu button to toggle the Label Visibility

>>Check For Java

Code

nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/action_dashboard"
        android:icon="@drawable/home_black"
        android:title="Dashboard" />

    <item
        android:id="@+id/action_favorites"
        android:icon="@drawable/favorite_black"
        android:title="Favorites" />

    <item
        android:id="@+id/action_chats"
        android:icon="@drawable/chat_black"
        android:title="Chats" />

    <item
        android:id="@+id/action_account"
        android:icon="@drawable/person_black"
        android:title="Account" />

</menu>

nav_header.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!--ImageButton: Show/Hide menu items labels-->
    <ImageButton
        android:id="@+id/menuBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:padding="10dp"
        android:src="@drawable/menu" />

</RelativeLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f2f2f2"
    tools:context=".MainActivity">

    <!--NavigationRailView: Show menu items and header-->
    <com.google.android.material.navigationrail.NavigationRailView
        android:id="@+id/navigationRailView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:headerLayout="@layout/nav_header"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/nav_menu" />


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_toEndOf="@id/navigationRailView">

        <!--TextView: Show the title based on selected menu item-->
        <TextView
            android:id="@+id/selectionTv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Dashboard" />

    </RelativeLayout>

</RelativeLayout>

MainActivity.kt

package com.technifysoft.navigationrailview

import android.os.Bundle
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.navigationrail.NavigationRailView

class MainActivity : AppCompatActivity() {

    private lateinit var navigationRailView: NavigationRailView
    private lateinit var selectionTv: TextView

    // Flag to track the current navigation rail state
    private var isExpanded = false

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Initialize the NavigationRailView
        navigationRailView = findViewById(R.id.navigationRailView)
        // Initialize the TextView to display the selected menu item
        selectionTv = findViewById(R.id.selectionTv)

        // Set the initial state of the navigation rail
        updateNavigationRailState()

        //Handle navigation item clicks
        navigationRailView.setOnItemSelectedListener { item ->
            //get the item id that is selected by user
            val itemId = item.itemId
            when (itemId) {
                R.id.action_dashboard -> {
                    // Handle Dashboard item click, e.g., show a fragment, open a new activity, etc.
                    Toast.makeText(this@MainActivity, "Dashboard", Toast.LENGTH_SHORT).show()

                    selectionTv.text = "Dashboard"
                }

                R.id.action_favorites -> {
                    // Handle Favorites item click, e.g., show a fragment, open a new activity, etc.
                    Toast.makeText(this@MainActivity, "Favorites", Toast.LENGTH_SHORT).show()

                    selectionTv.text = "Favorites"
                }

                R.id.action_chats -> {
                    // Handle Chats item click, e.g., show a fragment, open a new activity, etc.
                    Toast.makeText(this@MainActivity, "Chats", Toast.LENGTH_SHORT).show()

                    selectionTv.text = "Chats"
                }

                R.id.action_account -> {
                    // Handle Account item click, e.g., show a fragment, open a new activity, etc.
                    Toast.makeText(this@MainActivity, "Account", Toast.LENGTH_SHORT).show()

                    selectionTv.text = "Account"
                }
            }

            // Return true to indicate that the item has been selected
            true
        }

        //Default selected item
        navigationRailView.selectedItemId = R.id.action_dashboard

        // Handle the menuBtn click event
        navigationRailView.headerView?.findViewById<View>(R.id.menuBtn)?.setOnClickListener {
            // Toggle the navigation rail state
            isExpanded = !isExpanded
            updateNavigationRailState()
        }

    }

    private fun updateNavigationRailState() {
        if (isExpanded) {
            // Expand: Show icons and labels
            navigationRailView.labelVisibilityMode = NavigationRailView.LABEL_VISIBILITY_LABELED
            navigationRailView.layoutParams.width = ViewGroup.LayoutParams.WRAP_CONTENT
        } else {
            // Collapse: Show only icons
            navigationRailView.labelVisibilityMode = NavigationRailView.LABEL_VISIBILITY_UNLABELED
            navigationRailView.layoutParams.width = 120
        }
    }
}

Output: