Bottoms Up! - BottomNavigationView Updates in the Material Components/Design Support Library

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

LabelVisibilityMode set 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.

1. LABEL_VISIBILITY_LABELED - shows labels on all items. Yes that would mean that 4 or 5 would have labels as well!
2. LABEL_VISIBILITY_SELECTED - shows a label only on the selected item. This applies even if you only have 3 items or less.
3. LABEL_VISIBILITY_AUTO - switches between LABEL_VISIBILITY_LABELEDand 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
4. LABEL_VISIBILITY_UNLABELED - No labels on any items. That means even on 3 or less items.

You can either set this by:

• Calling setLabelVisibilityMode on your BottomNavigationView programmatically and providing one of the above constants
• Using the app:labelVisibilityMode attribute on the  BottomNavigationView in your layout XML and setting it to either auto, labeled, unlabeled or selected

You can find the docs for the LabelVisibilityMode here.

Super Size Me

You can now set the items icon size by:

• Calling either setItemIconSize with a size in DP (you'll probably need to convert it from pixels though) or setItemIconSizeRes and reference a resource dimension programmatically
• Using the app:itemIconSize attribute on the BottomNavigationView in your layout XML

Keeping Up Appearances

All label fonts set to Roboto Condensed and bold

You can now also change the text for your items when they are in an active and inactive state by:

• Calling setItemTextAppearanceActive or setItemTextAppearanceInactive with your BottomNavigationView programmatically and reference a style resource id
• Using the app:itemTextAppearanceActive or app:itemTextAppearanceInactive on your BottomNavigationView in your layout XML and providing a style resource id

That Weird Selection Animation

• With `ItemHorizontalTranslationEnabled` set to true*

• With ItemHorizontalTranslationEnabled set 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:

• Calling setItemHorizontalTranslationEnabled with your BottomNavigationView programmatically and set to true or false
• Using the app:itemHorizontalTranslationEnabled attribute on your on your BottomNavigationView in your layout XML and providing true or false

One thing to note, this doesn't seem the itemHorizontalTranslationEnabled setting doesn't seem to apply when your LabelVisibilityMode is set to labeled or unlabeled.

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.