top of page
Search
  • Writer's pictureMeghan Gill
    • Jul 12, 2021
    • 4 min read

Android BottomNavigationView Example Tutorial


Bottom navigation bars make it easy for users to explore and switch between top-level views in a single tap. They should be used when an application has three to five top-level destinations.


The bar contents can be populated by specifying a menu resource file. Each menu item title, icon and enabled state will be used for displaying bottom navigation bar items.


Attributes


Color of the icon when inactive

app:itemIconTint="@color/black"


Color of the text when inactive

app:itemTextColor="@color/black"


To show text labels at all times

app:labelVisibilityMode="labeled"

BottomNavigationView Example App



Step 1: Create a new Android Studio project with an Empty Activity. Name the project BottomNavigationExample.

The Save location should be a place that makes sense on your computer. If you click on the open folder you can choose a location. Choose Java. Pick a minimum SDK of API 21: Android 5.0 (Lollipop). You do not need any legacy android support libraries.


Add a menu directory


Step 2: Create a menu directory by right clicking on res, selecting New, Android Resource Directory. Name it menu and the root should be menu.


Add a menu resource


Step 3: Add a menu resource named bottom_Navigation_menu.xml. it should contain 4 items: Home, Explore, Subscriptions, Library.




Menu resource bottom_navigation_view.xml:


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/outline_home_black_48"
        android:title="Home"/>

    <item
        android:id="@+id/navigation_explore"
        android:icon="@drawable/outline_explore_black_48"
        android:title="Explore"/>

    <item
        android:id="@+id/navigation_subscriptions"
        android:icon="@drawable/outline_subscriptions_black_48"
        android:title="Subscriptions"/>

    <item
        android:id="@+id/navigation_library"
        android:icon="@drawable/outline_video_library_black_48"
        android:title="Library"/>

</menu>

Download icons for bottom navigation bar


Step 4: Download an Android material icon for each item from the Material Design Resources.




Open the zip file, choose an icon and copy (command C) and paste it (command V) into the drawable folder of res.


Create a bottom navigation view


Step 5: In activity_main.xml create a Bottom navigation View. Make sure to give the constraintLayout an id. We will need to use it in code when switching fragments. Use the code below:


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:id="@+id/container">

 <com.google.android.material.bottomnavigation.BottomNavigationView
     android:id="@+id/bottomNavigationView"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:menu="@menu/bottom_navigation_view"
     app:layout_constraintBottom_toBottomOf="parent"
     app:itemIconTint="@color/black"
     app:itemTextColor="@color/black"
     app:labelVisibilityMode="labeled"
     />

</androidx.constraintlayout.widget.ConstraintLayout>

Create a fragment for each menu item


Step 6: Create a fragment to match each icon: HomeFragment, ExploreFragment, SubscriptionsFragment, LibraryFragment.


To create a fragment right click on your package name, select

New > Fragment > Fragment(Blank).


Repeat for each fragment. A layout will automatically be generated for each fragment.


Step 7: Create a package named fragments and place your fragments inside.



MainActivity.java


Step 8: Declare a variable for bottomNavigationView and find it in code. 


BottomNavigationView bottomNavigationView;

bottomNavigationView = findViewById(R.id.bottomNavigationView);

Check the gradle (Module)


Step 9: In order to set an setOnItemSelectedListener() to the bottom navigation bar your gradle must include the latest material dependency. Currently, that's:


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

Set a Listener on the bottom navigation


Step 10: In MainActivity.java set an setOnItemSelectedListener() to the bottom navigation bar.


For the parameter type new then control + space to implement the interface.

bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        return false;
    }
});


Switch between fragments


Step 11:Create a switch case statement to switch fragments in the container. We are also naming a new method here, openFragment(). At this point it will show as an error, but no worries. We'll write the method's implementation momentarily.


bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.navigation_home:
                openFragment();
                return true;
            case R.id.navigation_explore:
                openFragment();
                return true;
            case R.id.navigation_subscriptions:
                openFragment();
                return true;
            case R.id.navigation_library:
                openFragment();
                return true;
        }
        return false;
    }
});


Create the openFragment( ) method


Step 12: To create the openFragment() method hover over an incidence of openFragment() in the switch case statement. Choose Create method 'openFragment'. Implement it in MainActivity.


The parameter should be a fragment. It will use the FragmentTransaction helper class to switch fragments on screen.



private void openFragment(Fragment fragment) {
    Log.d(TAG, "openFragment: ");
    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
    //this is a helper class that replaces the container with the fragment. You can replace or add fragments.
    transaction.replace(R.id.container, fragment);
    transaction.addToBackStack(null); //if you add fragments it will be added to the backStack. If you replace the fragment it will add only the last fragment
    transaction.commit(); // commit() performs the action
}

Step 13: Update the switch case statement with parameters that reflect the fragment to which we are switching.


bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.navigation_home:
                openFragment(HomeFragment.newInstance("",""));
                return true;
            case R.id.navigation_explore:
                openFragment(ExploreFragment.newInstance("",""));
                return true;
            case R.id.navigation_subscriptions:
            openFragment(SubscriptionsFragment.newInstance("",""));
                return true;
            case R.id.navigation_library:
                openFragment(LibraryFragment.newInstance("", ""));
                return true;
        }
        return false;
    }
});

Make the fragments fun


Your bottom navigation view works! It all looks the same though. Let's make it clear we've navigated to a new fragment.


Step 14: Choose how you would like to distinguish your fragment. A background color? Text? How about both?


Choose any color you'd like and have fun. Here are some ideas.

fragment_explore.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragments.ExploreFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Explore fragment" 
        android:background="#B1DBD7"/>

</FrameLayout>

fragment_home.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragments.HomeFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Home fragment"
        android:background="#b5dbb1"/>

</FrameLayout>

fragment_library.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragments.LibraryFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Library fragment"
        android:background="#d7b1db"/>

</FrameLayout>

fragment_subscriptions.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragments.SubscriptionsFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Subscriptions fragment"
        android:background="#dbb1b5"/>

</FrameLayout>


9,167 views1 comment

Recent Posts

See All
bottom of page