BottomNavigationView in Android

BottomNavigationView makes it easy for users to explore and switch between top-level views in a single tap. There should be a minimum of 3 top-level views and a maximum of 5. If Destinations are more than 5 than use Navigation Drawer. When the user taps on the icon it will change the top-level view accordingly. In a Music Player app to switch between Home, Album, and Radio, it can be used. Google plus app uses this widget to switch between different views. Instagram uses BottomNavigationView to switch between Feeds, Search, add, Like, and Profile. This is how a BottomNavigationView looks like.

Some Advantages and Disadvantages of BottomNavigationView are:-
Advantages:

  • It is Top-level destinations that can be accessible from anywhere in the app.
  • It is an Material Design Component.
  • Easy to use.

Disadvantages:

  • It is used only when we have only three to five Destinations.
  • Can only be used with Mobile and Tablets.
  • Length of Text Labels should be less.
  • It should be used when the user will spend more than 90% of the time in an app in same window.
  • Using with TabLayout may cause confusion to the user.

Approach:



  1. Add the support Library in build.gradle file and add dependency in the dependencies section. This library has the inbuilt widget for Bottom Navigation view so through this library it can be directly added.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

           
    dependencies {         
           implementation 'com.google.android.material:material:1.1.0'         
    }

    chevron_right

    
    

  2. Now create a new Android Resource Directory. Right-click on res folder and select Android Resource Directory. Make sure to select resource type as menu.
  3. Now create bottom_menu.xml file and add the following code. In this file we add title, id and icon of our menu for BottomNavigationView.

    bottom_menu.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
        <item
            android:id="@+id/algorithm"
            android:title="Algorithm"
            android:icon="@drawable/ic_algorithm"
            />
        <item
            android:id="@+id/course"
            android:title="Course"
            android:icon="@drawable/ic_course"
            />
        <item
            android:id="@+id/profile"
            android:title="Profile"
            android:icon="@drawable/ic_account"
            />
    </menu>

    chevron_right

    
    

  4. Create a AlgorithmFragment by right click on java package, select new -> Fragment(Blank).
  5. Follow above step for CourseFragment and LoginFragment.
  6. Now add the following code in AlgorithmFragment.xml file. Here a TextView is added in the layout.

    fragment_algorithm.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

          
    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Fragments.AlgorithmFragment"
        android:orientation="vertical">
      
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Algorithm"
            android:textSize="30sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    chevron_right

    
    

  7. Now add the following code in CourseFragment.xml file. Here a textView is added in the layout.

    fragment_course.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

          
    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Fragments.AlgorithmFragment"
        android:orientation="vertical">
      
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Course"
            android:textSize="30sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    chevron_right

    
    

  8. Now add the following code in ProfileFragment.xml file. Here a textView is added in the layout.

    fragment_profile.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

          
    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Fragments.AlgorithmFragment"
        android:orientation="vertical">
      
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Algorithm"
            android:textSize="30sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    chevron_right

    
    

  9. Now add the following code in activity_main.xml file. In this file we add BottomNavigationView to our layout.

    activity_main.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
      
        <FrameLayout
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/bottom_navigation"
            />
      
        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_alignParentBottom="true"
            android:layout_gravity="bottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:menu="@menu/bottom_menu"
            android:background="@color/colorPrimary"
            app:itemIconTint="@android:color/white"
            app:itemTextColor="@android:color/white"/>
      
    </RelativeLayout>

    chevron_right

    
    

  10. Now add the following code in MainActivity.java file. In this file we add OnNavigationItemSelectedListener which helps to navigation between the fragments. It will switch the fragment when the user tap on icon.

    activity_main.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    package org.geeksforgeeks.gfgbottomnav;
      
    import android.os.Bundle;
    import android.view.MenuItem;
      
    import androidx.annotation.NonNull;
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.fragment.app.Fragment;
      
    import com.google.android.material.bottomnavigation.BottomNavigationView;
    import com.madhav.maheshwari.gfgbottomnav.Fragments.AlgorithmFragment;
    import com.madhav.maheshwari.gfgbottomnav.Fragments.CourseFragment;
    import com.madhav.maheshwari.gfgbottomnav.Fragments.ProfileFragment;
      
    public class MainActivity extends AppCompatActivity {
      
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
      
            BottomNavigationView bottomNav = findViewById(R.id.bottom_navigation);
            bottomNav.setOnNavigationItemSelectedListener(navListener);
        }
        private BottomNavigationView.OnNavigationItemSelectedListener
            navListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {
                  @Override
                  public boolean onNavigationItemSelected(
                      @NonNull MenuItem item)
                  {
                      // By using switch we can easily get
                      // the selected fragment
                      // by using there id.
                      Fragment selectedFragment = null;
                      switch (item.getItemId()) {
                      case R.id.algorithm:
                          selectedFragment = new AlgorithmFragment();
                          break;
                      case R.id.course:
                          selectedFragment = new CourseFragment();
                          break;
                      case R.id.profile:
                          selectedFragment = new ProfileFragment();
                          break;
                      }
                      // It will help to replace the one fragment to other.
                      getSupportFragmentManager()
                          .beginTransaction()
                          .replace(
                              R.id.fragment_container,
                              selectedFragment)
                          .commit();
                      return true;
                  }
              };
    }

    chevron_right

    
    

    1. Output:

      Reference: https://material.io/components/bottom-navigation#anatomy

      Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




      My Personal Notes arrow_drop_up


      If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

      Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


      Article Tags :
      Practice Tags :


      2


      Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.