Introduction:
In Android, now we have the bottom navigation, whenever we have three feature options or we have five options then we can use Bottom Navigation, If we have more then five options then we can move towards the Drawer Navigation.
Recently I have been working on an application in which I need to add a Bottom Navigation with five options, I successfully Implemented the bottom navigation but what I figured out that It’s animate when I switched the bottom tab option, It’s the default behavior, when you have five options It will animate the label whenever you switched the bottom tab.
After the R&D I found some answers on StackOverflow which they used the disable shift mode, but that was not working, so let’s get jump into it to see how you gonna disable this animation.
As we know
bydefault bottom navigation has multiple effects like Horizontal animation and text becomes larger when you select any item.Disable Transitions Ways:
The above transition we can remove by adding this
<com.google.android.material.bottomnavigation.BottomNavigationView
...
app:itemHorizontalTranslationEnabled="false"/>
Now, we can also show label and remove the translation together without
app:itemHorizontalTranslationEnabled="false" this way<com.google.android.material.bottomnavigation.BottomNavigationView
...
app:labelVisibilityMode="labeled"/>
If we want the same size of bottom navigation text then we can use the value of
dimen.xml just add this line.<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<dimen name="design_bottom_navigation_active_text_size"
tools:override="true">12sp</dimen>
</resources>
That’s it now we have proper bottom navigation without any transition, but now we have one last problem here.
Problem:
The one problem is still here, What if the menu text is a long text? What if it was made of 2 words?
you will see the long text trimmed when the menu is selected. (Please look at the third menu)
Solution:
You just need to hide the long text and show the small text by doing like this below snippet of code.
TextView largeTextView = bottomNavigationView.findViewById(itemID)
.findViewById(com.google.android.material.R.id.largeLabel);
TextView smallTextView = bottomNavigationView.findViewById(itemID)
.findViewById(com.google.android.material.R.id.smallLabel);
smallTextView.setVisibility(View.VISIBLE);
largeTextView.setVisibility(View.GONE);
Conclusion:
This article described you how to disable the different transitions of the bottom navigation, how you gonna show the small text size, how you controlled the long-text.
I hope this article is helpful. If you think something is missing, have questions, or would like to give feedback, go ahead and leave a comment below. I’d appreciate the feedback.
I’ve written some other Android-related content, and if you liked what you read here, you’ll probably also enjoy this:
