Add an AnimationDrawable to BottomNavigationView

Question

I've added a BottomNavigationView to my project and I want to add an animation to one of the menu items. This animation is an AnimationDrawable, basically a sequence of images. I've done the following but didn't work, any idea of how can I reach this, or an alternative to try?

main_activity.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/lytMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/lytContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="?attr/actionBarSize" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/nav"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        app:menu="@menu/menu" />

</RelativeLayout>

menu.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menShow"
        android:enabled="true"
        android:icon="@drawable/headphones"
        android:title="@string/menu_listen"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/menSearch"
        android:enabled="true"
        android:icon="@drawable/search"
        android:title="@string/menu_search"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/menPlay"
        android:enabled="true"
        android:icon="@drawable/play_anim"
        android:title="@string/menu_play"
        app:showAsAction="ifRoom" />
</menu>

play_anim.xml:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/play_anim"
    android:oneshot="false">
    <item
        android:drawable="@drawable/vis_f1"
        android:duration="100" />
    <item
        android:drawable="@drawable/vis_f2"
        android:duration="100" />
    <item
        android:drawable="@drawable/vis_f3"
        android:duration="100" />
    <item
        android:drawable="@drawable/vis_f4"
        android:duration="100" />
    <item
        android:drawable="@drawable/vis_f5"
        android:duration="100" />
    <item
        android:drawable="@drawable/vis_f6"
        android:duration="100" />
    <item
        android:drawable="@drawable/vis_f7"
        android:duration="100" />
</animation-list>

MainActivity.java:

BottomNavigationView bottomView = (BottomNavigationView) findViewById(R.id.nav);

MenuItem menuItem = (MenuItem) bottomView.findViewById(R.id.menPlay);

AnimationDrawable animation = (AnimationDrawable)menuItem.getIcon();

animation.start();

The result so far it's the menu with 3 static images, I just want to animate one of them.

Any help will be appreciated, thanks in advance

Answer 1

bottomView.menu.getItem(i).icon = AnimatedVectorDrawableCompat.create(this, R.drawable.menPlay)
var anim = bottomView.menu.getItem(i).icon as Animatable
anim.start()

Answer 2

I'll respond to myself. I've found a solution using a third party library for the BottomNavigationBar: ButtomBar it's pretty simple and powerful, but how I resolve my problem is doing the following:

MainActivity.java:

private AppCompatImageView appCompatImageView;
private AnimationDrawable animationDrawable;
private BottomBar navBottom;

@Override
public void onCreate(Bundle savedInstanceState) 
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    navBottom = (BottomBar) findViewById(R.id.navBottom);

    appCompatImageView = (AppCompatImageView) navBottom.getTabAtPosition(Constants.BOTTOM_BAR_ANIMATION).getChildAt(0);
    animationDrawable = (AnimationDrawable) appCompatImageView.getDrawable();

    if(shouldStartAnimation())
    {
        if(!animationDrawable.isRunning())
        {
            animationDrawable.start();
        }
    }
    else
    {
        animationDrawable.stop();
    }
}

public boolean shouldStartAnimation()
{
    //Add some condition in here
    return true;
}

main_activity.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/lytMain"
android:layout_width="match_parent"
android:layout_height="match_parent">

<FrameLayout
    android:id="@+id/lytContent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="?attr/actionBarSize" />

<com.roughike.bottombar.BottomBar
    android:id="@+id/navBottom"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:layout_alignParentBottom="true"
    android:background="@color/black"
    app:bb_activeTabColor="@drawable/sbs_menu_selector"
    app:bb_behavior="iconsOnly"
    app:bb_tabXmlResource="@xml/bottombar_items" />

I've casted the drawable of the menu item to AppCompatImageView and then to get the animationDrawable of it I just simple did appCompatImageView.getDrawable() and that's it, then you can start/stop the animation drawable as you need it.

Note that the shouldStartAnimation is a method were your condition should be placed.

Hope this can help someone.

PS: Thanks roughike four the helpful library.