How to Code a Bottom Navigation Bar for an Android App

The material design team at Google defines the functionality of bottom navigation bars in Android as follows:

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.

Tapping on a bottom navigation icon takes you directly to the associated view or refreshes the currently active view.

According to the official material design guidelines for the Android bottom navigation bar, it should be used when your app has:

• three to five top-level destinations
• destinations requiring direct access

An example of a popular app that implements the bottom navigation bar is the Google Discover Android app from Google, which uses it to navigate to different destinations of the app. You can see this yourself by downloading the Google Discover app from the Google Play Store (if you don't already have it on your device). The following screenshot is from the Google Discover app displaying an Android bottom navigation bar.

In this post, you'll learn how to display menu items inside a bottom navigation bar in Android. We'll use the BottomNavigationView API to perform the task. As a bonus, you'll also learn how to use Android Studio templates to quickly bootstrap your project with a bottom navigation bar. 

A sample project (in Kotlin) for this bottom navigation bar Android tutorial can be found on our GitHub repo so you can easily follow along.

Prerequisites

To be able to follow this Android Studio bottom navigation bar tutorial, you'll need:

• Android Studio 3.0 or higher
• Kotlin plugin 1.1.51 or higher

1. Create an Android Studio Project

Fire up Android Studio and create a new project (you can name it BottomNavigationDemo) with an empty activity called MainActivity. Make sure to also check the Include Kotlin support check box.

2. Adding the BottomNavigationView

To begin using BottomNavigationView in your project, make sure you import the design support and also the Android support artifact. Add these to your module's build.gradle file to import them. 

dependencies {
    implementation 'com.android.support:design:27.0.2'
}

Also, visit your res/layout/activlty_main.xml file to include the BottomNavigationView widget. This layout file also includes a ConstraintLayout and a FrameLayout. Note that the FrameLayout will serve as a container or placeholder for the different fragments that will be placed on it anytime a menu item is clicked in the Android bottom navigation bar. (We'll get to that shortly.)  

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout
        xmlns:android="https://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="com.chikeandroid.bottomnavigationdemo.MainActivity"><FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" /><android.support.design.widget.BottomNavigationView
            android:id="@+id/navigationView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="0dp"
            android:layout_marginStart="0dp"
            android:background="?android:attr/windowBackground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:itemBackground="@color/colorPrimary"
            app:itemIconTint="@color/white"
            app:itemTextColor="@color/white"
            app:menu="@menu/navigation"/></android.support.constraint.ConstraintLayout>

Here we have created a BottomNavigationView widget with the id navigationView. The official documentation says that:

BottomNavigationView represents a standard bottom navigation bar for application. It is an implementation of material design bottom navigation.

Bottom navigation bars make it easy for users to explore and switch between top-level views in a single tap. It should be used when application has three to five top-level destinations.

The important attributes you should take note of that were added to our BottomNavigationView are:

• app:itemBackground: this attribute sets the background of our menu items to the given resource. In our case, we just gave it a background colour. 
• app:itemIconTint: sets the tint which is applied to our menu items' icons.
• app:itemTextColor: sets the colours to use for the different states (normal, selected, focused, etc.) of the menu item text.

To include the menu items for the bottom navigation bar, we can use the app:menu attribute with a value that points to a menu resource file. 

<android.support.design.widget.BottomNavigationView
            app:menu="@menu/navigation"/>

Here is the res/menu/navigation.xml menu resource file:

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"><item
            android:id="@+id/navigation_songs"
            android:icon="@drawable/ic_music_note"
            android:title="Songs"/><item
            android:id="@+id/navigation_albums"
            android:icon="@drawable/ic_album"
            android:title="Albums"/><item
            android:id="@+id/navigation_artists"
            android:icon="@drawable/ic_person"
            android:title="Artists"/></menu>

Here we have defined a Menu using the <menu> which serves as a container for menu items. An <item> creates a MenuItem, which represents a single item in a menu. As you can see, each <item> has an id, an icon, and a title.

3. Initialisation of Components

Next, we are going to initialise an instance of BottomNavigationView. Initialisation is going to happen inside onCreate() in MainActivity.kt.

import android.os.Bundle
import android.support.design.widget.BottomNavigationView
import android.support.v7.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    lateinit var toolbar: ActionBar

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        toolbar = supportActionBar!!
        val bottomNavigation: BottomNavigationView = findViewById(R.id.navigationView)
    }
}

4. Testing the App

Now we can run the app!

As you can see, our bottom navigation bar is showing at the bottom of the app screen. Nothing will happen if you click on any of the navigation items there—we're going to handle that part in the next section. 

5. Configuring Click Events

Now, let's see how to configure click events for each of the items in the bottom navigation bar. Remember that clicking on any item in there should take the user to a new destination in the app.

// ...
    private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_songs -> {
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_albums -> {
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_artists -> {
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        // ... 
        bottomNavigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
    }
// ...     

Here we called the setOnNavigationItemSelectedListener method. Here is what it does, according to the official documentation:

Set a listener that will be notified when a bottom navigation item is selected.

We used the when expression to perform different actions based on the menu item that was clicked—the menu item ids serve as constants for the when expression. At the end of each when branch, we return true.

We then pass our mOnNavigationItemSelectedListener listener to setOnNavigationItemSelectedListener() as an argument. 

Be aware that there is a similar method called setOnNavigationItemReselectedListener, which will be notified when the currently selected bottom navigation item is reselected.

Next, we are going to create the different pages (or Fragments) for each of the menu items in the navigation drawer so that when a menu item is clicked or tapped, it displays a different Android Fragment or page. 

6. Creating the Fragments (Pages)

We'll start with the SongsFragment.kt class, and you should follow a similar process for the remaining two fragment classes—AlbumsFragment.kt and ArtistsFragment.kt.

Here is my SongsFragment.kt:

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class SongsFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? =
            inflater.inflate(R.layout.fragment_songs, container, false)

    companion object {
        fun newInstance(): SongsFragment = SongsFragment()
    }
}

Also, here is my R.layout.fragment_songs: 

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"><TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Songs"
            android:gravity="center_vertical|center_horizontal"/></LinearLayout>

7. Launching the Fragments

When any of the menu items is clicked, we open the corresponding Fragment and change the action bar title. 

private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
    when (item.itemId) {
        R.id.navigation_songs -> {
            toolbar.title = "Songs"
            val songsFragment = SongsFragment.newInstance()
            openFragment(songsFragment)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_albums -> {
            toolbar.title = "Albums"
            val albumsFragment = AlbumsFragment.newInstance()
            openFragment(albumsFragment)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_artists -> {
            toolbar.title = "Artists"
            val artistsFragment = ArtistsFragment.newInstance()
            openFragment(artistsFragment)
            return@OnNavigationItemSelectedListener true
        }
    }
    false
}

private fun openFragment(fragment: Fragment) {
    val transaction = supportFragmentManager.beginTransaction()
    transaction.replace(R.id.container, fragment)
    transaction.addToBackStack(null)
    transaction.commit()
}

Here we're using a method called openFragment() that simply uses the FragmentTransaction to add our fragment to the UI. 

Now run the project again to see how it all works!

Anytime you click on any menu item, it will take the user to a new Fragment. 

Note that when we have more than four menu items in the bottom navigation bar—i.e. in BottomNavigationView—then the Android system automatically enables shift mode. In this mode, when any of the menu items is clicked, the other items on the right or left of the clicked item are shifted. 

8. Bonus: Using Android Studio Templates

Now that you've learnt about the APIs involved to create a bottom navigation bar from scratch in Android, I'll show you a shortcut that will make it faster next time. You can simply use a template instead of coding a navigation bar from scratch. 

Android Studio provides code templates that follow the Android design and development best practices. These existing code templates (available in Java and Kotlin) can help you quickly kick-start your project. One such template can be used to create a bottom navigation bar. 

To use this handy feature for a new project, first fire up Android Studio. 

Enter the application name and click the Next button. You can leave the defaults as they are in the Target Android Devices dialog. 

Click the Next button again. 

In the Add an Activity to Mobile dialog, select Bottom Navigation Activity. Click the Next button again after that. 

In the last dialog, you can rename the Activity, or change its layout name or title if you want. Finally, click the Finish button to accept all configurations. 

Android Studio has now helped us to create a project with a bottom navigation activity. Really cool! You're strongly advised to explore the code generated. 

In an existing Android Studio project, to use this template, simply go to File > New > Activity > Bottom Navigation Activity.

Top Android App Templates From CodeCanyon

Note that the templates that come included with Android Studio are good for simple layouts and making basic apps, but if you want to really kick-start your app, you might consider some of the app templates available from Envato Market. 

They’re a huge time-saver for experienced developers, helping them to cut through the slog of creating an app from scratch and focus their talents instead on the unique and customised parts of creating a new app.

Let's look at a few cool templates that will let you put your new Android bottom navigation bar coding skills to good use.

1. Android App Builder: WooCommerce, WebView, WordPress and Much More

Creating native Android apps couldn't get simpler. The Android App builder template lets you turn your online presence into easy-to-use mobile experiences. Turn your WooCommerce shop, WordPress blog, or HTML5 website into an app, with no coding experience necessary. Use the included tutorial to learn how to complete your app project.

2. RocketWeb: Configurable Android WebView App Template

Looking to create a stylish Android WebView app? Save yourself some time and hassle by using the RocketWeb template. You won't need any programming skills to get the most from this download. Just open it in Android Studio and start customising. Tweak the Kotlin bottom navigation bar for Android, the colours, and a whole lot more with RocketWeb.

3. Dating App for Web, iOS and Android

Connections are in the air with the Dating App template. It was built in Android Studio and Xcode with Swift, so you can have both an Android and an iOS app. On top of the modern bottom navigation bar for Android and iOS, Dating App also features:

• simple image gallery
• Facebook signup
• upgrades, AdMob banner, and in-app purchases
• messaging and friends system

4. AdForest: Classified Native Android App

Let users take the classified section on the go with AdForest. Users will be able to quickly sign up and verify their accounts with their mobile numbers. Once in, they can search for products, find nearby listings, message vendors for more information, and a whole lot more. It's as easy to set up as it is to navigate.

5. MaterialX: Android Material Design UI Components

This Android app template is the perfect bundle for developers. It features all types of useful UI design elements to complete your projects. There are more than 315 unique layouts that come in more than 31 categories. Some of the included components are:

• Android bottom navigation bars
• buttons, chips, and cards
• dialog boxes
• grids and lists
• navigation drawer menus

Find More Android App Templates From Envato Tuts+

The above templates are great premium options in their own right. But they're far from the only ones available to you! Our instructors have rounded up some of the best Android app templates from CodeCanyon that you should check out. No matter the niche, you can find a nice Android template that suits your needs from Envato Tuts+:

• Mobile App
  15 Best Android App Templates With Maps Integration
  Daniel Strongin
• App Templates
  15 Best eCommerce Android App Templates
  Daniel Strongin
• App Templates
  15 Best eCommerce Android App Templates
  Daniel Strongin
• Android
  9 Android Templates to Inspire Your Next Project (+5 Free Templates)
  Franc Lucas
• App Templates
  12 Best Android Photo App Templates
  Franc Lucas
• Android
  10 Best Android Game Templates
  Monty Shokeen

Conclusion

In this tutorial, you learned how to create a bottom navigation bar in Android from scratch, using the BottomNavigationView API. We also explored how to easily and quickly use the Android Studio templates to create a bottom navigation activity. 

I highly recommend checking out the official material design guidelines for bottom navigation bars to learn more about how to properly design and use the bottom navigation bar in Android.   

To learn more about coding for Android, check out some of our other courses and tutorials here on Envato Tuts+!

• Android
  Build a Music App With an Android App Template
  Chike Mgbemena
• App Templates
  22 Best Android App Templates for 2021
  Franc Lucas
• Android
  Android From Scratch: Using REST APIs
  Ashraff Hathibelagal
• Android
  How to Code a Navigation Drawer for an Android App
  Chike Mgbemena
• Kotlin
  Kotlin From Scratch: More Fun With Functions
  Chike Mgbemena

This post has been updated with contributions from Nathan Umoh. Nathan is a staff writer for Envato Tuts+.