Set no item pre-selected in Bottom Navigation view

Question

I'm adding the new Bottom Navigation View from the material design library to a project, and I would like to have no pre selected item by default.

For now first item is selected by default.

I have used

mBottomNavigation.getMenu().getItem(0).setChecked(false);

but when doing it in for loop for all the menu item last item is selected again by default.

Is there a way we can achieve this?

I am just initializing the view and using the above code in loop — MRX, Jun 12 '17 at 11:52
for (int i = 0; i < mBottomNavigation.getMenu().size(); i++) { mBottomNavigation.getMenu().getItem(i).setChecked(false); } — MRX, Jun 12 '17 at 11:52

score 11 · Answer 1 · edited Apr 15 '19 at 20:47

11

Not sure about the proper way to achieve this but a work around will help-

setCheckable(false) for first item

navigation.getMenu().getItem(0).setCheckable(false);

item.setCheckable(true) inside onNavigationItemSelected()

public boolean onNavigationItemSelected(MenuItem item) {

switch (item.getItemId()) {
    case R.id.navigation_home:
        item.setCheckable(true);
        mTextMessage.setText(R.string.title_home);
        return true;
  }
  return false;
}

edited Apr 15 '19 at 20:47

Tamir Abutbul

7,301
7
25
53

answered Jun 13 '17 at 11:13

Ashish Kumar

409
1
4
12

ya its working fine..Thanks a lot.one up vote for you. – Mstack Aug 21 '17 at 09:42
2

@Ashish Kumar I am wondering why setChecked isnt working for 26 and above has to use setCheckable – Nisarg Dec 01 '17 at 10:39
Works but when using icons only, the text still shows, how can I remove the text from underneath? – Jay Smoke Apr 21 '19 at 00:52
@JaySmoke ```app:labelVisibilityMode="unlabeled"``` – AkshayT Jun 21 '19 at 02:21

score 7 · Answer 2 · answered Aug 11 '20 at 13:55

I came up with another solution

Just add one more item to your menu.xml file for example

This is my bottom_nav_menu.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/ic_home_black_24dp"
        android:title="@string/home" />

    <item
        android:id="@+id/navigation_cart"
        android:icon="@drawable/ic_shopping_cart_black_24dp"
        android:title="@string/cart" />

    <item
        android:id="@+id/navigation_wishlist"
        android:icon="@drawable/ic_favorite_border_black_24dp"
        android:title="@string/wish_list" />

    <item
        android:id="@+id/navigation_account"
        android:icon="@drawable/ic_person_black_24dp"
        android:title="@string/account" />

    
    <!-- Our invisible item -->

    <item
        android:id="@+id/invisible"
        android:visible="false"
        android:icon="@drawable/ic_person_black_24dp"
        android:title="@string/account" />

</menu>

Notice that I have added that item at last position and given it an id invisible and also set it's visibility to false.

Now, In the activity just set selected item id to this id like this

bottomNavMenu.setSelectedItemId(R.id.invisible);

Thanks

This is best answer i like. Don't play with framework handle with trick until framework has functionality of none selection. Thumbs Up — Rahul Mandaliya, Aug 20 '20 at 06:48
Works great! To concise the solution a bit, we can just use id and visible attribute. — Damercy, May 03 '21 at 16:04
Won't work if you already have 5 tabs as maximum allowed tabs are 5 for BottomNavigationView. Will throw a — arun, May 27 '21 at 02:36

score 3 · Answer 3 · edited Oct 21 '18 at 15:56

XML Code

<group android:checkableBehavior="single">
    <item              android:id="@+id/nav_item1" />
    <item              android:id="@+id/nav_item2" />
    <item              android:id="@+id/nav_item3" />
    <item              android:id="@+id/nav_item4" />
    <item
        android:id="@+id/nav_item5"
        android:icon="@drawable/icon_item5"
        android:title="Home"
        android:visible="false"/>
</group>

JAVA Code

bottomNavigationView.getMenu().getItem(4).setChecked(true);

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {

            switch (menuItem.getItemId()) {
                case R.id.nav_item1:
                    return true;

                case R.id.nav_item2:
                    return true;

                case R.id.nav_item3:
                    return true;

                case R.id.nav_item4:
                    return true;
            }

            // Default operation you want to perform

            return false;
        }
    });

score 2 · Answer 4 · answered Jan 04 '19 at 23:24

If anyone interested in a nice Kotlin solution, here's mine:

//disable the preselected first item
//<navigation> is the bottom navigation view

navigation.menu.getItem(0).isCheckable=false

Then in the selection listener, make sure that you'll show the user what he selected

BottomNavigationView.OnNavigationItemSelectedListener { item: MenuItem ->
        when (item.itemId) {

            R.id.option1 -> {
                item.isCheckable=true //here is the magic

                //notify the listener
                return@OnNavigationItemSelectedListener true
            }
            R.id.option2 ->{
               item.isCheckable=true

                //notify the listener
                return@OnNavigationItemSelectedListener true
            }
            R.id.option3 ->{
                //go to forgot user fragment
                item.isCheckable=true

                //notify the listener
                return@OnNavigationItemSelectedListener true
            }

            else -> false
        }


    }

Finally , make a selector color so you can change easily in color

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

And add the selector to the navigation view

 app:itemIconTint="@color/navigation_colors"
 app:itemTextColor="@color/navigation_colors"

Now, if you need to change the colours, just change the selector.

Sanal · Answer 5 · 2017-06-16T10:15:38.427

1

Add this line in your onCreate method

mBottomNavigation.setSelectedItemId("ID OF YOUR MENU ITEM");

edited Jun 16 '17 at 10:15

answered Jun 16 '17 at 10:04

Sanal

418
6
17

score 1 · Answer 6 · edited Sep 09 '18 at 10:09

1

Use setCheckable instead of setChecked(false) in line:

mBottomNavigation.getMenu().getItem(0).setCheckable(false);

It works for me.

edited Sep 09 '18 at 10:09

CKE

1,533
19
18
29

answered Sep 09 '18 at 06:30

kansagra kartik

11
1

score 0 · Answer 7 · answered Jun 16 '17 at 10:19

0

I've created a sample project and by default there is no checked item. Just make sure you don't have any navigationView.setCheckedItem(R.id.id) on your code.

answered Jun 16 '17 at 10:19

Daniel Luque

116
1
8

score 0 · Answer 8 · answered Nov 10 '22 at 01:56

My solution was to select a different tab and immediately after select the tab I initially wanted.

bottomNavigationView.selectedItemId = R.id.dummy_tab
bottomNavigationView.selectedItemId = R.id.tab_to_select

The setOnItemReselectedListener disables reselect tab selections, but the navigationView has a default tab selected and don't render after creation because is invoking setOnItemReselectedListener

Tried the invisible solution but didn't work with programmatically bottomMenu creation.

score 0 · Answer 9 · edited Jan 05 '23 at 08:02

Old question, but if you still facing issue - just use this:

bottomNavigationView.getMenu().getItem(0).setCheckable(false);

And it:

bottomNavigationView.setOnItemReselectedListener(new NavigationBarView.OnItemReselectedListener() {
    @Override
    public void onNavigationItemReselected(@NonNull MenuItem item) {
        if (item.getItemId() == R.id.navigation_home) {
            item.setCheckable(true);
        }
    }
});

score -1 · Accepted Answer · answered Aug 21 '17 at 11:18

I combined the solution mentioned by @Ashish Kumar and resolved my query and

private void customizeBottomBar() {
        mBottomNavigation.getMenu().getItem(0)
                .setIcon(ContextCompat.getDrawable(activity, R.drawable.ic_reserve_normal));
        changeMenuItemCheckedStateColor(mBottomNavigation, getUnCheckedColor(), getUnCheckedColor());
    }

/**
   * Method to change the color state of bottom bar view
   * @param bottomNavigationView - BottomNavigation view instance
   * @param checkedColorHex int value of checked color code
   * @param uncheckedColorHex int value of unchecked color code
   */
  void changeMenuItemCheckedStateColor(BottomNavigationView bottomNavigationView,
      int checkedColorHex, int uncheckedColorHex) {

    int[][] states = new int[][]{
        new int[]{-android.R.attr.state_checked}, // unchecked
        new int[]{android.R.attr.state_checked}, // checked
    };

    int[] colors = new int[]{
        uncheckedColorHex,
        checkedColorHex
    };

    ColorStateList colorStateList = new ColorStateList(states, colors);
    bottomNavigationView.setItemTextColor(colorStateList);
    bottomNavigationView.setItemIconTintList(colorStateList);

  }

Set no item pre-selected in Bottom Navigation view

10 Answers10

Linked