Navigation Bar with Material Design 3

Bottom Navigation Bar is a material component that makes it easy to explore and switch between top-level views in a single tap.

By tapping on a bottom navigation icon you can directly jump to the associated view or refreshes the currently active view.

In this post we will create a bottom navigation with MDC 3

Steps

👉Create a New Project named Android App Coding Blog.

👉Create a menu named bottom_menu

Right click on app>New>Android Resource File

Change Resource type from “Values” to Menu and

1. File name “bottom_navigation_menu”

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

    <menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/page_1"
        android:enabled="true"
        android:icon="@drawable/activity_1"
        android:title="@string/activity_01"/>
    <item
        android:id="@+id/page_2"
        android:enabled="true"
        android:icon="@drawable/activity_2"
        android:title="@string/activity_02"/>
    <item
        android:id="@+id/page_3"
        android:enabled="true"
        android:icon="@drawable/home_24"
        android:title="home"/>
    <item
        android:id="@+id/page_4"
        android:enabled="true"
        android:icon="@drawable/settings_24"
        android:title="settingd"/>
    </menu>

👉activity_main.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=".MainAcitivity">
    <com.google.android.material.textview.MaterialTextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:textSize="24sp"
        android:text="@string/contents6"/>
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_navigation_menu" />


    </androidx.constraintlayout.widget.ConstraintLayout>

👉MainActivity.kt

package com.example.androidappcodingblog

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.material.bottomnavigation.BottomNavigationView

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

        val bt=findViewById<BottomNavigationView>(R.id.bottom_navigation)
        bt.setOnItemSelectedListener {item->
            when(item.itemId) {
                R.id.page_1->{
                    val intent= Intent(this,Activity1::class.java)
                    startActivity(intent)
                    return@setOnItemSelectedListener true}
                R.id.page_2->{
                    val intent=Intent(this,Activity2::class.java)
                    startActivity(intent)
                    return@setOnItemSelectedListener true
                }
            }
            return@setOnItemSelectedListener true
        }
    }
}