4

I was trying to implement bottom navigation bar. Here I am facing a problem when the menu item getting in zoom on click and that leads some title text truncating from the bar.

Like screenshot given enter image description hereenter image description here

Is there any solution to prevent from this zooming effect?

shafeeq
  • 1,499
  • 1
  • 14
  • 30

5 Answers5

3

Text labels provide short, meaningfully definitions to bottom navigation icons. Avoid long text labels as these labels do not truncate or wrap.

According to guidelines, you shouldn't use long texts.

enter image description here

Source

Oğuzhan Döngül
  • 7,856
  • 4
  • 38
  • 52
  • 1
    great, but in my case all five options are mandatory. And roughike has option to customize this so that all the options will be visible fine – shafeeq Jul 24 '17 at 13:27
2

All you have to do is override the dimension for design_bottom_navigation_active_text_size in your dimens.xml file.

<dimen name="design_bottom_navigation_active_text_size" tools:override = "true" >12sp</dimen>

Here 12sp is the default textsize for inactive bottom navigation item. Set the same for active bottom navigation item as well. You will have no zoom effect.

Ibrahim Broachwala
  • 91
  • 1
  • 7
0

I have done a lots of trial and error and now I am realizing that the better option is to use third party library for bottom bar. One of the better solution is roughike There is lots of customization available

shafeeq
  • 1,499
  • 1
  • 14
  • 30
0
public static class BottomNavigationViewHelper {
    @SuppressLint("RestrictedApi")
    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.setShifting(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);
        }
    }
}
@Override
protected void onStop() {
    super.onStop();
}

}

after this put this

    BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);

I have tried this and it works

raj kavadia
  • 926
  • 1
  • 10
  • 30
0

Just set the type field of your BottomNavigationBar widget to BottomNavigationBarType.fixed.

type: BottomNavigationBarType.fixed,
Ahmed Ashraf
  • 281
  • 1
  • 2
  • 12