How to create bottom Navigation Bar in Android

Hello Android Lovers, In here I am going to discuss “How to create bottom Navigation Bar in Android”. First of all you need to install Android studio, if you are a new user to Android. (Click here to learn how to install Android Studio) UI design for android.

Okay then Let’s start the article.

Let’s create the menu file first

Create a folder called menu. Inside the res tab. You can right click on the res tab and go to new. Then choose “Android Resource File”. Change the Resource type as Menu and give a name. I am going to name as menu.

After that, right click on the menu folder. Then create a new menu resource file. I am going to name it as “bottom_navigation_menu”. Here is the code for the menu file.

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

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

    <item
        android:id="@+id/ic_category"
        android:icon="@drawable/ic_category"
        android:title="Categories">
    </item>
    <item
        android:id="@+id/ic_add"
        android:icon="@drawable/ic_plus"
        android:title="Add Journey">
    </item>
    <item
        android:id="@+id/ic_device"
        android:icon="@drawable/ic_notification"
        android:title="Notifications">
    </item>
    <item
        android:id="@+id/ic_profile"
        android:icon="@drawable/ic_profile"
        android:title="Me">
    </item>
</menu>

Let’s Create the Layout file

let’s create the Layout file first. right click on the Layout folder and go to “new”. then choose “Layout Resource File”. I am going to rename this as “bottom_navigation_view”

After that go to build.gradle(app) file and paste below code inside the dependencies. Then sync.

  implementation 'com.google.android.material:material:1.2.0-alpha06'
   api 'com.theartofdev.edmodo:android-image-cropper:2.8.+'

That’s because we are going to use android materials. Here is the code forthe layout file.

<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavViewBar"
            android:layout_width="match_parent"
            android:elevation="6dp"
            android:layout_height="match_parent"
            android:background="#ffffff"
            app:menu="@menu/bottom_navigation_menu">

        </com.google.android.material.bottomnavigation.BottomNavigationView>

    </RelativeLayout>
</merge>

Lets create the Java File

In your java file, create a method called “setupBottomNavBar”. In here we are going to code what activities redirect what menu item click after. Here is the code.

 private void setupBottomNavBar(){
        BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottomNavViewBar);

        Menu menu = bottomNavigationView.getMenu();
        MenuItem menuItem = menu.getItem(ACTIVITY_NUM);
        menuItem.setChecked(true);


        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.ic_home:
                        break;
                    case R.id.ic_category:
                        Intent ExerciseIntent = new Intent(MainActivity.this, CategoryActivity.class);
                        startActivity(ExerciseIntent);
                        finish();
                        break;
                    case R.id.ic_add:
                        Intent runIntent = new Intent(MainActivity.this, ComingSoon.class);
                        startActivity(runIntent);
                        finish();
                        break;
                    case R.id.ic_device:
                        Intent deviceIntent = new Intent(MainActivity.this, NotificationActivity.class);
                        startActivity(deviceIntent);
                        finish();
                        break;
                    case R.id.ic_profile:
                        Intent profileIntent = new Intent(MainActivity.this, AccountSettings.class);
                        startActivity(profileIntent);
                        finish();
                        break;
                }

                return false;
            }
        });
    }

That’s it. Thank you for reading “How to create bottom Navigation Bar in Android” article.

Do you want to create a music player – Refer “How to create Music Player with Firebase“

If you want to familiar to Android Studio – use “Let’s familiar with Mobile Application Development“.

Android Fragment – “Android Fragments 2021“

Refer Android Firebase Article – https://builditmasters.com/category/android-studio-firebase-tutorial/

If you are a newbie to Android. Follow and refer articles. Click below link to get started.