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:
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:
Similar Reads
Non-linear Components
In electrical circuits, Non-linear Components are electronic devices that need an external power source to operate actively. Non-Linear Components are those that are changed with respect to the voltage and current. Elements that do not follow ohm's law are called Non-linear Components. Non-linear Co
11 min read
Steady State Response
In this article, we are going to discuss the steady-state response. We will see what is steady state response in Time domain analysis. We will then discuss some of the standard test signals used in finding the response of a response. We also discuss the first-order response for different signals. We
9 min read
Use Case Diagram - Unified Modeling Language (UML)
A Use Case Diagram in Unified Modeling Language (UML) is a visual representation that illustrates the interactions between users (actors) and a system. It captures the functional requirements of a system, showing how different users engage with various use cases, or specific functionalities, within
9 min read
Half Wave Rectifier
A Half-wave rectifier is an electronic device that is used to convert Alternating current (AC) to Direct current (DC). A half-wave rectifier allows either a positive or negative half-cycle of AC to pass and blocks the other half-cycle. Half-wave rectifier selectively allows only one half-cycle of th
15 min read
Architecture of 8085 microprocessor
A microprocessor is fabricated on a single integrated circuit (IC) or chip that is used as a central processing unit (CPU).The 8085 microprocessor is an 8-bit microprocessor that was developed by Intel in the mid-1970s. It was widely used in the early days of personal computing and was a popular cho
11 min read
Android Architecture
Android architecture contains a different number of components to support any Android device's needs. Android software contains an open-source Linux Kernel having a collection of a number of C/C++ libraries which are exposed through application framework services. Among all the components Linux Kern
5 min read
States of a Process in Operating Systems
In an operating system, a process is a program that is being executed. During its execution, a process goes through different states. Understanding these states helps us see how the operating system manages processes, ensuring that the computer runs efficiently. Please refer Process in Operating Sys
11 min read
What is Agile Methodology?
The Agile methodology is a proper way of managing the project with breaking them into smaller phases which is iteration. It basically focus on flexibility of the project which we can change and improve the team work regularly as per requirements.Table of ContentWhat is Agile?What is the Agile Method
14 min read
How to Download and Install the Google Play Store
The Google Play Store is the heartbeat of your Android experience—home to millions of apps, games, and updates that keep your device functional, fun, and secure. But what if your phone or tablet doesn’t have it pre-installed?In this step-by-step guide, you’ll learn how to safely download and install
6 min read
MVC Framework Introduction
Over the last few years, websites have shifted from simple HTML pages with a bit of CSS to incredibly complex applications with thousands of developers working on them at the same time. To work with these complex web applications developers use different design patterns to lay out their projects, to
6 min read