Post
Ask Question

Bottom Navigation Bar In Android

Introduction

Bottom navigation is a well-known feature in android applications. It is used in almost all applications, including Instagram, Facebook, Twitter, and more. Bottom navigation bars allow movement between primary destinations in an app.

In this article, we will dig into how we can implement a Bottom Navigation Bar in the Android app. Below is the preview of a sample Bottom Navigation Bar.

Navigation bar uses in android application:

  • Bottom navigation allows easy switching between different activities or fragments.
  • Users can easily identify that different screens are available.
  • Bottom navigation highlights the icon that the user is visiting.

Steps for Creating Bottom Navigation Bar

Step 1 - Create a new Android Studio project.

Step 2 - Adding the dependency to the build.Gradle(:app) file

Bottom navigation is available in the Material library. So, we need to import the material library, which we can do by adding the following dependency in our app-level build Gradle file.

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

Step 3 - Designing Bottom Navigation

Go to the res folder and create a new Android Resouce Directory. Name the directory menu, select the resource type menu, and click on OK.

Now, go to the menu and create a menu resource file. Name file bottom_nav then click on OK.

After creating the bottom_nav.xml file. add a title, id, and icon as below:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:title="Dashbord"
        android:id="@+id/dashbord"
        android:icon="@drawable/dashbord"/>
    <item
        android:title="Users"
        android:id="@+id/users"
        android:icon="@drawable/users"/>
    <item
        android:title="Profile"
        android:id="@+id/profile"
        android:icon="@drawable/profile"/>
</menu>

Step 4 - Adding bottom navigation to MainActivity

We will add a relative layout to add different fragments (as you'll see in the next step) and bottom navigation where we give the app: menu id to our menu id.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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=".Activities.HomeActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/relativelayout"
        android:layout_marginBottom="65dp"
        android:padding="5dp">

    </RelativeLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_nav"
        android:layout_alignParentBottom="true"
        android:id="@+id/bottonnav"
        >
    </com.google.android.material.bottomnavigation.BottomNavigationView>
</RelativeLayout>

After adding the following code, our navigation bar menu will look like this:

Step 5 - Create a fragment to add to the bottom navigation.

After adding the Bottom Navigation Bar, we will want to perform an action by clicking the three bottom navigation bar buttons. Here we will create a fragment for each of the three navigation buttons to display the corresponding fragment upon clicking the navigation. Now that we have the three bottom navigation, we will create three fragments: dashboard, users, and profile. To create a Fragment, click on the app(right-click) -> New -> Fragment -> Fragment (Blank). Name the fragment Dashbord_Fragment and the corresponding XML file fragment_dashbord. To keep things simple, all three of the fragments should just contain a TextView. However, we can tweak this as we want it to be in the app. This is what the fragment_dashbord.xml looks like after adding a TextView:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".Fragment.DashbordFragment">

    <!-- TODO: Update blank fragment layout -->

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="430dp"
        android:textSize="35sp"
        android:gravity="center"
        android:text="TextView" />
</FrameLayout>

Like the above dashboard fragment, we will create users and profile fragments.

For a fine look create a directory named as av fragment and move all the fragments in that directory.

Step 6 - Adding action to the Bottom Navigation 

Now we have set everything. Lastly, we must connect the navigation to our MainActivity and set the onNavigationItemSelectedListener.

First, we will implement our MainActvity to onNavigationItemSelectedListener and implements its methods like the below.

public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener

We will set the current fragment as the Dashboard Fragment using setCurrentFragment(). This takes a fragment as an argument and sets it in the FrameLayout of activity_main.xml file. Now we will add the switch case in onNavigationItemSelectedListener to change the fragment upon clicking the navigation bar. After adding all these codes, the MainActivity looks like this:

import java.io.*;
import androidx.appcompat.app.AppCompatActivity;
import androidx.annotation.NonNull;
import com.example.Fragment.*;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import android.os.Bundle;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener {
    BottomNavigationView bottomNavigationView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bottomNavigationView = findViewById(R.id.bottonnav);
        bottomNavigationView.setOnNavigationItemSelectedListener(this);
        loadFragment(new DashbordFragment());
    }
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        Fragment fragment = null;
        switch (item.getItemId()) {
            case R.id.dashbord:
                fragment = new DashbordFragment();
                break;
            case R.id.users:
                fragment = new usersFragment();
                break;
            case R.id.profile:
                fragment = new ProfileFragment();
                break;
        }
        if (fragment != null) {
            loadFragment(fragment);
        }
        return true;
    }
    void loadFragment(Fragment fragment) {
        //to attach fragment
        getSupportFragmentManager().beginTransaction().replace(R.id.relativelayout, fragment).commit();
    }
}

Output

Conclusion

In this article, we have discussed what Bottom Navigation in android is and how it is used. All the steps are simple and contain all descriptions needed. Please comment for more details.


Similar Articles