AndroidX : BottomNavigationBar with Constraint Layout and Fragments

Implementing BottomNavigationBar for your android app is quite easy. You can find a lot of tutorials in different sites and in youtube, most of them do not support androidX because there are some changes in libraries and implementing design in constraint layout.So this one is for AndroidX.

If you have already created your project skip to Step 4.

Step 1 : First Create a new android project in your android studio.

Step 2: Choose Empty Activity

Step 3 : Now give name to your project

Step 4: Migrate Your Project to AndroidX (https://developer.android.com/jetpack/androidx/migrate)

Step 5 : Now, go to your build.gradle (Module:App).

Add this line inside the dependencies tag.

implementation 'com.google.android.material:material:1.1.0-alpha10'

Step 6 : (Creating Navbar)

Now, in-order to add icons, add new Vector Asset in your drawable.

Adding vector asset to drawable folder

Choose and add icons you want.

Choosing from different Icons

After adding icons, go to res>New>Android Resource Directory to create new directory.

Name the new Directory “menu” and select menu in the Resource type section. And Press OK.

Now inside the Directory Menu, add new MenuResource File. menu>New>Menu Resource File

Name it “bottom_navigation”

Press Ok. This will create a xml file named bottom_navigation.xml.

Inside this file you have to put all the icons you want in your navigation bar inside <item></item> tag separately.

For Example, I am adding home, list, camera and notification icons here:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/nav_icon1"
    android:icon="@drawable/ic_home_black_24dp"
    android:title="Home"/>
<item
    android:id="@+id/nav_icon2"
    android:icon="@drawable/ic_format_list_bulleted_black_24dp"
    android:title="List"
    />
<item
    android:id="@+id/nav_icon3"
    android:icon="@drawable/ic_camera_alt_black_24dp"
    android:title="Scan"
    ></item>
<item
    android:id="@+id/nav_icon4"
    android:icon="@drawable/ic_notifications_active_black_24dp"
    android:title="Notification"
    ></item>

</menu>

Here in the “android:icon” put the path of your icon and give it a title.

After completing this step you will have a Menu bar.

Step 7 :Now go to you activity_main.xml and add the BottomNavigationBar and give it a id.

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="?android:attr/windowBackground"

    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/bottom_navigation" />

Now, to implement fragments for each of the bottom Navigation item. Create a FrameLayout in the activity_main.xml. Put this FrameLayout above the BottomNavigationBar code.

Note : Remember to constraint its bottom to the top of the nav bar.

<FrameLayout
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="0dp"

    app:layout_constraintBottom_toTopOf="@+id/bottom_navigation"
    app:layout_constraintTop_toTopOf="parent" />

Now Create Fragments for each of the icons. From com.example.yourproject > New > Fragments

Now,Switching between Navbar items

add ItemSelected action for each icons by putting them in switch and case. Put this code in your MainActivity.java

private BottomNavigationView.OnNavigationItemSelectedListener itemSelectedListener =
        new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                Fragment selectedFragment = null;

                switch (item.getItemId()){
                    case R.id.nav_icon1:
                        selectedFragment = new ListFragment();
                        break;
                    case R.id.nav_icon2:
                        selectedFragment = new HomeFragment();
                        break;
                    case R.id.nav_icon3:
                        selectedFragment = new CameraFragment();
                        break;
                    case R.id.nav_notification:
                        selectedFragment = new NotificationFragment();
                        break;

                }

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

                return true;

            }
        };

Now you should be able to change between different fragments from your bottom Navigation bar.

BottomNavigationBar With Fragments and Constraint Layout.