Android BottomNavigationView evenly spaced icons

Question

I have a BottomNavigationView with five items. The default behavior is to only show the label of the selected item and the spacing between all five items differs depending on what item is selected.

I would like a bottom bar more simular to a UITabBar on iOS. Is this possible with BottomNavigationView or can you recommend some other library that solves this?

You don't want it to somewhat bubble out when it's selected right? Kind of like what's happening here in the MD Design Guidelines, correct? https://material-design.storage.googleapis.com/publish/material_v_9/0B3321sZLoP_HWFJoUVp6R0ZacDA/components_bottomnavigation_usage7.png — MikeOscarEcho, Nov 30 '16 at 21:25
Correct. I want all tabs to be equal size all the time, not matter which one is selected. — Johan Nordberg, Dec 01 '16 at 09:19
Yea, seems like this initial release of the BottomNavigationView has come with a lot of limitations. I would recommend converting to a tabLayout if that fits your requirements as it allows you to set a "fixed" size for all the tabs. There is also more info in the link to follow that may be of help, you could extend BottomNavigationView and attempt to disable the bubbling effect yourself. http://stackoverflow.com/a/40188794/2340813 — MikeOscarEcho, Dec 01 '16 at 15:54
Possible duplicate of [How to disable BottomNavigationView shift mode?](http://stackoverflow.com/questions/40176244/how-to-disable-bottomnavigationview-shift-mode) — Przemysław Piechota. kibao, Dec 26 '16 at 13:32

score 8 · Answer 1 · edited May 23 '17 at 12:34

8

You just need to disable the shift mode: How to disable BottomNavigationView shift mode?

When you have more than 3 tabs, the shift mode is enabled by default. This can only be set to disabled by tricky method using Reflection now.

edited May 23 '17 at 12:34

Community

1
1

answered Dec 27 '16 at 06:41

Dan Meng

204
2
6

score 0 · Answer 2 · answered Nov 30 '16 at 20:57

0

There are loads of libraries out there but you can check this and this out.

Anyway, a screenshot of your UI would've been better to query the default behavior.

answered Nov 30 '16 at 20:57

AlphaQ

656
8
18

score 0 · Answer 3 · answered Aug 31 '17 at 22:48

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

Android BottomNavigationView evenly spaced icons

3 Answers3