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.

Possible duplicate of [How to disable BottomNavigationView shift mode?](https://stackoverflow.com/questions/40176244/how-to-disable-bottomnavigationview-shift-mode) — Przemysław Piechota. kibao, Oct 19 '17 at 12:54
to disable scale animation follow this answer: https://stackoverflow.com/a/52322460/3557894 — nuamehas, Nov 28 '18 at 18:10

score 92 · Accepted Answer · edited May 23 '17 at 12:10

92

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

edited May 23 '17 at 12:10

Community

1
1

answered Jan 17 '17 at 06:34

Nabeel K

5,938
11
38
68

1

hello, thank you for this quetion and ans too, this is working perfect but i'm still struggling with color of icons, my by default icons are black but it shows light black and when i click the icon it colors turns to white.. how to resolve? – Rucha Bhatt Joshi Apr 27 '17 at 05:51
I don't know why this doesn't work in my app :( I've been struggling for hours now – pamobo0609 Oct 06 '17 at 17:49
how can i disable animation which happens when click on item. basically its a animation thats assign a bottom padding to the icon – Mr.G Oct 19 '17 at 11:28
7

I am getting below error. BottomNavigationItemView.setShiftingMode can only be called from within the same library group (groupId=com.android.support) – Suresh Parmar Nov 07 '17 at 18:37
3

@SureshParmar, looks like with the latest version of Design Library, this is not working. Any idea if they moved the disable shift mode to the public API? – midhunhk Nov 20 '17 at 13:12
for release build [if using proguard] add below line to proguard rules -keep class android.support.design.internal.BottomNavigationMenuView { *;} – dayanand Jan 14 '18 at 05:28
1

For those who find this, here is the issue in the Android Support Library issue tracker for adding this as a feature of the BottomNavigationView : https://issuetracker.google.com/issues/37125827 – Brandon Haugen Mar 01 '18 at 15:30
Cannot resolve method 'setShiftingMode(boolean)' UPD: ok. so it's because of android X. but.. BottomNavigationItemView.setShifting can only be called from within the same library group (groupId=com.google.android.material) more... (⌘F1) – Yvgen Jul 22 '19 at 09:14
I've also experienced the "..can only be called from within the same library group.." error. Specifying a custom textAppearance worked for me: https://stackoverflow.com/a/52322460/4651172 – dabo248 Oct 18 '19 at 08:35

Azad Qaderzadeh · Answer 2 · 2019-02-04T23:21:52.907

21

I tryed this and it worked well

BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);

Or this code mainactivity.xml

app:labelVisibilityMode="unlabeled"

edited Feb 04 '19 at 23:21

answered Feb 04 '19 at 12:22

Azad Qaderzadeh

404
3
7

3

or this code in MainActivity.xml app:labelVisibilityMode="labeled" – Azad Qaderzadeh Feb 04 '19 at 22:41
it worked for me but there is an issue I have tittle and after implementing this I cant see the title only icons (i have changing icon with tittles) – Vasant Raval Feb 26 '22 at 05:50

score 8 · Answer 3 · answered Aug 08 '19 at 18:49

8

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>

answered Aug 08 '19 at 18:49

Dita Aji Pratama

710
1
12
28

Best solution so far. Thanks – Saeed Younus Feb 14 '20 at 11:25
Best answer and I've checked multiple ones. – DIRTY DAVE Jun 25 '21 at 05:55

score 7 · Answer 4 · answered Nov 29 '17 at 03:57

7

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

answered Nov 29 '17 at 03:57

Pei

11,452
5
41
45

score 7 · Answer 5 · answered Jan 24 '19 at 11:50

7

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.+

answered Jan 24 '19 at 11:50

Shangeeth Sivan

2,150
1
20
20

score 7 · Answer 6 · answered Oct 18 '19 at 14:08

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.

score 4 · Answer 7 · answered May 16 '19 at 03:13

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.

score 3 · Answer 8 · answered Aug 01 '18 at 10:48

3

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.

answered Aug 01 '18 at 10:48

bimsina

414
5
12

In order to use this you need to use com.android.support:design:28.0.0-alpha1. – saltandpepper Oct 18 '18 at 10:27
3

but i want label with no animation. – Prince Dholakiya Nov 23 '18 at 04:49
2

@user7832102 to disable scale animation follow this answer: https://stackoverflow.com/a/52322460/3557894 – nuamehas Nov 28 '18 at 17:57

score 2 · Answer 9 · answered Mar 18 '20 at 12:37

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"/>

score 2 · Answer 10 · answered Jul 19 '21 at 14:12

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

score 1 · Answer 11 · edited Jan 22 '19 at 10:42

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

score 1 · Answer 12 · edited Jan 18 '22 at 09:12

1

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

This will do the trick.

edited Jan 18 '22 at 09:12

Codemaker2015

12,190
6
97
81

answered Jan 11 '22 at 14:57

Roshan

71
5

score 0 · Answer 13 · answered Mar 13 '23 at 20:09

0

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

app:labelVisibilityMode="unlabeled"

answered Mar 13 '23 at 20:09

Jekis Osipov

133
10

score -1 · Answer 14 · answered Aug 21 '19 at 06:52

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

How to remove icon animation for bottom navigation view in android

14 Answers14

Linked

Related