Comment on page
7.2 Implementation of the Bottom Navigation Bar
The bottom navigation bar is one of the most common type of navigation system in Android apps, and it's fairly simple to add. The navigation bar is generally added to an activity along with a fragment container. When the user clicks on different icons on the navigation bar, the fragments will switch.
To start, you'll need to add the material design library to
build.gradle: build.gradle (Module: app)
implementation 'com.google.android.material:material:1.2.1'
In the XML file for your activity, you can directly add the
BottomNavigationView, either by typing in the XML or dragging the view from the Layout Palette: activity_main.xml
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
Now that we have the view for the bottom navigation bar, we need a way to add the icons for the different fragments. We can do this by creating a new
res directory called res/menu and adding our menu XML inside. Each item in the menu corresponds to an icon on the app. res/menu/bottom_nav_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/home_item"
android:enabled="true"
android:icon="@drawable/flower"
android:title="Home"
app:showAsAction="ifRoom" />
<item
android:id="@+id/favorites_item"
android:enabled="true"
android:icon="@drawable/flower1"
android:title="Favorites"
app:showAsAction="ifRoom" />
<item
android:id="@+id/profile_item"
android:enabled="true"
android:icon="@drawable/tulip"
android:title="Profile"
app:showAsAction="ifRoom" />
</menu>
Now inside of
BottomNavigationView we need to add this line to attribute the menu xml to the navigation bar: activity_main.xml
<com.google.android.material.bottomnavigation.BottomNavigationView
...
app:menu="@menu/bottom_nav_menu" />
This is what the bottom navigation bar looks like:
Example of Bottom Navigation Bar
Notice how the icon that is selected is shown in a different color. By default, Android uses
@color/colorPrimary as the selection color, but you can also choose to add the attribute app:itemIconTint to the navigation bar in the XML to change this. In the activity file, you can now add functionality to change fragments or modify the screen according to the selected icon. In our example, we'll just modify a
TextView according to the icon selected, but this could be expanded to replace Fragments, etc: MainActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
...
bottomNavBar.setOnNavigationItemSelectedListener {
when (it.itemId) {
R.id.home_item -> {
textView.text = "Home"
}
R.id.favorites_item -> {
textView.text = "Favorites"
}
R.id.profile_item -> {
textView.text = "Profile"
}
}
true
}
}
As you can see, building out a bottom navigation bar and customizing its functionality doesn't take a lot of code -- it's mostly layout files. This type of navigation is normally used for apps that have 3-5 different main screens or fragments. Any more or less means that you'll need to consider if the bottom navigation bar is the best way to organize all the screens.
Android's Material Design library also allows us to add badges to the icons, which can be useful for message-based apps:
Example of badges
To implement a badge, all you need is the icon's resource id and the badge text:
MainActivity.kt
var badge = bottomNavBar.getOrCreateBadge(it.itemId)
badge.isVisible = true
badge.number = 99
For this to work, you might need to change the parent theme of the app to
Theme.MaterialComponents. This is just a bug with the material design library. Last modified 1yr ago