Bottom navigation is used when an app requires navigation between different screens i.e fragments and the navigation controls have to be at the bottom of the screen.
Fragments are part of your activity that you dont always want to show the user until user clicks on that fragment.It’s also a kind of activity which are inside an activity and perform some work.
Implementation
Start implementation with making required activities and fragments. When you build the project initially you will get a MainActivity.XML file. Now you have to make three fragments.
To make the three fragments
Right click on your package. Then go to new>fragment>fragment(Blank). And make three fragments and name them ‘HomeFragment’, ‘ProfileFragment’ and ‘SearchFragment’.
Add dependency to your gradle.build(app) file :
dependencies {
val fragment_version = “1.5.7”
//noinspection GradleDependency
implementation(“androidx.fragment:fragment-ktx:$fragment_version”)
}
Working with MainActivity :
Add these lines to your activity_main.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”
tools:context=”.MainActivity”>
<FrameLayout
android:id=”@+id/container”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_above=”@+id/btmNavBar” />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id=”@+id/btmNavBar”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_alignParentBottom=”true”
app:menu=”@menu/bottom_nav_bar_menu”/>
</RelativeLayout>
Here we have added a bottom Navigation bar with these attributes :
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id=”@+id/btmNavBar”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_alignParentBottom=”true”
app:menu=”@menu/bottom_nav_bar_menu”/>
Now, Here you might be getting error bellow menu attribute. That because you have not defined a menu package for your project. So we need to add menu of navigation bar.
For that we need to create another resource package that is menu
app>res right click on it and then new>Android resource directory
and make a new directory and select menu option from Resource type.
Now create menu package and make new menu file by right clicking on menu package and then name it : bottom_nav_bar_menu.
New xml file will be created and then add these lines of code to it :
<?xml version=”1.0″ encoding=”utf-8″?>
<menu xmlns:android=”http://schemas.android.com/apk/res/android”>
<item android:id=”@+id/home”
android:title=”Home”
android:icon=”@drawable/ic_home” />
<item android:id=”@+id/search”
android:title=”Search”
android:icon=”@drawable/ic_search” />
<item android:id=”@+id/profile”
android:title=”profile”
android:icon=”@drawable/ic_profile” />
</menu>
Here in icon section you have to add a vector file and add path here.
android:icon=”@drawable/ic_profile” />
Now, Add these lines to your MainActivity.kt file
package com.example.bottomnavbardemo
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import com.google.android.material.bottomnavigation.BottomNavigationView
class MainActivity : AppCompatActivity() {
lateinit var bottomNavigationView: BottomNavigationView
lateinit var homeFragment: HomeFragment
lateinit var searchFragment: SearchFragment
lateinit var profileFragment: ProfileFragment
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
homeFragment = HomeFragment()
searchFragment = SearchFragment()
profileFragment = ProfileFragment()
bottomNavigationView = findViewById<BottomNavigationView>(R.id.btmNavBar)
loadFragment(HomeFragment())
bottomNavigationView.setOnItemSelectedListener {
try {
when (it.itemId) {
R.id.home -> {
loadFragment(homeFragment)
true
}
R.id.search -> {
loadFragment(searchFragment)
true
} else -> {
R.id.profile
loadFragment(profileFragment)
true
}
}
} catch (e : Exception) {
throw e
}
}
}
private fun loadFragment(fragment: Fragment) {
if (fragment != null) {
val transaction = supportFragmentManager.beginTransaction()
transaction.replace(com.google.android.material.R.id.container, fragment)
transaction.commit()
}
}
}
Fragment_home.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout
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”
android:background=”#BD8484″>
<TextView
android:layout_width=”match_parent”
android:layout_height=”200dp”
android:text=”HomePage”
android:textSize=”50sp”
android:textStyle=”bold”
android:textColor=”@color/black” />
</RelativeLayout>
Fragment_search.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout
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”
android:background=”#00BCD4″>
<TextView
android:layout_width=”match_parent”
android:layout_height=”200dp”
android:text=”Search Page”
android:textSize=”50sp”
android:textStyle=”bold”
android:textColor=”@color/black” />
</RelativeLayout>
Fragment_profile.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout
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”
android:background=”#957B2E”>
<TextView
android:layout_width=”match_parent”
android:layout_height=”200dp”
android:text=”Profile Page”
android:textSize=”50sp”
android:textStyle=”bold”
android:textColor=”@color/black” />
</RelativeLayout>
After adding all these lines of codes in required activity and fragments your navigation bar will be implemented.
I told your what to do so to implement BottomNavigationBar. Now lets understand what we did. You might be having some doubts till now . Letme explain every thing and show you how we did it.
Step1 : We created required activities and fragments(Nothing to explain)
Step2 : Then we added this dependency
dependencies {
val fragment_version = “1.5.7”
//noinspection GradleDependency
implementation(“androidx.fragment:fragment-ktx:$fragment_version”)
}
This is implement all the required dependencies for setting the environment of our fragments. Basically we inject dependency to use different libraries of android. This is the same thing.
Step 3 : Added this line to activity_main.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”
tools:context=”.MainActivity”>
<FrameLayout
android:id=”@+id/container”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_above=”@+id/btmNavBar” />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id=”@+id/btmNavBar”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_alignParentBottom=”true”
app:menu=”@menu/bottom_nav_bar_menu”/>
</RelativeLayout>
Here I made frameLayout to say to the android to change that part only of the screen when switching to different fragments. FrameLayout is basically a layout that will change while switching to different fragments.
and then added bottomNavigationBar attributes and gave id’s to it.
Now we needed to add some menu items to our bottomNavigationBar. So for that we added this line of code to our bottom_nav_bar_menu.xml file :
<?xml version=”1.0″ encoding=”utf-8″?>
<menu xmlns:android=”http://schemas.android.com/apk/res/android”>
<item android:id=”@+id/home”
android:title=”Home”
android:icon=”@drawable/ic_home” />
<item android:id=”@+id/search”
android:title=”Search”
android:icon=”@drawable/ic_search” />
<item android:id=”@+id/profile”
android:title=”profile”
android:icon=”@drawable/ic_profile” />
</menu>
Here we made different menu items, gave name to it and id to it so that we can use them in our main acitivity to load fragments.
Step 4 : Then I designed all the fragments (Nothing to explain)
Step 5 : Working with MainActivity.kt file
I added these lines code to our MainActivity.kt file :
package com.example.bottomnavbardemo
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import com.google.android.material.bottomnavigation.BottomNavigationView
class MainActivity : AppCompatActivity() {
lateinit var bottomNavigationView: BottomNavigationView
lateinit var homeFragment: HomeFragment
lateinit var searchFragment: SearchFragment
lateinit var profileFragment: ProfileFragment
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
homeFragment = HomeFragment()
searchFragment = SearchFragment()
profileFragment = ProfileFragment()
bottomNavigationView = findViewById<BottomNavigationView>(R.id.btmNavBar)
loadFragment(HomeFragment())
bottomNavigationView.setOnItemSelectedListener {
try {
when (it.itemId) {
R.id.home -> {
loadFragment(homeFragment)
true
}
R.id.search -> {
loadFragment(searchFragment)
true
} else -> {
R.id.profile
loadFragment(profileFragment)
true
}
}
} catch (e : Exception) {
throw e
}
}
}
private fun loadFragment(fragment: Fragment) {
if (fragment != null) {
val transaction = supportFragmentManager.beginTransaction()
transaction.replace(com.google.android.material.R.id.container, fragment)
transaction.commit()
}
}
}
Let see one by one what are the use cases of different components of the code. This is the point to understand and also the major part of our bottomnavbar is implemented here.
First we defined the variables for all the view components including our BottomNavBar and all the fragments. Why are we defining different fragments in our MainActivity? Because Fragments are also the part of MainActivity only. Then we found the views by their ID’s. We found bottomnavBar also in the MainActivity layout and then set the itemselectedClickListener on it. Why this? Because we want to select different menu items. Then we loaded our Home_fragment as our MainActivity starts. and for that we called the function loadFragment(fragment).
How this functions works :
private fun loadFragment(fragment: Fragment) {
if (fragment != null) {
val transaction = supportFragmentManager.beginTransaction()
transaction.replace(com.google.android.material.R.id.container, fragment)
transaction.commit()
}
}
In this function we are passing the fragment as a parameter and inside the function we made a check whether fragment is null or what. If fragment is null then we are going to use supportFragmentManager class and its method beginTransaction( ) and storing it into reference variable transaction. And then we replace that part of the frameLayout with our fragments in the second line of code. And then transaction.commit( ) commits the changes.
Then we are using when condition and switching to the fragments as per the id and as per the item selected.
That was it for this one. I explained what to do to implement BottomNavBar and then I also explained how everything worked and how we did it.
Now you run your app and everything will be fine. Thats it for this one . See you in the next one.