BottomNavigation 아이콘을 애니메이션으로 만들고 싶습니다.

가장 안직하게 BottomNavigationView.OnNavigationItemSelectedListener

if (item.icon is AnimatedVectorDrawable) {
    (item.icon as AnimatedVectorDrawable).start()
}

시도해도 움직이지 않습니다. 약간의 아래 준비가 필요합니다.

환경

com.google.android.material:material:1.0.0
됩니다. 위 패키지는 compileSDKVersion AndroidP가 필요합니다.

동작 미확인 정보
아직 P 대응할 수 없다고 하는 분은 com.android.support:design:28.0.0-alpha3 의 BottomNavigation에서도 할 수 있을지도 모릅니다. (가능한 분보고 할 수 있으면 기쁩니다)
htps // 마테리아 l. 이오 / 데 ゔ ぉ p / 안 d 로이 d / 도 cs / 갓찐 g-s r d /

소개

여기에 있는 대로 gradle의 설정을 실시한다.

build.gradle

allprojects {
  repositories {
    google()
    jcenter()
  }
}

app/build.gradle

dependencies {
  // ...
  implementation 'com.google.android.material:material:1.0.0'
  // ...
}

BottomNavigation 설정


layout.xml

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <!-- Main content -->

  <com.google.android.material.bottomnavigation.BottomNavigationView
      android:id="@+id/bottom_navigation"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom"
      android:background="@color/colorPrimary"
      app:itemIconTint="@color/white"
      app:itemTextColor="@color/white"
      app:menu="@menu/navigation" />

</FrameLayout>

navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">![guruguru_jissou.gif](https://qiita-image-store.s3.amazonaws.com/0/63740/7e479f16-ebad-c7bb-8b68-b79e0484650d.gif)

    <item
         android:id="@+id/navigation_home"
         android:icon="@drawable/ic_home_black_24dp"
         android:title="@string/title_home"/>
    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard"/>
    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications"/>
</menu>

여기까지는 좋은 대로입니다. 이것으로 이런 화면이 나올 것입니다.



일단 코드는 이런 느낌으로 해, 소재를 만듭니다

애니메이션 만들기

ShapeShifter 을 사용하여 아이콘을 애니메이션화합니다. 이번에는 도구를 사용하는 방법은 생략합니다.
이번에는 이런 느낌의 애니메이션을 만들어 보았습니다.



animated vector drawable로 내보낸 이미지를 drawable 디렉토리에 저장

한 번 더 추가

앞서 말한 것처럼 보통 이 SVG 이미지를 싣고 애니메이션시키는 코드를 써도 애니메이션하지 않습니다.animated-selector 로 지정된 drawable로 하고, 그것을 읽어들일 필요가 있습니다.

setting_anim_selector.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">

    <!-- ここにさっきのAnimated Vector Drawableを入れる-->
    <item android:id="@+id/state_on"
          android:drawable="@drawable/animated_setting_icon"
          android:state_checked="true"/>

    <!--こっちには表示しているとき用の画像を乗せる-->
    <item android:id="@+id/state_off"
          android:drawable="@drawable/ic_settings_black_24dp"/>

    <transition
            android:drawable="@drawable/animated_setting_icon"
            android:fromId="@id/state_off"
            android:toId="@id/state_on" />
</animated-selector>

마지막으로 menu에 추가

navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
         android:id="@+id/navigation_home"
         android:icon="@drawable/ic_home_black_24dp"
         android:title="@string/title_home"/>
    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard"/>
    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications"/>
    <item
        android:id="@+id/navigation_setting"
        android:icon="@drawable/setting_anim_selector"
        android:title="@string/title_settings"/>
</menu>

이런 느낌으로 완성. 사람 번거로움의 수수함에 나른하다. .
하지만 kotlin 코드로 아무것도 할 필요가 없습니다.