Hello everybody, we’ve all seen those bottom navigation looks good , today we are just going to build them. Let’s get started.

Step:-1 Main Activity

Start a android studio project , As soon as you do , a main activity will be created.
At this moment we are going to work on the layout so. open the “activity_main.xml” file in the layout.

Before this you should also add

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

this in you projects (module:app) gradle file.

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

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_above="@id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    

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

</RelativeLayout>

Here I have changed the constraint layout with the Relative Layout. I have add the Frame Layout as the fragment container so we can change the data as user clicks on different navigation button. At last Bottom navigation view. We have a app:menu=”@menu/bottom_nav_bar” but have n’t created this menu so now we create this menu.

Step:-2 Creating Menu

Right click on Res folder, res -> new -> AndroidResourceDirectory . Then from the drop down select menu.

A new menu directory is created.

Right click on menu , menu -> new -> menuResourceFile .

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

    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_home_50dp"
        android:title="Home"/>

    <item
        android:id="@+id/nav_profile"
        android:icon="@drawable/ic_profile_50dp"
        android:title="Profile"/>

</menu>

These items are the menu items , I am here creating two menu items if you want more just copy-paste the item tag. But you should not create more than 5 items. But here is a problem we have write the icon here but we haven’t created the icons yet. so lets create the icons.

Step:-3 Creating icons

Right click on drawable , drawable -> new -> vector Asset

Choose both the icons and create them like this. what ever the name you choose change them in the menu icon option above. I normally use the icon size 30dp x 30dp ,

As now you can see the Bottom navigation is showing up. But its not doing anything , if you click it just do nothing.

Step:-4 Creating Fragments

Now its time to create fragments and see some changes on click of these bottom navigation button.

For this Let’s first create a package name fragments , where our MainActivity.java is located , Creating packages helps us to manage our different types of codes.

Right click on -> com.example.something(that you name here) -> new -> Package, name the package fragments(This name is general you can name it whatever you want) , Now right click on this fragment and new java class, And name the class HomeFragment(or whatever you like) , create as much class as you have menu items.

Now we are going to create layout files for these classes , Layout files are the files that show on screen and these java classes are the logic.

In res folder , Right click -> Layout -> new -> LayoutResourceFile.

Name the files fragment_home.xml ( These are convinient name not compulsory) Now create the same amount of layout files as java classes.

Now lets put some different text in all our file so we can identify when we change the menu which file we are on.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <TextView
        android:text="Home"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

change the android:text=”Put here any text” , so we can differentiate.

Now we are on to the last step , connected these java files to layout files and to the bottom navigation.

Step:-5 Working Bottom Navigation

Open the HomeFragment.java file

public class HomeFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_home,container,false);
        return view;
    }
}

we extend the HomeFragment with androidx.fragment.app.Fragment

import this carefully, If you are having any error please check this import. Here in OnCreateView method. we create a view inflater and pass the fragment_home that we create in layout as R.layout.fragment_home.

Do this for all your classes and now your java class is connected with the layout now its time to connect this fragment class to the bottom navigation.

So for this open the MainActivity.java file.

In onCreate() Method

        BottomNavigationView bottomNav = findViewById(R.id.bottom_nav);
        bottomNav.setOnNavigationItemSelectedListener(navListener);

        getSupportFragmentManager().

                beginTransaction().

                replace(R.id.fragment_container,
                        new HomeFragment()).

                commit();

Here what we just not have is navListener , This will listen our clicks on the navigation items. Outside the onCreate() method we will create this navListener

  private BottomNavigationView.OnNavigationItemSelectedListener navListener =
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                    Fragment selectedFragment = null;
                    switch (menuItem.getItemId()) {
                        case R.id.nav_home:
                            selectedFragment = new HomeFragment();
                            break;
                        case R.id.nav_profile:
                            selectedFragment = new ProfileFragment();
                            break;
                    }

                    getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,
                            selectedFragment).commit();
                    return true;
                }
            };

If you have more navigation items just add more switch casses

After this run the application , you’ll see that this works absolutely file. If you guys gets stuck in any problem , comment below I’ll try to answer your problems as soon as possible.