Androidアプリでリップル（波紋）アニメーションを実装する方法をわかりやすく解説

コードの解説に入る前に、Androidにおけるリップルアニメーションとは何かを確認しておきましょう。リップルアニメーションとは、水面に広がる波紋のようなエフェクトのことです。Androidでは、TextViewやButtonなどのViewに対してbackground属性を使用することで、このエフェクトを簡単に表示できます。

この記事では、Viewにリップルアニメーションを組み込む具体的な手順を解説します。

実装手順

ステップ1：新規プロジェクトの作成

Android Studioで新しいプロジェクトを作成します。メニューから「File」→「New Project」を選択し、必要な項目を入力してプロジェクトを作成しましょう。

ステップ2：レイアウトファイルの編集

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

<?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">
    <Button
        android:id="@+id/result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Result Data"
        android:background="@drawable/rippple"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

上記のコードでは、背景にリップル効果を適用したButtonを1つ追加しています。

ステップ3：リップル用ドローアブルの作成

drawableフォルダ内に「ripple.xml」というファイルを作成し、以下のコードを記述します。

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:color="#f816a463"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f816a463" />
        </shape>
    </item>
</ripple>

アプリの実行と動作確認

それでは、アプリを実行してみましょう。実際のAndroid端末をパソコンに接続しているものとします。Android Studioからアプリを実行するには、プロジェクト内のアクティビティファイルを開き、ツールバーのRunアイコンをクリックしてください。

実行先として接続したモバイルデバイスを選択すると、端末にアプリの初期画面が表示されます。

次に「Result Data」ボタンをタップすると、以下のように波紋が広がるリップル効果が確認できます。