Bottom Navigation Bar in Android Using Kotlin
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"?> <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 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 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 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"?> 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.popupmenuimport androidx.appcompat.app.AppCompatActivityimport android.os.Bundleimport android.util.Logimport android.widget.ImageViewimport android.widget.PopupMenuimport android.widget.Toastimport androidx.fragment.app.Fragmentimport com.google.android.material.bottomnavigation.BottomNavigationViewimport java.lang.Exceptionclass 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:
