How To Implement Bottom Navigation in Android Studio - Hive Programmers

Greetings to everyone and welcome to my favorite science community online, StemSocial.

In today's special episode of my series Android App Development Tutorials for beginners, I'm going to teach on how to implement bottom Navigation bar feature.

Original Image Source by Firmbee from Pixabay

The bottom navigation bar feature is a simple User Interface design that allows users of your App to navigate through different activity pages with just a click of one of the buttons in the bar.

This is a common UI element in most IOS Apps and it's pretty easy to use.

If you're building an App that happens to have more than three different activity pages in the Main activity page, I would recommend using bottom navigation instead of slider tab layout.

In this tutorial, I'll show you exactly how to implement the bottom navigation bar in your Android App. Let's get ready for today's work guys.

Prerequisites

For the benefit of newcomers to Android App development or my series, I'll share with you the required softwares you need to be able to go through with this tutorial.

• Android Studio IDE - the platform on which we'll develop this and all other Android Apps.

• Java Development Kit, JDK - You need to install JDK correctly on your PC for your PC to be able to execute Java commands or codes.

• Physical Android Device or Emulator - After building the App, we'll need to test it either on an emulator or a physical Android device.

If you have all these checked out, you're absolutely ready to go through with this tutorial

Create A new Android Project

We'll start building our project by creating a new Android Studio project. Just open the Android Studio IDE and click on "Create A New Project"

Although we could have easily selected the "Bottom Navigation" template I want us to learn the basic codes involved so we'll choose an "Empty Activity" template for simplicity and to also allow us to build the entire App UI from ground up.

Click on the "Next" button after and set both the App name and package name of your Android project. Also select Java as the programming language and click on the "Finish" button when you're through with the project configuration.

Android Studio will load your new Project Space.

---

Add Dependencies

Now guys since we'll be implementing the bottom navigation element, we would need to make sure that the "Material" library is integrated in our project.

So guys to do this, first open your app's build.gradle file and add the following dependencies for the Bottom Navigation.

Here's how the dependency code should look like

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

When you're through with that, click on the "Sync" button to sync your project and apply the changes.

Design the Layout

The cool thing is that the material library comes equipped with a default Bottom navigation Element.

We don't have to create everything as a design, we can simply add the BottomNavigationView to our layout and we'll see the bottom navigation bar appear in our App at the bottom.

We'll be doing this inside our activity_main.xml layout file so open it and add the following code to create the Bottom Navigation.

Here's how the layout code should look like

<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=".MainActivity">

    <FrameLayout
        android:id="@+id/fragmentContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation_view"/>

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

Create Menu Items

Now guys just like we did with the slider tab, we need to create a new menu XML file which would contain all the items that would be displayed inside our Bottom navigation.

We don't have to add those items in the activity_main layout.

So guys go ahead and create a new XML resource file and name it bottom_navigation_menu.xml .

Please remember to create this file in the res/menu folder and not anywhere else.

So we can now add the menu items for your Bottom Navigation.

Here's how the code will look like for adding items to the bottom navigation bar

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:title="Home"
        android:icon="@drawable/ic_home"/>
    
    <item
        android:id="@+id/navigation_dashboard"
        android:title="Dashboard"
        android:icon="@drawable/ic_dashboard"/>
    
    <item
        android:id="@+id/navigation_notifications"
        android:title="Notifications"
        android:icon="@drawable/ic_notifications"/>
</menu>

Create Fragments

Now guys, since the bottom navigation bar allows user to navigate through different pages in the same single page, we would need to create fragment pages for each page that the user would like to navigate to through the bottom navigation bar.

For this tutorial example I'll only create three fragments and call them HomeFragment, DashboardFragment and lastly NotificationsFragment to represent each Bottom Navigation tab.

So when we click any of these tabs, it would have to go there.

I will not be showing the codes for each fragment so you'll probably have to DIY, do it yourself guys🥰.

If you're having troubles with it, you can refer to my previous blog on creating fragments or you can comment down below for support from me.

Implement Fragment Navigation

• We're going to handle the final step now guys

In your MainActivity.java, set up the fragment navigation and this should be done within the onCreate method.

Here's how your code should look like guys

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation_view);

        bottomNavigationView.setOnNavigationItemSelectedListener(item -> {
            Fragment selectedFragment = null;

            switch (item.getItemId()) {
                case R.id.navigation_home:
                    selectedFragment = new HomeFragment();
                    break;

                case R.id.navigation_dashboard:
                    selectedFragment = new DashboardFragment();
                    break;

                case R.id.navigation_notifications:
                    selectedFragment = new NotificationsFragment();
                    break;
            }

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

        // Set default selected fragment
        getSupportFragmentManager().beginTransaction().replace(R.id.fragmentContainer, new HomeFragment()).commit();
    }
}

Run Your App

Congratulations guys, you have been able to implement bottom navigation.

It's time to now run your app on an emulator or a physical Android device. When you App launches, you should see a Bottom Navigation layout with Home, Dashboard, and Notifications tabs.

Thank you so much for the time guys. I hope you enjoyed this episode as always.

Thank you all for the support. To my friends @stickupcurator or @stickupboys and everyone else

Have A Great Day And Catch You Next Time On StemSocial. Goodbye 👨‍💻

You Can Follow Me @skyehi For More Like This And Others