2

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.

Improve this question

3 Answers 3

Reset to default
8

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

Improve this answer
4
  • 1
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes
    – L_J
    Commented Aug 24, 2018 at 9:37
  • 1
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
    – Bartek Lipinski
    Commented Aug 24, 2018 at 9:42
  • @BartekLipinski check now
    – Rambabu Padimi
    Commented Nov 7, 2018 at 7:06
  • Sir you are a genius :)
    – Diolor
    Commented Apr 5, 2019 at 20:12
1

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

Improve this answer
1
  • Thank you for the speedy answer. Honestly I'm very much a beginner in this sort of thing so I will work on it for the time being until I feel my coding is good enough to be able to help out 😅
    – malodita
    Commented Jun 27, 2018 at 18:59
1
  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

Improve this answer