How to Code a Bottom Navigation Bar for an Android App

3. Initialization of Components

Next, we are going to initialize an instance of BottomNavigationView. Initialization 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 method setOnNavigationItemSelectedListener. 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 another 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: 

7. Launching the Fragments

When any of the menu items is clicked, we open the corresponding Fragment and also 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 have 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 are 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.

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.

Conclusion

In this tutorial, you learned how to create a bottom navigation bar in Android using the BottomNavigationView API from scratch. 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 bar 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 SDK
  Build a Music App With an Android App Template
  Chike Mgbemena
• 
  App Templates
  15 Best Android App Templates of 2017
  Nona Blackman
• 
  Android SDK
  Android From Scratch: Using REST APIs
  Ashraff Hathibelagal
• 
  Android SDK
  How to Code a Navigation Drawer for an Android App
  Chike Mgbemena
• 
  Kotlin
  Kotlin From Scratch: More Fun With Functions
  Chike Mgbemena