KotlinとXMLファイルを使ってAndroidアプリにアニメーションを実装する方法

この記事では、Kotlinを使用したAndroidアプリで、XMLファイルを利用してアニメーションを作成する方法を解説します。具体的には、「ズーム（拡大）」と「ブリンク（点滅）」の2種類のアニメーションをボタン操作で切り替えて実行できるサンプルアプリを段階的に作成していきます。

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

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

ステップ2：レイアウトファイル（activity_main.xml）の編集

res/layout/activity_main.xml に以下のコードを追加します。画面中央にテキストを配置し、下部に「Zoom」「Blink」の2つのボタンを設置するシンプルなレイアウトです。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="4dp"
    tools:context=".MainActivity">
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="50dp"
    android:text="Tutorials Point"
    android:textAlignment="center"
    android:textColor="@android:color/holo_green_dark"
    android:textSize="32sp"
    android:textStyle="bold" />
<TextView
    android:textColor="@android:color/holo_purple"
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:text="Have a Wonderful day!"
    android:textSize="24sp"
    android:textStyle="bold" />
<Button
    android:layout_above="@id/buttonBlink"
    android:id="@+id/buttonZoom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Zoom" />
<Button
    android:id="@+id/buttonBlink"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:text="Blink" />
</RelativeLayout>

ステップ3：MainActivity.kt の実装

src/MainActivity.kt に以下のコードを記述します。AnimationUtils.loadAnimation() を使ってXMLで定義したアニメーションを読み込み、ボタンがクリックされたタイミングでTextViewに対してアニメーションを開始しています。

import android.os.Bundle
import android.view.View
import android.view.animation.Animation
import android.view.animation.AnimationUtils
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity(), Animation.AnimationListener {
    private lateinit var textView: TextView
    private lateinit var buttonZoom: Button
    private lateinit var buttonBlink: Button
    private lateinit var zoom: Animation
    private lateinit var blink: Animation
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        textView = findViewById(R.id.textView)
        buttonZoom = findViewById(R.id.buttonZoom)
        buttonBlink = findViewById(R.id.buttonBlink)
        blink = AnimationUtils.loadAnimation(applicationContext, R.anim.blink)
        blink.setAnimationListener(this)
        zoom = AnimationUtils.loadAnimation(applicationContext, R.anim.zoom)
        zoom.setAnimationListener(this)
        buttonZoom.setOnClickListener {
            textView.visibility = View.VISIBLE
            textView.startAnimation(zoom)
        }
        buttonBlink.setOnClickListener {
            textView.visibility = View.VISIBLE
            textView.startAnimation(blink)
        }
    }
    override fun onAnimationStart(animation:Animation) {}
    override fun onAnimationEnd(animation1:Animation) {}
    override fun onAnimationRepeat(animation:Animation) {}
}

ステップ4：アニメーションリソースファイルの作成

「anim」という名前のAndroidリソースディレクトリを作成し、その中にアニメーション定義用のリソースファイルを追加します。ここでは「blink.xml」と「zoom.xml」の2つのファイルを作成します。

blink.xml（点滅アニメーション）

alpha値を0.0から1.0まで600ミリ秒かけて変化させることで、テキストを滑らかに点滅させます。repeatCountに「infinite」を指定しているため、無限に繰り返されます。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android">
<alpha
    android:duration="600"
    android:fromAlpha="0.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:toAlpha="1.0" />
</set>

zoom.xml（拡大アニメーション）

要素の中心（pivotX/pivotY = 50%）を基準に、1倍から3倍へと1000ミリ秒かけて拡大するスケールアニメーションです。fillAfterを「true」に設定することで、アニメーション終了後も拡大された状態が維持されます。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="https://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="3"
        android:toYScale="3">
    </scale>
</set>

ステップ5：AndroidManifest.xml の編集

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

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="com.example.q11">
    <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」アイコンをクリックします。デバイス選択のダイアログが表示されたら、接続したモバイルデバイスを選択してください。しばらくすると、端末にアプリの初期画面が表示されます。

「Zoom」ボタンをタップするとテキストが拡大され、「Blink」ボタンをタップするとテキストが点滅します。それぞれのアニメーションが正しく動作していることを確認してみてください。