How to Code a Bottom Navigation Bar for an Android App

tag:code.tutsplus.com,2005:PostPresenter/cms-30305

Final product image — What You'll Be Creating

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.

Android Studio Bottom Navigation Bar Tutorial Screenshot of Google Discover App With Android Bottom Bar

In this post, you'll learn how to display menu items inside a bottom navigation bar in Android. You will use AndroidX navigation, which is part of the Jetpack suite of libraries. Jetpack is a suite of libraries to help developers write code that works consistently across Android versions and devices. As a bonus, you'll also learn how to use Android Studio templates to bootstrap your project with a bottom navigation bar quickly.

Getting Started

Open Android Studio, create a new project, and select a Blank Activity template, as shown below. Select the Kotlin language from the drop-down menu and click Finish. Wait for Android Studio to finish creating the project resources.

Add Project Dependencies

The first thing before we get started is to add the project dependencies. Open the app's build.gradle file and add the following dependencies.

dependencies {
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    def nav_version = "2.3.5"

    //The rest of the dependencies here

    // Kotlin
    implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
    implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

}

Create a Navigation Graph

A navigation graph is an XML resource file that contains all of your application destinations and actions. Right-click on the res directory and select New > Android Resource File. Provide a name and select Navigation as the resource type, and click OK. The navigation graph gets placed in the navigation folder, as shown in the structure below.

create nav graph

Add Destinations to the Navigation Graph

The navigation file will contain all the destinations of our application. To add a destination, click on the plus (+) sign at the top of the design tab or choose an existing destination if you have already created the fragments.

Our application will have three screens, namely:

Home page
Profile page
Settings page

Therefore, we will add three destinations to the navigation XML file. To add a new destination, click the plus (+) sign and select the Create new destination option. On the next screen, select a blank fragment and provide the details as shown below.

Repeat the same steps and create two additional fragments for the Profile and Settings screens. The final navigation graph XML now looks like this.

Each fragment has its layout, which you can customize as you wish. Below is how each fragment looks after adding a text view at the center of each fragment.

Add a Nav Host Fragment and Bottom Navigation View

Next, define a host fragment in the main layout (main_activity.xml). A nav host fragment is an empty container where destinations are swapped in and out as a user navigates through your app. We will also add the BottomNavigationView in the main layout, as shown below.

<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.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=".MainActivity"><fragment
    android:id="@+id/nav_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    app:layout_constraintBottom_toTopOf="@id/bottom_navigatin_view"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:navGraph="@navigation/nav_graph " /><com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigatin_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

Add Menu Items

The next step is to add menu items for the bottom navigation view. Right-click on the res directory, select New > Android Resource File and select menu, provide a name and click OK.

Open the menu XML file and add three menu items, as shown below.

<?xml version="1.0" encoding="utf-8"?><menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"><item android:title="Home" /><item android:title="Profile" /><item android:title="Setting" /></menu>

Add Vector Assets to Menu Items

A vector asset is an XML file that defines a virtual image in its file. Vector assets guarantee sharp images which can be resized to any screen size without losing their quality. To add a vector asset, right-click on Drawable > New > Create Vector Asset and choose a home icon for the home menu as shown below.

Repeat the same steps and create vector assets for the rest of the menu items. Add the vector assets to the respective menu items as shown below.

<?xml version="1.0" encoding="utf-8"?><menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"><item android:title="Home"
        android:icon="@drawable/home"/><item android:title="Profile"
        android:icon="@drawable/profile"/><item android:title="Setting"
        android:icon="@drawable/settings"/></menu>

The next step is to add id attributes to each menu item. The menu item's id should be the same as the id of the navigation graph destinations in order to allow navigation throughout the fragments.

<?xml version="1.0" encoding="utf-8"?><menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"><item
        android:id="@+id/homeFragment"
        android:title="Home"
        android:icon="@drawable/home"/><item
        android:id="@+id/profileFragment"
        android:title="Profile"
        android:icon="@drawable/profile"/><item
        android:id="@+id/settingsFragment"
        android:title="Setting"
        android:icon="@drawable/settings"/></menu>

Add Menu Item to Bottom Navigation View

The last step is to add the menu to the bottom navigation view. Open main_activity.xml and add the app:menu="@menu/bottom_nav" attribute to the BottomNvigationView.

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigatin_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav" />

About the Nav Controller

The NavController is an object that manages app navigation within a NavHost. It coordinates the swapping of fragments as users move through your app. In the main activity class, call setupWithNavController() from your main activity's onCreate() method, as shown below.

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

        //Initialize the bottom navigation view
        //create bottom navigation view object
        val bottomNavigationView = findViewById<BottomNavigationView>(R.id.bottom_navigatin_view)
        val navController = findNavController(R.id.nav_fragment)
        bottomNavigationView.setupWithNavController(navController
        )


    }
}

Final App

The final app should now look like this:

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.

Bottom Navigation Bar Tutorial Create Android Project dialog

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.

RocketWeb Web View Android App Template

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.

AdForest Classified Ads Android App Template

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

MaterialX Android UI Component Templates

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+:

Conclusion

In this tutorial, you learned how to create a bottom navigation bar in Android from scratch, using Jetpack navigation. 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+!

This post has been updated with contributions from Nathan Umoh and Esther Vaati. Nathan is a staff writer for Envato Tuts+. Esther is a software developer and writer for Envato Tuts+.

2021-05-22T02:17:14.022Z2021-05-22T02:17:14.022ZChike Mgbemena