Complete Bottom Navigation View in Android Studio using Navigation Components

Prerequisites

1. Basics of Kotlin
2. Basics of Android
3. Basics of Navigation Component

Create a Project

To start, create a new Android project within Android Studio, selecting an appropriate name and package for your project. Since this tutorial is centered around Kotlin, ensure Kotlin is selected as the programming language during project creation.

Create Fragments

The subsequent step involves crafting fragments that serve as the destinations for navigation within the bottom navigation view. Each fragment should represent a distinct section or feature of your application. For this project, we’ll create four fragments — Home, Appointment, Support, and Profile.

Create Navigation Graph

Utilize the Navigation component in Android to graphically represent the navigation paths within your application. Begin by creating a navigation graph file, typically named nav_graph.xml, to delineate the navigation paths between your fragments.

To create the navigation graph:

1. Right-click on the res folder.
2. Select “New Android Resource Directory.”
3. Choose “Navigation” as the resource type and click “OK.”

A new directory will be created within res/navigation. Proceed to create the resource graph within this directory:

1. Right-click on the navigation directory.
2. Select “New Navigation Resource File.”
3. Provide a suitable name and click “OK.”

Add all the fragments to the navigation graph, either via the design view or by directly editing the XML. Your nav_graph.xml file should resemble the following structure:

<navigation 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/navigation_graph_home"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.healthok.ui.home.HomeFragment"
        android:label="Home"
        tools:layout="@layout/fragment_home" />
        
    <!-- Additional fragments for Appointment, Support, and Profile -->
    
</navigation>

Adding Nav Host to Main Activity

In the layout XML file of your main activity, add a NavHostFragment. This fragment serves as a container for the navigation graph, facilitating fragment transactions based on navigation actions. If you are unable to write it use this code make sure to change my nav graph with your newly created nav graph in previous step.

<androidx.fragment.app.FragmentContainerView
        android:id="@+id/main_activity_nav_host"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@+id/bottom_nav_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/navigation_graph_main" />

Create Vector Asset/Icon

Let’s create vector assets or icons for our navigations items.

To create icons follow these steps:

1. Right-click on the drawable folder.
2. Select “New”
3. Choose “Vector Asset” from list
4. Click on clip art and add the preferred icon
5. Change the name of icon
6. Choose appropriate color of icon
7. Click next
8. Click finish

Follow these steps and create icons. Each fragment icon should be of two color i.e active and inactive so in my case total number of icons will be 8 as 4 of active with color as green and 4 as inactive with color as grey

Get Mohamad Vahid Soudagar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

After creating icons now we will make selector for the icons.

Create Selector for Background Icons

To provide visual feedback when an item in the bottom navigation is selected, you can create a selector XML file. This file defines different states (e.g., selected, pressed) and the corresponding background drawable for each state

To create the selector follow these steps:

1. Right-click on the drawable folder.
2. Select “Drawable Resource File.”
3. Give file name as “selector_home” as we will use this selector for home icon

A new file is create in res/drawable selector_home.xml open the file and use this code block in it

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/icon_home_active" android:state_checked="true"/>
    <item android:drawable="@drawable/icon_home_inactive" android:state_checked="false"/>
</selector>

make sure to change my icon name with your icon names and create 1 selector file for every fragment.

Create a menu resource

Create a menu resource file (usually named bottom_nav_menu.xml) to define the items that will appear in the bottom navigation bar. Each item corresponds to a fragment in the navigation graph.

To create the menu file follow these steps:

1. Right-click on the res folder.
2. Select “New Android Resource Directory.”
3. Choose “Menu” as the resource type and click “OK.”

A new directory will be created within res/menu. Proceed to create the resource graph within this directory:

1. Right-click on the menu directory.
2. Select “New Menu Resource File.”
3. Provide a suitable name and click “OK.”

Now in the newly created menu file in my case its name is bottom_navigation_menu.xml add these code block in that make sure to replace title with your fragment title, and background with your selector

Note: Id of the item will be same as id of the fragment added in the nav_graph (read step)

menu file will look something like this

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:title="Home"
        android:id="@+id/homeFragment"
        android:icon="@drawable/selector_home"/>

    <item
        android:title="Appointment"
        android:id="@+id/appointmentFragment"
        android:icon="@drawable/selector_appointment"/>
  
<!-- item for other fragments -->

</menu>

after adding items to the menu go to the activity_main.xml add..

Add Bottom Navigation to Main Activity

Include a BottomNavigationView in your main activity’s layout XML file. This view will serve as the bottom navigation bar for your app. make sure to change app:menu with your menu file.

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_view"
        style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_navigation_menu"
        android:background="?android:attr/windowBackground"
        app:itemRippleColor="@color/riple_color"
        app:itemTextColor="@color/primary"/>

after adding this your main_activity.xml file will look like this

<?xml version="1.0" encoding="utf-8"?>
<!-- Root layout element, ConstraintLayout -->
<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=".ui.activities.MainActivity">

    <!-- NavHostFragment responsible for hosting the navigation graph -->
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/main_activity_nav_host"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:defaultNavHost="true" <!-- Indicates this FragmentContainerView as the default NavHost -->
        app:layout_constraintBottom_toTopOf="@+id/bottom_nav_view" <!-- Constraint to the top of the BottomNavigationView -->
        app:layout_constraintEnd_toEndOf="parent" <!-- Constraint to the end of the parent -->
        app:layout_constraintHorizontal_bias="0.5" <!-- Horizontal bias -->
        app:layout_constraintStart_toStartOf="parent" <!-- Constraint to the start of the parent -->
        app:layout_constraintTop_toTopOf="parent" <!-- Constraint to the top of the parent -->
        app:navGraph="@navigation/navigation_graph_home" /> <!-- Navigation graph to be inflated -->

    <!-- BottomNavigationView for navigation -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_view"
        style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent" <!-- Constraint to the bottom of the parent -->
        app:menu="@menu/bottom_navigation_menu" <!-- Menu resource for navigation items -->
        android:background="?android:attr/windowBackground" <!-- Background color -->
        app:itemRippleColor="@color/riple_color" <!-- Ripple color for navigation items -->
        app:itemTextColor="@color/primary"/> <!-- Text color for navigation items -->
</androidx.constraintlayout.widget.ConstraintLayout>

Now go to the main activity and write this code

// MainActivity class declaration, inherits from AppCompatActivity
class MainActivity : AppCompatActivity() {

    // Late-initialized variables for binding and navigation controller
    private lateinit var binding: ActivityMainBinding
    private lateinit var navController: NavController

    // onCreate method override
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Inflate the layout using view binding
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // Find the NavHostFragment and get its NavController
        val navHostFragment = supportFragmentManager
            .findFragmentById(R.id.main_activity_nav_host) as NavHostFragment
        navController = navHostFragment.navController

        // Get reference to the BottomNavigationView from the layout
        val navView: BottomNavigationView = binding.bottomNavView

        // Set item icon tint list to null (optional, to disable default icon tinting)
        navView.itemIconTintList = null

        // Set up the BottomNavigationView with the NavController for navigation
        navView.setupWithNavController(navController)
    }
}

an at last click on run and enjoy !!