CODEWITHSUNDEEP
androidmaterial-designbottomnavigationviewmaterial-componentsmaterial-components-android
malodita
malodita

Reputation: 53

Animating the selected icon on BottomNavigationView

I was looking at animating the VectorDrawables I currently use in my BottomNavigationView when a tab is selected like in this Material Product Study for the Owl app. However unlike for the Toolbar view when I get the icon using MenuItem.getIcon(), cast it to AnimatedVectorDrawable and call the animate() method, there is no animation.

I was wondering if there is anything I could do to achieve this, if this will be likely included in the stable Material Components library or if I am better off creating a custom view extending the BottomNavigationView class.

Upvotes: 2

Views: 5030

Answers (3)

Kaushik KB
Kaushik KB

Reputation: 151

  1. Make an animated vector drawable by using Shape Shifter

  2. Add this line in build.gradle(Module:app)

    defaultConfig { vectorDrawables.useSupportLibrary = true }

  3. Make Drawable selector file - selector_search.xml

    <?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:targetApi="16">
    <item
        android:id="@+id/state_on"
        android:drawable="@drawable/avd_search"
        android:state_checked="true" />
    <item
        android:id="@+id/state_off"
        android:drawable="@drawable/icon_search" />
    <transition
        android:drawable="@drawable/avd_search"
        android:fromId="@id/state_off"
        android:toId="@id/state_on" />
</animated-selector>

avd search is animated vector drawable file icon_search is normal drawable file

  1. Use this drawable selector file as icon in menu

    <?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/navigation_search"
       android:icon="@drawable/selector_search"
       android:title="@string/search"
       />
</menu>

Enjoy

Upvotes: 1

Rambabu Padimi
Rambabu Padimi

Reputation: 579

we can animate the bottomnavigationview icon using below code:

bottomNavigationId.menu.getItem(i).icon  =  
AnimatedVectorDrawableCompat.create(this, R.drawable.ic_settings_active_avd)
val anim = bottomNavigationId.menu.getItem(i).icon as Animatable
anim.start()

but this is not working api > 24 So, better approach is create an AnimatedStateListDrawable where the AVD is the transition used into android:state_checked="true". Then you can just set this as the drawable on the MenuItem and it will run the AVD when the item is selected.

Eg:

<?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">
    <item android:id="@+id/state_on"
       android:drawable="@drawable/ic_settings_active"
       android:state_checked="true"/>
    <item android:id="@+id/state_off"
       android:drawable="@drawable/ic_settings_inactive"/>
    <transition
       android:drawable="@drawable/ic_settings_active_avd"
       android:fromId="@id/state_off"
       android:toId="@id/state_on" />
  </animated-selector>

Use this animated state list drawable as icon in menu

 <?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>

Checkout below link for complete understanding bottomnavigationview with animated drawables

https://medium.com/@naththeprince/delightful-animations-in-android-d6e9c62a23d3

Upvotes: 8

Cameron Ketcham
Cameron Ketcham

Reputation: 8006

It's currently not possible to use animated icons with BottomNavigationView. We have had this feature request submitted internally, but have deprioritized work on it.

If you would like to help add support we'd gladly accept a pr at https://github.com/material-components/material-components-android

Upvotes: 1

Related Questions