Navigation Rail with Material Design 3

The Navigation rail acts as a side navigation component or sidebar and can hold from three, up to seven destination views. Each view consists of an icon and a respective label.

Navigation rails provide access to primary destinations in apps when using tablet and desktop screens.

This component works best on larger screens and can be swapped with a navigation bar on smaller screens.

It makes easy for users to explore and switch between top-level views in a single tap. 

It should be placed at the side edge of large screen devices such as tablets, when an application has three to seven top-level destinations.

Menu

The bar contents can be populated by specifying a menu resource file.

You can add menu by using app:menu attribute.

Each menu item title, icon and enabled state will be used for displaying navigation rail bar items. 

Menu items can also be used for programmatically selecting which destination is currently active. 

Header

A header view can be added with the app:headerLayout attribute.

Color

You can use dynamic color which was added in Android 12, enables users to personalize their devices to align tonally with the color scheme of their personal wallpaper or through a selected color in the wallpaper picker. Here we use dynamic color for Main Activity using

DynamicColors.applyToActivityIfAvailable(this)

Steps

Create a New Project

XML Layout

            navigation_rail.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"
    tools:context=".NavigationRail">

    <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"
        style="@style/Widget.Material3.NavigationRailView.ActiveIndicator"
        app:layout_constraintTop_toTopOf="parent"
        app:menu="@menu/navigation_rail_menu" />


    </androidx.constraintlayout.widget.ConstraintLayout>

        Header

Create a XML layout named as navigation_rail_fab

for Header I use FAB in header by

Right Click on res > New >XML > Layout XML File

        layout/navigation_rail_fab.xml

        <?xml version="1.0" encoding="utf-8"?>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_rail_fab"
    android:clipToPadding="false"
    app:fabSize="auto"
    android:contentDescription="@string/todo"
    android:backgroundTint="@color/material_dynamic_primary90"
    app:srcCompat="@drawable/add_24"/>

            Menu

Create a menu named as navigation_rail_menu 

by Right Click on res > New > Android Resource File

a pop up window New Resource File will open

File name : navigation_rail_menu

Resource type : Menu

            
    navigation_rail_menu.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/folder_open_24"
        android:title="files" />
    <item
        android:id="@+id/images"
        android:enabled="true"
        android:icon="@drawable/image_24"
        android:title="images" />
    <item
        android:id="@+id/music"
        android:enabled="true"
        android:icon="@drawable/music_note_24"
        android:title="music" />
    <item
        android:id="@+id/videos"
        android:enabled="true"
        android:icon="@drawable/movie_24"
        android:title="videos" />

</menu>

        NavigationRail.kt

        NavigationRail.kt

    package com.example.androidappcodingblog

    import android.annotation.SuppressLint
    import androidx.appcompat.app.AppCompatActivity
    import android.os.Bundle
    import android.widget.Toast
    import com.google.android.material.badge.BadgeDrawable
    import com.google.android.material.color.DynamicColors
    import com.google.android.material.floatingactionbutton.FloatingActionButton
    import com.google.android.material.navigationrail.NavigationRailView

    class NavigationRail : AppCompatActivity() {
    @SuppressLint("MissingInflatedId", "CutPasteId")
    override fun onCreate(savedInstanceState: Bundle?) {

        //for dynamic colors for this activity only
        DynamicColors.applyToActivityIfAvailable(this)
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_navigation_rail)

        val nav = findViewById<FloatingActionButton>(R.id.nav_rail_fab)
        nav.setOnClickListener {
            Toast.makeText(this, "FAB Clicked!", Toast.LENGTH_SHORT).show()
        }
 
        val navrail=findViewById<NavigationRailView>(R.id.navigationRail)
     

       navrail.setOnClickListener{ menuItem ->
            when (menuItem.id) {
                R.id.files -> {
                    Toast.makeText(this, "Files", Toast.LENGTH_SHORT).show()

                }
                R.id.images -> {
                    Toast.makeText(this, "Images", Toast.LENGTH_SHORT).show()
                }
                R.id.music -> {
                    Toast.makeText(this, "Music", Toast.LENGTH_SHORT).show()
                }
                R.id.videos -> {
                    Toast.makeText(this, "Videos", Toast.LENGTH_SHORT).show()
                }
            }
        }
    }
}

        OUTPUT

Thanks for reading!😊😊😊😊😊😊

If you enjoyed reading , Show some Love by

clapping 👏 on this post!