How to remove icon animation for bottom navigation view in android

Question

I have implemented Bottom Navigation View from Design Support Library 25 in my project. I have 5 icons in the view. whenever an icon is selected it's having some animation. But when 3 or fewer icons is not showing any animations. I want to remove that animation and need only some color change for the icon. How can I achieve this? Done enough googling, but couldn't find the solution. Please help. Thanks.

Answer 1

got answer from this thread.

To remove animation or shift mode.

Implementation of BottomNavigationView has condition: when there is more than 3 items then use shift mode.

Create helper class

import android.support.design.internal.BottomNavigationItemView; 
import android.support.design.internal.BottomNavigationMenuView; 
import android.support.design.widget.BottomNavigationView; 
import android.util.Log;
import java.lang.reflect.Field;

public class BottomNavigationViewHelper { 
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try { 
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //noinspection RestrictedApi 
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated 
                //noinspection RestrictedApi 
                item.setChecked(item.getItemData().isChecked());
            } 
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        } 
    } 
} 

Usage

BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation_bar);
BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);

Answer 2

I tryed this and it worked well

BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);

Or this code mainactivity.xml

app:labelVisibilityMode="unlabeled"

Answer 3

I just add this code on dimens.xml, and its work like a charm!

<dimen name="design_bottom_navigation_active_text_size" tools:override="true">@dimen/design_bottom_navigation_text_size</dimen>

Answer 4

The change in label text size causes the animation. If you set the general, active and inactive text appearance to be same, there will be no change, hence no animation.

For example :

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"

    app:itemTextAppearance="@style/TextAppearance.AppCompat.Caption"
    app:itemTextAppearanceActive="@style/TextAppearance.AppCompat.Caption"
    app:itemTextAppearanceInactive="@style/TextAppearance.AppCompat.Caption"

    app:menu="@menu/navigation"/>

Here, I have set prebuilt style (@style/TextAppearance.AppCompat.Caption) but if you want you can set your own text style. just remember to set all three of them to be same.

Answer 5

BottomNavigationViewEx is a good extension to standard BottomNavigationView. enableShiftingMode(false) does the job for you.

Answer 6

Try this is the layout

app:labelVisibilityMode="labeled"

or in code level mNavigationView.setLabelVisibilityMode(LabelVisibilityMode.LABEL_VISIBILITY_LABELED);

And update your design support library to 28.0.+

Answer 7

when i use current version

implementation 'com.google.android.material:material:1.1.0-alpha06'

and i set labelVisibilityMode to "labeled"

app:labelVisibilityMode="labeled"

under these circumstances, i got it by

<dimen name="design_bottom_navigation_active_text_size" tools:override="true">@dimen/design_bottom_navigation_text_size</dimen>

I hope I can help you too.

Answer 8

This may not be the most elegant or practical solution but you could try to add the following line to your BottomNavigationView.

app:labelVisibilityMode="unlabeled"

It will remove the label and also disable the animation.

Answer 9

Just do this.. create dimen file inside values repository and inside the add

<dimen name="design_bottom_navigation_active_text_size">10sp</dimen>
<dimen name="design_bottom_navigation_text_size">10sp</dimen>

10sp above is just an example. And in BottomNavigationView add

<com.google.android.material.bottomnavigation.BottomNavigationView
..
app:labelVisibilityMode="labeled"/>

Answer 10

I tried all these answers and none worked to remove the ripple animation when an icon is clicked.

A solution I found is to use the BottomNavigationViewEx class instead (setup here- https://github.com/ittianyu/BottomNavigationViewEx).

Then programatically set

bottomNavigationView.setItemRippleColor(ColorStateList.valueOf(Color.parseColor("#FFFFFF")));

Answer 11

To remove animation or shift move create an bottomNavigationViewHelper class using bottomNavigationViewEX

package com.example.chitchat.utils;
import android.util.Log;
import com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx;

public class BottomNavigationViewHelper {
    private static final String TAG = "bottomNavigationViewHel";

    public static void setupBottomnavigationView(BottomNavigationViewEx bottomNavigationViewEx)
    {
        Log.d(TAG, "setupBottomnavigationView: setting up bottom navigation view");

        bottomNavigationViewEx.enableAnimation(false);
        bottomNavigationViewEx.enableShiftingMode(false);
        bottomNavigationViewEx.enableItemShiftingMode(false);
        bottomNavigationViewEx.setTextVisibility(false);
    }
}

Answer 12

implementation 'com.google.android.material:material:1.2.1'
 
<com.google.android.material.bottomnavigation.BottomNavigationView
    .....
    app:labelVisibilityMode="unlabeled"/>

This will do the trick.

Answer 13

Animation happens because when you tap and icons elevate and label shows, so you just need to remove label

app:labelVisibilityMode="unlabeled"

Answer 14

You can put a tag inside BottomNavigationView:

app:itemRippleColor="@color/white"

Answer 15

Material Design is getting more handy to use.

App dependency to your Gradle file (Update to the latest version).

implementation 'com.google.android.material:material:1.1.0-alpha09'

In MainActivity, just need to call the clearAnimation() function to the BottomNavigationView class

BottomNavigationView navView = findViewById(R.id.nav_view);
navView.clearAnimation();