Help us understand the problem. What is going on with this article?

BottomNavigationのアイコンをアニメーションさせる

More than 1 year has passed since last update.

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でもできるかもしれません。(できた方報告いただけるとうれしいです)
https://material.io/develop/android/docs/getting-started/

導入

https://material.io/develop/android/docs/getting-started/

こちらにある通りにgradleの設定を行う。

build.gradle
allprojects {
  repositories {
    google()
    jcenter()
  }
}
app/build.gradle
dependencies {
  // ...
  implementation 'com.google.android.material:material:1.0.0'
  // ...
}

BottomNavigationを設定

https://material.io/develop/android/components/bottom-navigation-view/

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>


ここまではだいたいいつもどおりです。これでこんな画面がでてることでしょう。

スクリーンショット 2018-10-29 11.51.51.png

一旦コードはこんな感じにしておいて、素材を作ります

アニメーションを作る

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コードで何もする必要ないのですごい楽です。

CaptainPag
Minato-Kuの会社でAndroidアプリえんじにーあーしてます。 基本ROM専ですのでよろしくお願い致します。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした