How to dynamically hide a menu item in BottomNavigationView?

Viewed 30237

I want to hide a menu item of BottomNavigationView dynamically based on some conditions. I tried the following but it is not working.

mBottomNavigationView.getMenu()
            .findItem(R.id.item_name)
            .setVisible(false);

mBottomNavigationView.invalidate();
9 Answers

You can hide a menu item by setting isVisible as false with using suggested property isVisible in Kotlin. But this makes your menu item removed from BottomNavigationView on Android 9 as my observation.

bottomNavigation.menu.findItem(R.id.menu_item).isVisible = false

If you use a single color for your bottom navigation view's background you can use similar approach to save the menu items in place. As an example the one in the right edge.

// 0x000000 is black as an example
bottomNavigation.menu.findItem(R.id.menu_item).icon = ColorDrawable(0x000000)
// and disable for the actions
bottomNavigation.menu.findItem(R.id.menu_item).isEnabled = false

Try this:

navView.getMenu().findItem(R.id.your_menu_item_id).setVisible(true);
navView.getMenu().findItem(R.id.your_menu_item_id).setVisible(false);

setVisibility should work for you. FYI, below example is in kotlin.

bottomNavigationView.menu.findItem(R.id.navigation_item_two).isVisible = false

In Kotlin you can use this line of code:

 mainActivitbinding.bottomNav.menu.removeItem(R.id.watch_list_tab)

It works for me in kotlin like this:

bottomNavigationView.rootView.findViewById<View>(R.id.nav_nearestRestaurant).visibility = View.GONE

But the thing is that if you click in another item, the hidden item appears again, because the bottom bar reload its appearance when show you the active item (so if in your xml menu, its visible, appears visible again (I think, to me happen like that))

In my case, I wanted to hide the toolbar text and the icons/titles of BottomNavigationView items in the authorization fragment, which handles the initial loading of my application. When it determines that the user is authenticated and fetches their profile from the database, I load the feed fragment, which fetches data from the database and displays it to the user. What I did was add the following method to the activity that creates the layout elements and call it from its fragments, passing in a boolean to determine visibility of the items.

public void setBottomNavigationViewItemsVisibility(boolean value) {
    if (this.bottomNavigationView != null) {
        this.bottomNavigationView.setVisibility(View.VISIBLE);
        Menu menu = this.bottomNavigationView.getMenu();
        if (value) {
            int[] icons = {R.drawable.ic_event_white_24dp, R.drawable.ic_explore,
                    R.drawable.ic_store_white_24dp, R.drawable.ic_notifications_white_24dp};
            int[] titles = {R.string.feed, R.string.explore, R.string.finder, R.string.notifications};
            for (int i = 0; i < menu.size(); i++) {
                menu.getItem(i).setIcon(icons[i]);
                menu.getItem(i).setTitle(titles[i]);
                menu.getItem(i).setEnabled(true);
            }
        } else {
            for (int i = 0; i < menu.size(); i++) {
                menu.getItem(i).setIcon(R.drawable.ic_empty);
                menu.getItem(i).setTitle(R.string.title_empty);
                menu.getItem(i).setEnabled(false);
            }
        }
    }
}

We declare an array of drawable ids and an array of title ids to match what we have declared in the menu XML file. If true, we iterate through the menu items and set their icon, title, and their state to default values. If false, we set the icon to a transparent icon (removing the icon affects its size), set the toolbar title to an empty string, and disable it.

BottomNavigationView Menu:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottom_navigation_view_home">

    <item
        android:id="@+id/action_feed"
        android:enabled="true"
        android:icon="@drawable/ic_event_white_24dp"
        android:title="@string/feed"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_explore"
        android:enabled="true"
        android:icon="@drawable/ic_explore"
        android:title="@string/explore"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_finder"
        android:enabled="true"
        android:icon="@drawable/ic_store_white_24dp"
        android:title="@string/finder"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_notifications"
        android:enabled="true"
        android:icon="@drawable/ic_notifications_white_24dp"
        android:title="@string/notifications"
        app:showAsAction="ifRoom" />
</menu>

Empty Icon (ic_empty.xml):

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:fillColor="#00FFFFFF"
        android:pathData="M8" />
</vector>

Empty Title (title_empty):

<string name="title_empty" />
Related