BottomNavigationView creates a bottom navigation bar which makes it easy to explore. We shall continue this tutorial for Badge.

BottomNavigationView
BottomNavigationView

Now create an object of BottomNavigationView

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

We shall implement the interface class of OnNavigationItemSelectedListener. After implementing interface class, now we shall set the listener to bottomNavigationView object.

bottomNavigationView.setOnNavigationItemSelectedListener(this);

From bottomNavigationView, we shall get the BadgeDrawable object, with the help of BadgeDrawable class, we can set badge number and can explore it in an easy way. We can customize badge color, background-color and it’s visibility. Here is my full code of MainActivity java class

package com.becody.bottomnavigationmaterial;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

import com.google.android.material.badge.BadgeDrawable;
import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BottomNavigationView bottomNavigationView = findViewById(R.id.btmNavView);
        bottomNavigationView.setOnNavigationItemSelectedListener(this);
        Menu menu = bottomNavigationView.getMenu();
        MenuItem item = menu.findItem(R.id.menu_home);
        BadgeDrawable badge = bottomNavigationView.getOrCreateBadge(item.getItemId());
        badge.setNumber(3);
    }


    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.menu_home:
                Toast.makeText(this, "Home Screen", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.menu_history:
                Toast.makeText(this, "History Screen", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.menu_search:
                Toast.makeText(this, "Search Screen", Toast.LENGTH_SHORT).show();
                return true;
            case R.id.menu_setting:
                Toast.makeText(this, "Setting Screen", Toast.LENGTH_SHORT).show();
                return true;
        }
        return false;
    }
}

1- setNumber(): This method will set the number in the badge.
2- setBackgroundColor(): By using this method, we can set background color of badge.
3- setBadgeTextColor(): By this method, we can set the text color of badge number.
4- setVisibility(): With the best-practice concept, when notification will come then we will make it visible by this method.
5- setMaxCharacterCount(): By this method, we can set maximum counts of badge numbers.
In Short, we can explore the badge in an easy way.

Thanks for reading my blog about BottomNavigationView. You can download the full source code.

Author

Write A Comment