Androidアプリでアニメーショングラデーション背景を作成する方法【コード付き解説】

実装方法に入る前に、まずグラデーションカラーについて簡単におさらいしておきましょう。Wikipediaによると、コンピュータグラフィックスにおけるカラーグラデーション（カラーランプやカラープログレッションとも呼ばれます）とは、位置に応じて変化する一連の色を指定したもので、通常は領域の塗りつぶしに使用されます。例えば、多くのウィンドウマネージャーでは、画面の背景をグラデーションとして指定できます。

本記事では、Androidアプリにおいて時間の経過とともに色が変化する「アニメーショングラデーション背景」の作成方法を、具体的なコード例とともにステップごとに解説していきます。

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

まず、Android Studioを開き、「File」→「New Project」を選択して新しいプロジェクトを作成します。必要な項目をすべて入力してプロジェクトを完成させてください。

Step 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:id = "@+id/constraintLayout"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    android:background = "@drawable/gradient_animation"
    tools:context = ".MainActivity">
    <!-- ここに任意のレイアウトを配置 -->
    <TextView
        android:layout_width = "368dp"
        android:layout_height = "520dp"
        android:layout_marginBottom = "8dp"
        android:layout_marginLeft = "8dp"
        android:layout_marginRight = "8dp"
        android:layout_marginTop = "8dp"
        android:gravity = "center"
        android:text = "@string/app_name"
        android:textAlignment = "center"
        android:textColor = "@android:color/background_light"
        android:textSize = "30sp"
        android:textStyle = "bold"
        app:layout_constraintBottom_toBottomOf = "parent"
        app:layout_constraintLeft_toLeftOf = "parent"
        app:layout_constraintRight_toRightOf = "parent"
        app:layout_constraintTop_toTopOf = "parent"
        tools:text = "@string/app_name"/>
</android.support.constraint.ConstraintLayout>

上記のコードでは、背景として gradient_animation をdrawableリソースから指定しています。続いて、drawableフォルダ内に gradient_animation.xml というファイルを作成し、以下のコードを追加しましょう。

<?xml version = "1.0" encoding = "utf-8"?>
<animation-list xmlns:android = "https://schemas.android.com/apk/res/android">
    <item
        android:drawable = "@drawable/drawable_purple_gradient"
        android:duration = "3000" />
    <item
        android:drawable = "@drawable/drawable_amber_gradient"
        android:duration = "3000" />
    <item
        android:drawable = "@drawable/drawable_green_gradient"
        android:duration = "3000" />
    <item
        android:drawable = "@drawable/drawable_red_gradient"
        android:duration = "3000" />
</animation-list>

この animation-list には4つの子drawableが登録されており、それぞれに表示時間（duration）が設定されています。設定時間が経過すると、背景が次のグラデーションへと切り替わります。ここでは、紫色のグラデーションを定義した drawable_purple_gradient.xml をdrawableフォルダ内に作成し、以下のコードを追加してください。

<?xml version = "1.0" encoding = "utf-8"?>
<shape xmlns:android = "https://schemas.android.com/apk/res/android">
    <gradient
        android:angle = "90"
        android:endColor = "#D500F9"
        android:startColor = "#4A148C" />
</shape>

残りの3つのグラデーションファイルの作成

同じ手順で、drawableフォルダ内に drawable_amber_gradient.xml、drawable_green_gradient.xml、drawable_red_gradient.xml の3つのファイルを作成し、それぞれ以下のコードを追加します。

drawable_amber_gradient.xml

<?xml version = "1.0" encoding = "utf-8"?>
<shape xmlns:android = "https://schemas.android.com/apk/res/android">
    <gradient
        android:angle = "135"
        android:endColor = "#FFC400"
        android:startColor = "#FF6F00" />
</shape>

drawable_green_gradient.xml

<?xml version = "1.0" encoding = "utf-8"?>
<shape xmlns:android = "https://schemas.android.com/apk/res/android">
    <gradient
        android:angle = "0"
        android:endColor = "#00E676"
        android:startColor = "#1B5E20"/>
</shape>

drawable_red_gradient.xml

<?xml version = "1.0" encoding = "utf-8"?>
<shape xmlns:android = "https://schemas.android.com/apk/res/android">
    <gradient
        android:angle = "45"
        android:endColor = "#FF1744"
        android:startColor = "#B71C1C" />
</shape>

Step 3：MainActivity.java の編集

最後に、src/MainActivity.java に以下のコードを追加します。

package com.example.andy.myapplication;

import android.graphics.drawable.AnimationDrawable;
import android.support.constraint.ConstraintLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    private ConstraintLayout constraintLayout;
    private AnimationDrawable animationDrawable;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        constraintLayout = (ConstraintLayout) findViewById(R.id.constraintLayout);
        animationDrawable = (AnimationDrawable) constraintLayout.getBackground();
        animationDrawable.setEnterFadeDuration(3000);
        animationDrawable.setExitFadeDuration(2000);
    }
    @Override
    protected void onResume() {
        super.onResume();
        if (animationDrawable != null && !animationDrawable.isRunning()) {
            animationDrawable.start();
        }
    }
    @Override
    protected void onPause() {
        super.onPause();
        if (animationDrawable != null && animationDrawable.isRunning()) {
            animationDrawable.stop();
        }
    }
}

このJavaコードでは、onCreate() 内でレイアウトの背景から AnimationDrawable を取得し、フェードイン・フェードアウトの時間を設定しています。また、onResume() でアニメーションを開始し、onPause() で停止することで、アプリがバックグラウンドにあるときの無駄な処理を防いでいます。

アプリの実行と動作確認

それでは、実際にアプリを実行してみましょう。ここでは、実機のAndroidスマートフォンがパソコンに接続されているものとします。Android Studioからアプリを実行するには、プロジェクト内のいずれかのアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックします。接続しているモバイルデバイスを選択すると、スマートフォンの画面にアプリが起動します。

上記の実行結果のように、約3秒ごとに背景のグラデーションカラーが自動的に切り替わることを確認できます。durationの値やstartColor/endColorのカラーコードを変更すれば、好きなタイミングや配色で独自のアニメーション背景を作れるので、ぜひいろいろ試してみてください。