Make a Bottom Navigation Menu in Android Studio

in this tutorial, we're gonna see how to Make a Custom Bottom Navigation Menu in Android Studio and Kotlin.

First, you should add the design library dependency in your app Gradle file

implementation 'com.android.support:design:28.0.0'

now let's create our layout_main.xml file, we add the BottomNavigationView and a frame layout where we will display our fragments.

<?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=".MainActivity">

    <FrameLayout

        android:id="@+id/frameLayout"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        />

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

        android:id="@+id/BottomNavMenu"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        android:layout_margin="12dp"

        android:elevation="2dp"

        app:menu="@menu/bottom_menu"

        android:background="@drawable/bottomnav_bg"

        />

</androidx.constraintlayout.widget.ConstraintLayout>

now create a new drawable resource file to make the shape of the navigation menu, we will call it bottomnav_bg.xml

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle"

    >

    <solid android:color="#fff"/>

    <corners android:radius="80dp"/>

</shape>

now let's create the menu, go to res folder, right-click and select new > resource folder and choose menu > create the menu file and add this code

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

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:id="@+id/home"

        android:title="Home"

        android:icon="@drawable/ic_action_home"

        />

    <item

        android:id="@+id/favorite"

        android:title="Favorite"

        android:icon="@drawable/ic_action_fav"

        />

    <item

        android:id="@+id/profile"

        android:title="Profile"

        android:icon="@drawable/ic_action_profile"

        />

    <item

        android:id="@+id/settings"

        android:title="Settings"

        android:icon="@drawable/ic_action_settings"

        />

</menu>

now we will need to create the fragments, for this tutorial I made four fragments and each one contains some information.
to create a fragment in android studio

• right-click on your app folder > new > fragment> blank fragment 

a window will pop-up add the fragment name like bellow

Create four fragments and add your custom design, and then you can pass to your MainActivity.kt and
add this code

package tn.doctorcode.bottomnavigationmenu

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import android.widget.FrameLayout

import androidx.fragment.app.FragmentTransaction

import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {

    //Create our four fragments object

    lateinit var homeFragment: homeFragment

    lateinit var profileFragment: ProfileFragment

    lateinit var favFragment: FavFragment

    lateinit var settingsFragment: SettingsFragment

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        //now let's create our framelayout and bottomnav variables

        var bottomnav = findViewById<BottomNavigationView>(R.id.BottomNavMenu)

        var frame = findViewById<FrameLayout>(R.id.frameLayout)

        //Now let's the deffault Fragment

        homeFragment = homeFragment()

        supportFragmentManager

            .beginTransaction()

            .replace(R.id.frameLayout,homeFragment)

            .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)

            .commit()

        //now we will need to create our different fragemnts

        //Now let's add the menu evenet listener

        bottomnav.setOnNavigationItemSelectedListener { item ->

            //we will select each menu item and add an event when it's selected

            when(item.itemId){

                R.id.home -> {

                homeFragment = homeFragment()

                supportFragmentManager

                    .beginTransaction()

                    .replace(R.id.frameLayout,homeFragment)

                    .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)

                    .commit()

            }

                R.id.favorite -> {

                    favFragment = FavFragment()

                    supportFragmentManager

                        .beginTransaction()

                        .replace(R.id.frameLayout,favFragment)

                        .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)

                        .commit()

                }

                R.id.profile -> {

                    profileFragment = ProfileFragment()

                    supportFragmentManager

                        .beginTransaction()

                        .replace(R.id.frameLayout,profileFragment)

                        .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)

                        .commit()

                }

                R.id.settings -> {

                    settingsFragment = SettingsFragment()

                    supportFragmentManager

                        .beginTransaction()

                        .replace(R.id.frameLayout,settingsFragment)

                        .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)

                        .commit()

                }

            }

            true

        }

        //Now let's Run our App

    }

}

and that's it, you know now how to make a custom android bottom navigation menu