8

How to remove all animation of BottomNavigationView without any Helper or proGuard and in easy way with google material dependency com.google.android.material:material:1.0.0?

1 Answer 1

33
  1. We all know by default BottomNavigationView has multiple effects like horizontal translation and larger text if menu item selected.

Default

  1. We can remove the translation adding
<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    app:itemHorizontalTranslationEnabled="false"/>

Translation Removed

  1. We can show label and remove the translation together without app:itemHorizontalTranslationEnabled="false" this way
<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    app:labelVisibilityMode="labeled"/>

Labeled

  1. If we're not satisfied with number 3, we can still use the same text size as inactive menu by adding dimens in dimens.xml. By doing this, we pretty much has animation-free of BottomNavigationView
<?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>

enter image description here

BONUS PROBLEM

But, there is still another problem. What if the menu text is a long text? What if it was made of 2 words?

If that is your question, you will see the long text trimmed when the menu is selected. (Please look at the third menu)

Long Text Problem

And this is the solution I got after experimenting with BottomNavigationView

void selectFragment(MenuItem item) {
    item.setChecked(true);

    int itemID = item.getItemId();
    if (itemID == R.id.menu_a) {
        pushFragment(MenuAFragment.newInstance("MENU A"));
    }
    else if (itemID == R.id.menu_b) {
        pushFragment(MenuAFragment.newInstance("MENU B"));
    }
    else if (itemID == R.id.menu_c) {
        pushFragment(MenuAFragment.newInstance("MENU C"));
    }
    else if (itemID == R.id.menu_d) {
        pushFragment(MenuAFragment.newInstance("MENU D"));
    }
    else {
        pushFragment(MenuAFragment.newInstance("MENU E"));
    }

    /**** START FROM HERE ****/

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

Basically, we only have to hide the largeTextView and show the smallTextView Long Text Problem Solved

Want to know more? Just look at this repo DisableShiftMode

5
  • 1
    You are amazing! Thanks!
    – Sam Chen
    Commented Dec 26, 2019 at 22:14
  • 1
    This is an incredible answer! Commented Jun 12, 2020 at 15:20
  • 1
    This is a brilliant set of solutions. Covers all the cases. Thanks. Commented Aug 13, 2020 at 11:32
  • 1
    This is awesome. Commented Oct 13, 2020 at 6:20
  • It doesn't work on Android 13. Commented Dec 15, 2023 at 11:26

Not the answer you're looking for? Browse other questions tagged or ask your own question.