Distance covered after last breakpoint with at most K cost

Bottom Navigation Bar in Android Using Kotlin

Last Updated : 13 Dec, 2022

We all have come across apps that have a Bottom Navigation Bar. Some popular examples include Instagram, WhatsApp, etc. In this article, we will learn about bottom navigation using Fragments. We will learn it by making a project in android studio. Here we will be using Kotlin as the language for development.

To implement it in Java please refer to: Bottom Navigation Bar in Android using Java

Why do we need a Bottom Navigation Bar?

It allows the user to navigate to different activities/fragments easily.
It makes the user aware of the different screens available in the app.
The user is able to check which screen are they on at the moment.

The following is an anatomy diagram for the Bottom Navigation Bar:

anatomy diagram for the Bottom Navigation Bar

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to Create a new project in android studio in kotlin.

Step 2: Add a vector asset in the drawable to use as an icon for the menu

To add a vector asset go to: app > res > drawable > new( right-click) > vector asset

Step 3: Working with the nav_menu.xml file

Create a menu directory and then add a new resource file in the menu for the popup menu. To create a menu in Android Studio please refer to here. Here we need to add the item that we need to show in the menu. We need to specify there’s id, icon reference, and title. Here is the code for nav_menu.xml

XML

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_home_24"
        android:title="Home"  />
    <item
        android:id="@+id/message"
        android:icon="@drawable/ic_baseline_message_24"
        android:title="Message" />
    <item
        android:id="@+id/settings"
        android:icon="@drawable/ic_settings_24"
        android:title="Setting" />
</menu>

Step 4: For each menu, we need to create a fragment. As there are 3 menus so we need to create 3 fragments. To create a fragment in Android Studio please refer to How to Create a New Fragment in Android Studio. So three of our fragments are:

Home Fragment
Menu Fragment
Settings Fragment

Here as of now for keeping it simple, We would not change anything in the fragment’s Kotlin file. But to differentiate their’s UI we will change the XML file.

XML file for the Home fragment:

XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeFragment">
 
    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Home fragment" />
 
</FrameLayout>

XML file for the Chat fragment:

XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ChatFragment">
 
    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Message fragment" />
 
</FrameLayout>

XML file for the Setting fragment:

XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SettingFragment">
 
    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Setting fragment" />
 
</FrameLayout>

Step 5: Working with the MainActivity.kt file and activity_main.xml.

this layout file will have a BottomNavigationview component in the bottom part and the top part Would be Covered By Framelayout which will be Replaced By Fragment at Runtime.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:background="#ffffff"
    tools:context=".MainActivity">
 
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomNav"
        />
 
 
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/nav_menu"
        android:scrollIndicators="left"/>
</RelativeLayout>

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file.

Kotlin

package com.ayush.popupmenu
 
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.widget.ImageView
import android.widget.PopupMenu
import android.widget.Toast
import androidx.fragment.app.Fragment
import com.google.android.material.bottomnavigation.BottomNavigationView
import java.lang.Exception
 
class MainActivity : AppCompatActivity() {
 
    lateinit var bottomNav : BottomNavigationView
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        loadFragment(HomeFragment())
        bottomNav = findViewById(R.id.bottomNav) as BottomNavigationView
        bottomNav.setOnItemSelectedListener {
            when (it.itemId) {
                R.id.home -> {
                    loadFragment(HomeFragment())
                    true
                }
                R.id.message -> {
                    loadFragment(ChatFragment())
                    true
                }
                R.id.settings -> {
                    loadFragment(SettingFragment())
                    true
                }
            }
        }
    }
    private  fun loadFragment(fragment: Fragment){
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.container,fragment)
        transaction.commit()
    }
 
}

So, our app is ready. And we can see the output.

Output:

Distance covered after last breakpoint with at most K cost

A

ayushpandey3july

Improve

Article Tags :

Similar Reads

Chip Bottom Navigation Bar in Android with Kotlin

We all know various apps that have a Bottom Navigation Bar. Some famous examples include Snapchat, Linkedin, Gmail, etc. In this article, letâ€™s learn how to implement Chip Navigation Bottom Bar in Android apps using Kotlin. This Chip navigation is a mix of Bottom Navigation with Chip components. Als

Bottom Navigation Bar in Android

We all have come across apps that have a Bottom Navigation Bar. Some popular examples include Instagram, WhatsApp, etc. In this article, let's learn how to implement such a functional Bottom Navigation Bar in the Android app. Why do we need a Bottom Navigation Bar? It allows the user to switch to di

Bottom Navigation Bar in Android Jetpack Compose

We all have seen BottomNavigationBar in so many apps, such as Instagram, Quora. In this article, we will learn how to add bottom navigation in Jetpack Compose. Below is a sample of how it will look.Â Why do we need a Bottom Navigation Bar?It allows the user to switch to different activities/fragment

Easy Stylish Chip Button in Bottom Navigation Bar in Android

We all have come across apps that have a Bottom Navigation Bar. Some popular examples include Instagram, Snapchat, etc. In this article, letâ€™s learn how to implement an easy stylish functional Bottom Navigation Bar in the Android app. For Creating a Basic Bottom Navigation bar refer to Bottom Naviga

Theming Floating Action Button with Bottom Navigation Bar in Android

In the previous article How to Add a Floating Action Button to Bottom Navigation Bar in Android?, it's well discussed how to add the Floating Action Button to the Bottom Navigation Bar in Android. Now to increase the UI/UX experience theming also can be done for the Bottom Navigation Bar. So in this

BottomNavigationView in Android

BottomNavigationView makes it easy for users to explore and switch between top-level views with a single tap. There should be a minimum of 3 top-level views and a maximum of 5. If Destinations are more than 5 then use the Navigation Drawer. When the user taps on the icon it will change the top-level

How to Create Option Menu in Android using Kotlin?

In this article, we will learn how to create an options menu in the Android app using Kotlin. To have an options menu in an Activity, we need to create a new menu XML file and inflate it using menuInflator.inflate( ) method. In menu.xml we will design the options menu as the requirement of the app.

How to Send SMS in Android using Kotlin?

SMS Manager is a class in Android which is used to send the SMS to a specific contact from the android application. We can send text messages, data messages, and multimedia messages using this class. There are different methods that are provided to send different types of messages. In this article,

Android - Build a Book Library App using Kotlin

There are so many apps that are present in the play store which provides details related to different books inside it. Book Library is considered one of the basic applications which a beginner can develop to learn some basic concepts within android such as JSON parsing, using recycler view, and othe

How to Send Data Back to MainActivity in Android using Kotlin?

As there are many methods to send the data, but in this article, we will use startActivityForResult() method. Here we need to launch a child activity using startActivityForResult() method. Then from child activity, we can easily send data back to Main Activity. Example: Note: To implement it in java