【Android】RecyclerViewのアイテムが画面に表示される際にアニメーションを付ける方法

はじめに

このチュートリアルでは、AndroidアプリのRecyclerViewにアイテムが表示されるタイミングでアニメーションを適用する方法を、サンプルコードとともに詳しく解説します。

レイアウトアニメーション（Layout Animation）を活用すれば、リストの各アイテムが順番にフェードイン・スライドインする演出を簡単に実現できます。本記事では、FAB（フローティングアクションボタン）をタップするたびに4種類のアニメーションが切り替わるデモアプリを作成します。

手順1：新規プロジェクトの作成

Android Studioを起動し、File → New Projectを選択します。必要な項目を入力して、新しいプロジェクトを作成してください。

手順2：activity_main.xml の編集

res/layout/activity_main.xmlに以下のコードを追加します。RecyclerViewのandroid:layoutAnimation属性でアニメーションを指定している点がポイントです。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layoutAnimation="@anim/layout_animation_up_to_down"
        app:layoutManager="android.support.v7.widget.LinearLayoutManager"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:src="@android:drawable/ic_media_next"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

手順3：下から上へスライドするアニメーション（down_to_up.xml）

res/anim/down_to_up.xmlに以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android"
    android:duration="500">
    <translate
        android:fromYDelta="50%p"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toYDelta="0" />
    <alpha
        android:fromAlpha="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toAlpha="1" />
</set>

手順4：左から右へスライドするアニメーション（left_to_right.xml）

res/anim/left_to_right.xmlに以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android"
    android:duration="500">
    <translate
        android:fromXDelta="-100%p"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toXDelta="0" />
    <alpha
        android:fromAlpha="0.5"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toAlpha="1" />
</set>

手順5：右から左へスライドするアニメーション（right_to_left.xml）

res/anim/right_to_left.xmlに以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android"
    android:duration="500">
    <translate
        android:fromXDelta="100%p"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toXDelta="0" />
    <alpha
        android:fromAlpha="0.5"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toAlpha="1" />
</set>

手順6：上から下へスケールしながら表示するアニメーション（up_to_down.xml）

res/anim/up_to_down.xmlに以下のコードを追加します。移動・透明度・拡大縮小を組み合わせたアニメーションです。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android"
    android:duration="500">
    <translate
        android:fromYDelta="-25%"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toYDelta="0" />
    <alpha
        android:fromAlpha="0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:toAlpha="1" />
    <scale
        android:fromXScale="125%"
        android:fromYScale="125%"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="100%"
        android:toYScale="100%" />
</set>

手順7〜10：レイアウトアニメーションの定義ファイル

次に、各アニメーションをRecyclerView全体に適用するための<layoutAnimation>定義ファイルを4つ作成します。res/anim/ディレクトリにそれぞれ以下のXMLを追加してください。

layout_animation_down_to_up.xml

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="https://schemas.android.com/apk/res/android"
    android:animation="@anim/down_to_up"
    android:animationOrder="normal"
    android:delay="15%" />

layout_animation_left_to_right.xml

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="https://schemas.android.com/apk/res/android"
    android:animation="@anim/left_to_right"
    android:animationOrder="normal"
    android:delay="15%" />

layout_animation_right_to_left.xml

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="https://schemas.android.com/apk/res/android"
    android:animation="@anim/right_to_left"
    android:animationOrder="normal"
    android:delay="15%" />

layout_animation_up_to_down.xml

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="https://schemas.android.com/apk/res/android"
    android:animation="@anim/up_to_down"
    android:animationOrder="normal"
    android:delay="15%" />

主な属性の意味

• android:animation：各アイテムに適用する個別アニメーションを指定します。
• android:animationOrder：アニメーションの開始順序を指定します（normal＝先頭から順番／reverse＝逆順／random＝ランダム）。
• android:delay：各アイテムのアニメーション開始を遅らせる間隔です。「15%」の場合、前のアイテムのアニメーション時間の15%ずつずらして再生されます。

手順11：MainActivity.java の実装

src/MainActivity.javaに以下のコードを追加します。FABをタップするたびに、配列に登録された4種類のレイアウトアニメーションが順番に切り替わる仕組みです。

package com.journaldev.androidrecyclerviewlayoutanimation;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.view.animation.GridLayoutAnimationController;
import android.view.animation.LayoutAnimationController;
import android.widget.Spinner;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
    FloatingActionButton fab;
    RecyclerView recyclerView;
    RecyclerViewAdapter recyclerViewAdapter;
    ArrayList<String> arrayList = new ArrayList<>();
    int[] animationList = {R.anim.layout_animation_up_to_down,
            R.anim.layout_animation_right_to_left,
            R.anim.layout_animation_down_to_up,
            R.anim.layout_animation_left_to_right};
    int i = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fab = findViewById(R.id.fab);
        recyclerView = findViewById(R.id.recyclerView);
        populateData();
        initAdapter();
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (i < animationList.length - 1) {
                    i++;
                } else {
                    i = 0;
                }
                runAnimationAgain();
            }
        });
    }
    private void populateData() {
        for (int i = 0; i < 12; i++) {
            arrayList.add("Item " + i);
        }
    }
    private void initAdapter() {
        recyclerViewAdapter = new RecyclerViewAdapter(arrayList);
        recyclerView.setAdapter(recyclerViewAdapter);
    }
    private void runAnimationAgain() {
        final LayoutAnimationController controller = AnimationUtils.loadLayoutAnimation(this, animationList[i]);
        recyclerView.setLayoutAnimation(controller);
        recyclerViewAdapter.notifyDataSetChanged();
        recyclerView.scheduleLayoutAnimation();
    }
}

アニメーションを再再生するrunAnimationAgain()メソッドでは、AnimationUtils.loadLayoutAnimation()でコントローラーを読み込み、setLayoutAnimation()で設定した後、notifyDataSetChanged()とscheduleLayoutAnimation()を呼び出すことでアニメーションが再実行されます。

手順12：AndroidManifest.xml の確認

Manifests/AndroidManifest.xmlに以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.journaldev.androidrecyclerviewlayoutanimation">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

アプリの実行

それではアプリを実行してみましょう。実際のAndroid端末をパソコンに接続しているものとして説明します。Android Studioから実行するには、プロジェクト内のいずれかのアクティビティファイルを開き、ツールバーのRunアイコンをクリックします。接続したモバイルデバイスを選択すると、端末に以下のような画面が表示されます。

補足：AndroidXへの読み替えについて

本記事のコードは旧Support Libraryを使用しています。現在のAndroid StudioではAndroidXへの移行が標準となっているため、新しいプロジェクトで試す場合は、android.support.v7.widget.RecyclerViewをandroidx.recyclerview.widget.RecyclerView、android.support.design.widget.FloatingActionButtonをcom.google.android.material.floatingactionbutton.FloatingActionButtonなどに置き換えてください。アニメーションの実装方法自体は変わりません。