Coders In C

follow me on IG : https://www.instagram.com/_rajjani/

How to use Material design BottomNavigationView in Android Application

hey, readers in this tutorial i will show you in easy and simple steps to implement BottomNavigationView in your android application. i have written code in Kotlin but you have to follow same steps for Java as well.

For adding material design library, we need to add dependency to our gradle file.  I will add all link in the description. Copy this code and paste into gradle file and sync the project.

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

You will find All links here : https://material.io/develop/android/components/bottom-navigation/

After Project successfully synced, now to use material component into our project we need to use material theme. Open style.xml file and change this parent theme to any material component theme. I am using

Theme.MaterialComponents.Light.Bridge

Now add this navigation layout to our activity xml file.

<com.google.android.material.bottomnavigation.BottomNavigationView

    android:id="@+id/bottom_navigation"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    app:layout_constraintBottom_toBottomOf="parent"

    app:menu="@menu/bottom_navigation"
/>

For menu items you will need menu resource file i have created bottom_navigation.xml file. you have to create your own menu res file.

bottom_navigation.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_home"
        android:icon="@drawable/home"
        android:title="Home" />
    <item
        android:id="@+id/menu_notification"
        android:icon="@drawable/notifications"
        android:title="Notifications" />
    <item
        android:id="@+id/menu_events"
        android:icon="@drawable/event"
        android:title="Events" />
    <item
        android:id="@+id/menu_chat"
        android:icon="@drawable/chat"
        android:title="Chats" />
</menu>

To implement Click on menu items you have to add setOnNavigationItemSelectedListener to your bottom_navigation layout. here is the code for Bottom Menu item click

bottom_navigation.setOnNavigationItemSelectedListener {

    when (it.itemId) {
        R.id.menu_home -> {
            result.text = "Home"
            true
        }
        R.id.menu_notification -> {
            result.text = "Notifications"
            true
        }
        R.id.menu_events -> {
            result.text = "Events"
            true
        }
        R.id.menu_chat -> {
            result.text = "Chat"
            true
        }

        else -> { false }
    }
}

That is it, run the code and enjoy 🙂