I've just removed the design support library and added the new Material Components library (
com.google.android.material:material:1.0.0-alpha3 as of writing) and currently there's some sea birds outside making noises that are hard to describe. But this is about the
BottomNavigationView that resides in there and some updates that have been long awaited. (This should be the same if you update the design support library to
28.0.0-alpha3, which just brings the new Material Components support library in instead)
In retrospect the title of this blog post would probably be better served in a post on the
BottomAppBar but I've got nothing better.
Label me, label me good
LabelVisibilityModeset to labeled
In some Google apps like YouTube and everyone's #1 social media platform G+, the
BottomNavigationView has had labels on all 5 items. People cried out in horror; 1. Because this was against Material Design Guidelines and 2. Because there was no way for them to add labels to all items to all items using the
BottomNavigationView provided with the support library.
Well now you can! All you need to do is set a
labelVisibilityMode. This can currently be in one of 4 states.
LABEL_VISIBILITY_LABELED- shows labels on all items. Yes that would mean that 4 or 5 would have labels as well!
LABEL_VISIBILITY_SELECTED- shows a label only on the selected item. This applies even if you only have 3 items or less.
LABEL_VISIBILITY_AUTO- switches between
LABEL_VISIBILITY_SELECTED. Basically the "old" BottomNavigationView style; when there's 3 items or less they will be labelled, when it's 4 or more only the selected item is labelled
LABEL_VISIBILITY_UNLABELED- No labels on any items. That means even on 3 or less items.
You can either set this by:
BottomNavigationViewprogrammatically and providing one of the above constants
- Using the
app:labelVisibilityModeattribute on the
BottomNavigationViewin your layout XML and setting it to either
You can find the docs for the
Super Size Me
You can now set the items icon size by:
- Calling either
setItemIconSizewith a size in DP (you'll probably need to convert it from pixels though) or
setItemIconSizeResand reference a resource dimension programmatically
- Using the
app:itemIconSizeattribute on the
BottomNavigationViewin your layout XML
Keeping Up Appearances
You can now also change the text for your items when they are in an active and inactive state by:
BottomNavigationViewprogrammatically and reference a style resource id
- Using the
BottomNavigationViewin your layout XML and providing a style resource id
That Weird Selection Animation
ItemHorizontalTranslationEnabledset to true
ItemHorizontalTranslationEnabledset to false
It maybe just for me, but in the weird translation animation when selecting an item from the
BottomNavigationView never felt right. The good news is, if you feel the same as me, then you can now turn it off! You can do this by:
BottomNavigationViewprogrammatically and set to
- Using the
app:itemHorizontalTranslationEnabledattribute on your on your
BottomNavigationViewin your layout XML and providing
One thing to note, this doesn't seem the
itemHorizontalTranslationEnabled setting doesn't seem to apply when your
LabelVisibilityMode is set to
This is all much nicer now! And this should hopefully mean you don't need to use any 3rd party libraries or reflection hacks to change things. Squawk, squawk, fin.