Set no item pre-selected in Bottom Navigation view
Asked Answered
V

10

13

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?

Vullo answered 12/6, 2017 at 11:39 Comment(3)
Please share your code.Lenis
I am just initializing the view and using the above code in loopVullo
for (int i = 0; i < mBottomNavigation.getMenu().size(); i++) { mBottomNavigation.getMenu().getItem(i).setChecked(false); }Vullo
V
-1

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);

  }
Vullo answered 21/8, 2017 at 11:18 Comment(0)
L
12

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

  1. setCheckable(false) for first item

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

  2. 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;
    }
    
Lenis answered 13/6, 2017 at 11:13 Comment(4)
ya its working fine..Thanks a lot.one up vote for you.Craal
@Ashish Kumar I am wondering why setChecked isnt working for 26 and above has to use setCheckableSunlit
Works but when using icons only, the text still shows, how can I remove the text from underneath?Cointreau
@JaySmoke app:labelVisibilityMode="unlabeled"Amenity
R
9

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

Reclinate answered 11/8, 2020 at 13:55 Comment(3)
This is best answer i like. Don't play with framework handle with trick until framework has functionality of none selection. Thumbs UpSelfwill
Works great! To concise the solution a bit, we can just use id and visible attribute.Moulmein
Won't work if you already have 5 tabs as maximum allowed tabs are 5 for BottomNavigationView. Will throw aMonopolize
G
3

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;
        }
    });
Gwendolyngweneth answered 21/10, 2018 at 15:6 Comment(0)
M
2

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.

Mcatee answered 4/1, 2019 at 23:24 Comment(0)
R
1

Add this line in your onCreate method

mBottomNavigation.setSelectedItemId("ID OF YOUR MENU ITEM");
Requiem answered 16/6, 2017 at 10:4 Comment(0)
H
1

Use setCheckable instead of setChecked(false) in line:

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

It works for me.

Hyphen answered 9/9, 2018 at 6:30 Comment(0)
K
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.

Kendyl answered 16/6, 2017 at 10:19 Comment(0)
E
0

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.

Explicit answered 10/11, 2022 at 1:56 Comment(0)
R
0

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);
        }
    }
});
Redundancy answered 3/1, 2023 at 18:41 Comment(0)
V
-1

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);

  }
Vullo answered 21/8, 2017 at 11:18 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.