Introduction

In android app design, a bottom navigation bar can be of great use in organizing the primary destinations of your app in such a way that there is easy and intuitive movement between these destinations. The top level destinations can be activities or fragments.

In this post, we are going to create something similar to this below without the floating action button;

A bottom navigation bar is usually placed at the bottom of the app screen. Bottom navigation bars typically display three to five destinations, with each destination represented by an icon and an optional text label. Whenever a bottom navigation icon is clicked, the user is taken to the top level destination associated with that icon.

Design guide lines

For better and intuitive use of bottom navigation bars in the design of your applications, these recommendations below will prove helpful;

• They work best on only mobile or tablets
• Use between three to five destinations inclusive
• Should be used for top level destinations that need to be accessed from anywhere in the app
• Their usage isn’t appropriate for simple single tasks
• Provide short, meaningful descriptions of bottom navigation destinations
• Avoid wrapped text labels

Look and feel (Anatomy)

The navigation consists of three to five destinations, each with an icon and a text label which is optional. This is clearly shown in the figure below;

1. Container
2. Active icon
3. Active text label
4. Inactive Icon
5. Inactive text label

Creating the bottom navigation bar

The process of creating a bottom navigation bar at the bottom of your app screen is simple, follow these steps;

Step #1: Create a new Android Studio project

You need to first create a new project in Android Studio. On how to do this, you can read this article:  creating a new project in Android studio

Step #2: Adding the dependency to the build.gradle(:app) file

Since we shall be using android’s material design library, we need to import it in the build.gradle(:app) file. Here’s the dependency we need to add:

implementation ‘com.google.android.material:material:1.7.0’

And then added to the build.gradle file;

     dependencies {
    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'com.google.android.material:material:1.7.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
}

Step #3: Creating a menu for the Bottom Navigation Bar

We add items to the navigation bar by creating a menu resource. To create this menu ;

1. First create a Menu Directory by clicking on the app > res (right-click) > New > Android Resource Directory
2. And then select Menu in the Resource Type.

To create a Menu Resource File;

1. Click on the app > res > menu (right-click) > New > Menu Resource File
2. And name it bottom_nav_menu.

Now you can create as many items as you want in the bottom_nav_menu.xml file. You need to also create an icon for each of these items.

We create an icon by, clicking on app > res > drawable (right-click) > New > Vector Asset.

In the window that opens, the user can name the icon whatever he wants but it should not comprise any uppercase letter or spaces. For our example, we shall create four vector icons in the drawable folder which will result into four xml files; home_icon.xml, buyers_icon.xml, stats_icon.xml and lastly settings_icon.xml

The user can select the icon he wants by searching it and when the user is done, click Next > Finish.

Now add these items in the bottom_nav_menu.xml. This is how the bottom_nav_menu.xml file looks like after adding the items:

<?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">

        <!-- The home action item -->
        <item
            android:id="@+id/home"
            android:icon="@drawable/home_icon"
            android:title="@string/home_text" />

        <!-- The buyers action item -->
        <item
            android:id="@+id/buyers"
            android:icon="@drawable/buyers_icon"
            android:title="@string/buyers_text" />

        <!-- The stats action item -->
        <item
            android:id="@+id/stats"
            android:icon="@drawable/stats_icon"
            android:title="@string/stats_text" />

        <!-- The Settings action item -->
        <item
            android:id="@+id/settings"
            android:icon="@drawable/settings_icon"
            android:title="@string/settings_text" />
    </menu>

Step #4: Configuring the activity_main.xml file

After creating a new project from the step above, locate the app’s activity_main.xml file and populate it with the code below. In this case, we use a ConstraintLayout which will act as the container layout for the Bottom Navigation Bar that is represented by the material BottomNavigationView view.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavView"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        app:itemBackground="@color/dark_green"
        app:itemIconSize="24dp"
        app:itemIconTint="@color/bottom_nav_item_color"
        app:itemPaddingBottom="12dp"
        app:itemPaddingTop="8dp"
        app:itemTextColor="@color/bottom_nav_item_color"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>

Note from the code above that the BottomNavigationView has an attribute; app:menu set to @menu/bottom_nav_menu. This attribute basically sets a menu resource for the navigation bar and its set to the menu resource we created in step #3 above.

Results

The output of all the above steps is a navigation bar at the bottom of your app screen as how below;