How do i animate BottomNavigationView Menu Item Icon with ObjectAnimator

Question

I am using android support designs BottomNavigationView for bottom tab navigation.

 <android.support.design.widget.BottomNavigationView
        android:id="@+id/main_nav"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        app:labelVisibilityMode="unlabeled"
        app:itemIconSize="40dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/blue_active"
        app:menu="@menu/nav_items">


    </android.support.design.widget.BottomNavigationView>

What i am trying to do is:

Programmatically animate tab(menu) icon with ObjectAnimator when it is pressed

This is the menu:

<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_home"
        android:title="@string/nav_home" />
    <item
        android:id="@+id/nav_games"
        android:icon="@drawable/games"
        android:title="@string/nav_games" />
    <item
        android:id="@+id/nav_profile"
        android:icon="@drawable/profile"
        android:title="@string/nav_profile" />
</menu>

Code:

 mMainNav.setOnNavigationItemSelectedListener { item ->
            when (item.itemId) {
                R.id.nav_home -> {

                   //item.icon is drawable
                   var myAnimation =  ObjectAnimator.ofFloat(item.icon,"rotation",0f,360f)
                    myAnimation.duration = 500


                    myAnimation.start()  //nothing happens
                    setFragment(HomeFragment)

                    true
                }

With this nothing happens no animation.

What is wrong ? Should i use another way to animate or am i just applying it wrong ?

I tried animating an imageview with icon drawable and then setting it as items actionview but this also does not work.(some reaction happens but produces some unreleated strange behaviour)

 var drawable = applicationContext.getDrawable(R.drawable.ic_home)
                    var someImageView = ImageView(this)
                    someImageView.setImageDrawable(drawable)

                   var myAnimation =  ObjectAnimator.ofFloat(someImageView,"rotation",0f,100f)
                    myAnimation.duration = 2000


                    myAnimation.start()
                    item.actionView = someImageView

bounty link is broken please check this: https://streamable.com/99pa8

Answer 1

Try below solution

Step - 1

Create animated vector drawable using ShapeShifter and import this animated vector drawable, into your Android Project from Android Studio and place it in src/res/drawable.

Step - 2

Create an Animated State List Drawable for each of the icon in the bottom navigation view.

anim_settings.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    tools:targetApi="16">

    <!-- provide a different drawable for each state-->
    <item android:id="@+id/state_on"
        android:drawable="@drawable/ic_settings_active_avd"
        android:state_checked="true"/>

    <item android:id="@+id/state_off"
        android:drawable="@drawable/ic_settings_inactive"/>

    <!-- specify transitions -->
    <transition
        android:drawable="@drawable/ic_settings_active_avd"
        android:fromId="@id/state_off"
        android:toId="@id/state_on" />

</animated-selector>

Step - 3

Use this animated state list drawable as icon.

menu_bottom_nav.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/item_settings_fragment"
        android:icon="@drawable/anim_settings"
        android:title="@string/settings"
        app:showAsAction="always" />
...
</menu>

Step - 4

Set this menu_bottom_nav.xml as menu for bottom navigation view.

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:showAsAction="always|withText"
        app:itemTextColor="@drawable/bottom_navigation_tab_selector"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/menu_bottom_nav"
        android:background="@color/colorWhite"
        app:elevation="0dp"/>

Now Run the android application on your device and check the bottom nav bar animation.

For more details please prefer this link.

I hope this can help you!