Navigation Rail View | Android Studio | Java

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 Kotlin

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.java

package com.technifysoft.navigationrailview;

import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import com.google.android.material.navigation.NavigationBarView;
import com.google.android.material.navigationrail.NavigationRailView;

public class MainActivity extends AppCompatActivity {

    private NavigationRailView navigationRailView;
    private TextView selectionTv;

    private boolean isExpanded = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        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);

        updateNavigationRailState();

        //Handle navigation item clicks
        navigationRailView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                int itemId = item.getItemId();
                if (itemId == R.id.action_dashboard) {
                    // Handle Dashboard item click, e.g., show a fragment, open a new activity, etc.

                    Toast.makeText(MainActivity.this, "Dashboard", Toast.LENGTH_SHORT).show();

                    selectionTv.setText("Dashboard");
                } else if (itemId == R.id.action_favorites) {
                    // Handle Favorites item click, e.g., show a fragment, open a new activity, etc.

                    Toast.makeText(MainActivity.this, "Favorites", Toast.LENGTH_SHORT).show();

                    selectionTv.setText("Favorites");
                } else if (itemId == R.id.action_chats) {
                    // Handle Chats item click, e.g., show a fragment, open a new activity, etc.

                    Toast.makeText(MainActivity.this, "Chats", Toast.LENGTH_SHORT).show();

                    selectionTv.setText("Chats");
                } else if (itemId == R.id.action_account) {
                    // Handle Account item click, e.g., show a fragment, open a new activity, etc.

                    Toast.makeText(MainActivity.this, "Account", Toast.LENGTH_SHORT).show();

                    selectionTv.setText("Account");
                }
                // Return true to indicate that the item has been selected
                return true;
            }
        });

        //Default selected item
        navigationRailView.setSelectedItemId(R.id.action_dashboard);

        // Handle the menuBtn click event
        navigationRailView.getHeaderView().findViewById(R.id.menuBtn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Toggle the navigation rail state
                isExpanded = !isExpanded;
                updateNavigationRailState();
            }
        });
    }

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

Output: