Bottom Navigation Bar in Android is used to reach out to different screens from a single place using fragments. It is situated at the bottom of the screens so it is called Bottom Navigation. Bottom Navigation Bar makes it easy for users to explore and switch between top-level views in a single tap. See in the example below –

You can see in the above screenshot. I created three tabs. These tabs contain text and icons. You can manage all these things according to you.

What is Bottom Navigation Bar In Android?

Bottom Navigation Bar in android is a screen which contains some tabs on the bottom side. We can load the screens on a layout which is placed top of the tabs. Framelayout is used to load those screens. Those screens are called fragments.

Material design library is used to create the bottom navigation bar. This is simple to manage and create in android.

Why Do We Use the Bottom Navigation Bar?

Basically this is used when we want to see where we are in the application and want to move to another screen from there but we want to continue to see that actual where we are.

This is the best way to manage the screens in simple root. We can change the state of tab behaviour like color, size and other properties when we click on that. 

How to Create a Bottom Navigation Bar In Android? Complete Example

To create Bottom Navigation Bar in android, we have to first implement the material design library.

implementation 'com.google.android.material:material:1.4.0'

After that create a main screen in which we load fragments and to create a Bottom Navigation Bar. I named it according to me, you can copy and paste it in your code.

Following is the activity_bottom_navigation.xml . It contains FrameLayout which will load Fragments inside it. And Bottom Navigation Bar which is taken from the material design library.

Please note that I used DataBinding in this project. If you want to learn How to use databinding in android just learn it first. DataBinding is the way of reducing the code. After enabling the dataBinding in android you don’t need to find the components ids, simply use Binding object and component id with dot operator.

item_bottom_navigation.xml

Create a item_bottom_navigation.xml  menu layout in res – > menu (android resource directory) . This menu layout is used to create the bottom navigation bar tabs in android, you can manage it according to you. Please change the icons of this menu layout from your drawable icons.

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

    <item
        android:id="@+id/bottom_nav_chat"
        android:title="Chat"
        android:icon="@drawable/ic_chat"/>

    <item
        android:id="@+id/bottom_nav_status"
        android:title="Status"
        android:icon="@drawable/ic_status"/>

    <item
        android:id="@+id/bottom_nav_call"
        android:title="Call"
        android:icon="@drawable/ic_call"/>
</menu>

activity_bottom_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".BottomNavigationActivity">

        <FrameLayout
            android:id="@+id/frameLayout_Bottom"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/bottomNavigationView"
            android:scrollbars="horizontal" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@color/grey"
            android:padding="10dp"
            app:menu="@menu/item_bottom_navigation" />

    </RelativeLayout>
</layout>

BottomNavigationActivity.java

Before going to the BottomNavigationActivity lets learn some single line code which will help you to learn the whole code. If i put the whole code you could be confused. So I break the main code into multiparts after that we will see the whole code combined.

getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout_Bottom, new ChatFragment()).commit();

The above code line is used to load a particular fragment, when this screen opens. This is used to load the default screen at the opening time of the screen. Here we are loading ChatFragment() by default in frameLayout.

binding.bottomNavigationView.setSelectedItemId(R.id.bottom_nav_chat);

To set the default selected fragment we have to set its id from the menu section which we will create further. This line is used to set selected fragment id.

setOnNavigationItemSelectedListener(new On….)

setOnNavigationItemSelectedListener(new On…) is a listener that is used to navigate the fragments. It navigates the screen which we want to load when we select a particular tab from the Bottom Navigation Bar.

In the button navigation listener,  we will use switch cases to navigate different screens by passing the id of the tab menu.

To navigate the fragment FragmentManager and FragmentTransaction is used. We load the fragment in frameLayout using its id.

How to Call Fragments In FrameLayout For Bottom Navigation Bar in Android?

To call fragments in frameLayout, FragmentManager and TransactionManager classes are used.  First create an object of the FragmentManager class by assigning getSupportFragmentManager() . After that create an object for FragmentTransaction and bind it with FragmentManager object.

To load fragment use the object of TransactionManager and place the fragment inside frameLayout. After that, commit it.

Followin is the main class ->

package com.example.androidtestingproject;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.view.GravityCompat;
import androidx.databinding.DataBindingUtil;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;
import android.view.MenuItem;

import com.example.androidtestingproject.Fragment.CallFragment;
import com.example.androidtestingproject.Fragment.ChatFragment;
import com.example.androidtestingproject.Fragment.StatusFragment;
import com.example.androidtestingproject.databinding.ActivityBottomNavigationBinding;
import com.google.android.material.bottomnavigation.BottomNavigationView;

public class BottomNavigationActivity extends AppCompatActivity {
    private ActivityBottomNavigationBinding binding;
//    private OnBackpressedListener onBackpressedListener;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       binding = DataBindingUtil.setContentView(this, R.layout.activity_bottom_navigation);
       initView();
    }

    private void initView() {

        getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout_Bottom, new ChatFragment()).commit();
        binding.bottomNavigationView.setSelectedItemId(R.id.bottom_nav_chat);

        binding.bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.bottom_nav_chat:
                        loadFragment(new ChatFragment());
                        break;
                    case R.id.bottom_nav_status:
                        loadFragment(new StatusFragment());
                        break;
                    case R.id.bottom_nav_call:
                        loadFragment(new CallFragment());
                        break;
                }
                return true;
            }
        });
    }

    public void loadFragment(Fragment fragment){
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.replace(R.id.frameLayout_Bottom, fragment);
        transaction.commit();
    }


}

Fragments

Fragments are the screens which will load in the frameLayout when we tap the bottom navigation bar tab in android device. These screens will be loaded above the bottom navigation bar. Bottom navigation bar remains the same all the time when we click on any tab.

How to Create Fragments in Android?

Fragments are used to replace another fragment in android. Basically these are used in frameLayout and ViewPager.

To create a fragment just follow the following steps – >

Right click on package – > new – > Fragments – > Fragment(Blank)

I created three fragments in this tutorial for demo purposes only. I am showing one code of the fragmen only. You have to create three fragments if you want to use this code. You can delete and increase the number of tabs. For this you have to do changes in item_bottom_navitaon and switch cases.

ChatFragment.java

This is a java file which contains a basic codebase and is connected to its layout. You can use this or can create your own fragment using the above steps.

package com.example.androidtestingproject.Fragment;

import android.os.Bundle;

import androidx.databinding.DataBindingUtil;
import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.androidtestingproject.R;
import com.example.androidtestingproject.databinding.FragmentChatBinding;

public class ChatFragment extends Fragment {
    private FragmentChatBinding binding;
    private View view;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        binding = DataBindingUtil.inflate(inflater, R.layout.fragment_chat, container, false);
        view = binding.getRoot();
        return view;
    }
}

fragment_chat.xml

This is a layout resource xml file which contains design and other components. Just copy and paste it if you want to use it. I created only a TextView inside it.

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

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Fragment.ChatFragment"
        android:orientation="vertical">

        <!-- TODO: Update blank fragment layout -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Chat"
            android:textSize="24dp"
            android:layout_gravity="center"
            android:gravity="center"/>

    </androidx.appcompat.widget.LinearLayoutCompat>
</layout>

How to Change The Color Of Bottom Navigation Bar Icon and Text When I Press it In android?

To change the style of tab bar items like tab icon and text color, size , font, selected color, default color, Create the following theme in your default theme section. You can manage this according to your use for a better style of bottom navigation bar in android screens.

 
// bottom theme
    <style name="Theme.App" parent="Theme.MaterialComponents">
        //style the color, size and other features of bottom navigation bar
        <item name="bottomNavigationStyle">style="@style/Widget.MaterialComponents.BottomNavigationView.Colored</item>
        <item name="colorPrimary">@color/purple_700</item>
        <item name="colorOnPrimary">@color/teal_700</item>
        <item name="actionMenuTextColor">@color/white</item>
    </style>

How to Use The Style Theme in the Bottom Navigation Bar In Android?

To use the above style theme in your bottom navigation bar, just use the below line in your bottom navigation bar. For more styles you can visit the material design website.

android:theme="@style/Theme.App"

Conclusion

We have successfully created the Bottom Navigation Bar in android. This code is well tested.

Thank you for gaining knowledge from FlutterTPoint. Please visit more android tutorials which will help you to grow your android skill. See how to create Navigation Drawer In Android. Learn dataBinding in android.

---