Search code examples
androidbottomnavigationview

How to remove all animation of BottomNavigationView without Helper?


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?


Solution

    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