Use Bottom Navigation in kotlin with Android Studio.

Why do we need bottom navigation? Bar.

Kumar Shubhankar

2 min readMar 4, 2021

i. It allows the user to switch to different activities/fragments easily.

ii. It makes the user aware of the different screens available in the app.

iii. User is able to check which screen are they on at the moment.

Hi everyOne…

step 1: Create a new Android Studio project

I had created a new Project (BottomNavigation) in Android Studio.

Step 2: Adding a dependency to the build.gradle file.

we used the material design library.

dependencies { 
implementation 'com.google.android.material:material:1.3.0'

step 3: We will know about 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"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu"/>

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/nav_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation"/></androidx.constraintlayout.widget.ConstraintLayout>

We used a ConstraintLayout inside used the BottomNavigationView and fragment.

BottomNavigationView :

makes it easy for users to explore and switch between top-level views in a single tap. There should be a minimum of 3 top-level views and a maximum of 5. when the user wants to go user's fragment click on users view and users wants to go to the music library fragment click on music library.

Fragment:

This fragment, it’s using a mobile_navigation file.

mobile_navigation:

<?xml version="1.0" encoding="utf-8"?>
<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/mobile_navigation"
    app:startDestination="@+id/navigation_home">

    <fragment
        android:id="@+id/navigation_home"
        android:name="com.example.bottomnavigation.ui.home.HomeFragment"
        android:label="@string/title_user"
        tools:layout="@layout/fragment_home" />

    <fragment
        android:id="@+id/navigation_dashboard"
        android:name="com.example.bottomnavigation.ui.dashboard.DashboardFragment"
        android:label="@string/title_music"
        tools:layout="@layout/fragment_dashboard" />

    <fragment
        android:id="@+id/navigation_notifications"
        android:name="com.example.bottomnavigation.ui.notifications.NotificationsFragment"
        android:label="@string/title_notifications"
        tools:layout="@layout/fragment_notifications

We used mobile_navigation one screen on the show the three fragments like(home, music library, and notification). This mobile_navigation file it’s collects a different fragment and shows the one activity.

bottom_nav_menu.xml :

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

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/person"
        android:title="@string/title_user"/>

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/library_music"
        android:title="@string/title_music"/>

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications"/>

</menu>