Center bottom navigation bar icons

Question

I'm trying to have ALL icons centered, I already disabled the shifting mode by using the following code:

/**
 * This is done to remove the shift animation introduced by Android on the bottom navigation view
 * https://stackoverflow.com/a/41690461/4243027
 */
@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.setShiftingMode(false);
            item.setPadding(0,15,0,0);
            // 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 set the title to ""

android:title=""

I have also tried to do the following https://stackoverflow.com/a/40234361/4243027 but it's not working either.

My bottom navigation view looks like this:

I'm using implementation "com.android.support:design:27.0.1"

EDIT:

As you can see in Layout Inspector, the icon sizes are the same, 63x63 px but the Y of the checked icon is 5 px less.

Are these not centered? Selected icon base looks a bit higher than the others, but I believe it is due to its different size. — Deividas Strioga, Jul 31 '18 at 10:54
@DeividasStrioga The checked icon moves a bit to the top, it's not much but you can see the effect, all icon sizes are the same in drawables. — aleixrr, Jul 31 '18 at 10:56
Then it is due to its size. Are they svg icons? If so, you can try adjusting their sizes. — Deividas Strioga, Jul 31 '18 at 10:57
@DeividasStrioga Yes, they are SVG icons, but all sizes are the same 24x24 dp. — aleixrr, Jul 31 '18 at 10:59
The difference is in paths' sizes then. Try increasing the size of smaller icons. — Deividas Strioga, Jul 31 '18 at 11:00
When checking Layout Inspector I can see that non-checekd icons ara at y = 31 and checked icon is at y = 36 — aleixrr, Jul 31 '18 at 11:01
Instead of disabling shifting mode, try adding this line to xml: app:itemHorizontalTranslationEnabled="false" If it does not work, try increasing the svg sizes of smaller icons. — Deividas Strioga, Jul 31 '18 at 11:05
As you can see in the layout inspector image added the sizes of the icons are the same but the checked one is not centered in the bar. Also the line you're suggesting is not available in my support design version. — aleixrr, Jul 31 '18 at 11:13

score 5 · Answer 1 · answered Dec 25 '18 at 10:26

5

As of Design Support Library 28.0.0-alpha1 you can use the property

app:labelVisibilityMode="unlabeled"

answered Dec 25 '18 at 10:26

Sushan Bastola

473
6
10

Center bottom navigation bar icons

1 Answers1