Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable BottomNavigationView shift mode?

Implementation of BottomNavigationView has condition: when there is more than 3 items then use shift mode.

At this moment you cannot change it through existing API and the only way to disable shift mode is to use reflection.

You'll need helper class:

import android.support.design.internal.BottomNavigationItemView;
import android.support.design.internal.BottomNavigationMenuView;
import android.support.design.widget.BottomNavigationView;
import android.util.Log;
import java.lang.reflect.Field;

public class BottomNavigationViewHelper {
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }
}

And then apply disableShiftMode method on your BottomNavigationView, but remember if you are inflating menu view from your code, you have to execute it after inflating.

Example usage:

BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation_bar);
BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);

PS.

Remember, you'll need to execute this method each time you change menu items in your BottomNavigationView.

UPDATE

You also need to update proguard configuration file (e.g. proguard-rules.pro), code above uses reflection and won't work if proguard obfuscate the mShiftingMode field.

-keepclassmembers class android.support.design.internal.BottomNavigationMenuView { 
    boolean mShiftingMode; 
}

Thanks Muhammad Alfaifi for pointing this issue and providing snippet.

UPDATE 2

As Jolanda Verhoef pointed out the new Support library (28.0.0-alpha1) and also the new Material Components library (1.0.0-beta01) offers a public property which can be used to manipulate the shifting mode over 3 menu items.

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    app:labelVisibilityMode="labeled"
    ... 
/>

In Material Components library it also applies if there are 5 menu items.

UPDATE 3

As @ThomasSunderland also pointed out, you can set this property to false app:itemHorizontalTranslation="false" without Enabled postfix to disable shifting animation.

you can check the full guide to styling the BottomNavigation here


Since support library 28.0.0-alpha1:

<android.support.design.widget.BottomNavigationView
    app:labelVisibilityMode="labeled" />

To disable the text animation you can also use this in your dimens.xml file:

<dimen name="design_bottom_navigation_active_text_size">12sp</dimen>

You might also need to add this in your manifest :

tools:override="true"

You can now use app:labelVisibilityMode="[labeled, unlabeled, selected, auto]" in 28-alpha

  • labeled will keep all labels visible.
  • unlabeled will show only icons.
  • selected will only show the label for the selected item and shift items.
  • auto will choose labeled or selected based on the number of items you have. labeled for 1-3 items and selected for 3+ items.