In this tutorial, I will explain how we can create a BottomNavigationView with Material Design? By BottomNavigationView, we can easily switch from one destination to another destination. BottomNavigationView provides an easy way to switch between fragments or activity. If your project has three to five level of navigation, so you should use BottomNavigationView.

Please do following changes in your build.gradle file. Add Android material library.

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

Now change your Theme to Material Theme something like that, do changes in your style file

 <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

Now let’s create a BottomNavigationView. Include BottomNavigationView in activity_main.xml file

<?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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bottom Navigation View"
        android:textSize="20sp"
        android:textColor="@android:color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="0dp"
        app:menu="@menu/menu_bottom_bar"
        app:labelVisibilityMode="auto"
        app:backgroundTint="@color/colorPrimary"
        android:layout_height="wrap_content"
        app:itemIconTint="@drawable/bottom_navigation_colors"
        app:itemTextColor="@drawable/bottom_navigation_colors"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

BottomNavigationView provides the following attributes to us for customization.

  • app_menu: by this attribute, we can add a menu resource file to display the navigation items with icon and text.
  • app_backgroundTine: We can set the background color of the navigation bar.
  • app_itemIconTint: By this attribute, we can set the colors or drawable selector of navigation items icons.
  • app_itemTextColor: Same like itemIconTine, we can set the colors and drawable selector of the navigation items text.
  • app_lableVisibility: This attribute provides three visibility state of navigation items and icons. If the visibility mode will be auto, then the icon and text will be the highlight of the selected navigation item and text of unselected navigation items. If the visibility mode will be labeled then both icon and text will show all navigation items. If in case of unlabeled visibility mode. the only icon will display of navigation items.
Auto Visibility Mode

Auto visibility mode of bottom navigation bar

Labeled Visibility Mode

Labeled Visibility Mode

UnLabeled Visibility Mode

Unlabeled

Now create a menu file with icon and title. Here is my menu_bottom_bar.xml file

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:title="Home" android:icon="@drawable/ic_home" />
    <item android:title="Search" android:icon="@drawable/ic_search" />
    <item android:title="History" android:icon="@drawable/ic_history"/>
    <item android:title="Setting"  android:icon="@drawable/ic_setting"/>
</menu>

I have created the selector state of navigation items.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_checked="true"
        android:color="@android:color/white" />
    <item
        android:state_checked="false"
        android:color="@android:color/black" />
</selector>

now set activity_main.xml file into ActivityMain.java class and execute your code

package com.becody.bottomnavigationmaterial;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

If you want to see how to add badge in navigation item, so click here to read the tutorial about the badge.

Download Source Code

 

Author

Write A Comment