スプラッシュ画面

Android 12 以降を搭載したデバイスでは、すべてのアプリで新しいアプリ起動アニメーションが使用されます。これには、アプリ開始を示す動画、アプリアイコンを表示するスプラッシュ画面、アプリ本体への遷移が含まれます。

このエクスペリエンスでは、アプリを起動するたびに標準のデザイン要素が提供されますが、カスタマイズもできるため、アプリ独自のブランディングを維持できます。

SplashScreen プラットフォーム API を使用するだけでなく、SplashScreen API をラップする SplashScreen 互換性ライブラリを使用することもできます。

スプラッシュ画面の仕組み

アプリのプロセスが実行されていないとき（コールドスタート）またはアクティビティが作成されていないとき（ウォームスタート）にユーザーがアプリを起動すると、次のイベントが発生します（ホットスタート時にスプラッシュ画面が表示されることはありません）。

定義したテーマとアニメーションを使用してスプラッシュ画面が表示されます。
アプリの準備が整うと、スプラッシュ画面が閉じてアプリが表示されます。

スプラッシュ画面の要素とメカニズム

スプラッシュ画面の要素は、Android マニフェストの XML リソースファイルで定義します。ライトモードとダークモードのバージョンがあります。

スプラッシュ画面のカスタマイズ可能な要素は、アプリアイコン、アイコン背景、ウィンドウ背景で構成されます。

これらの要素については、次の点を考慮してください。

1 アプリアイコンはベクター型ドローアブルにする必要があります。静止画とアニメーションのどちらでもかまいません。アニメーションの継続時間に制限はありませんが、1,000 ミリ秒以下にすることをおすすめします。デフォルトでは、ランチャーアイコンが使用されます。

2 アイコン背景は省略可能です。アイコンとウィンドウ背景とのコントラストを上げる必要がある場合に便利です。アダプティブアイコンを使用する場合、ウィンドウ背景とのコントラストが十分あれば、背景が表示されます。3 アダプティブアイコンと同様に、フォアグラウンドの 3 分の 1 がマスクされています。

4 ウィンドウ背景は、不透明な単色で構成されています。ウィンドウ背景が設定され、無地の色である場合、属性が設定されていなければ、デフォルトで使用されます。

スプラッシュ画面のサイズ

スプラッシュ画面のアイコンの仕様は、次のようにアダプティブアイコンと同じです。

ブランドイメージ: 200 × 80 dp にする必要があります。
背景があるアプリアイコン: 直径 160 dp の円に収まる 240 x 240 dp にする必要があります。
背景がないアプリアイコン: 直径が 192 dp の円に収まる 288 x 288 dp にする必要があります。

たとえば、画像の合計サイズが 300 x 300 dp の場合、アイコンを直径 200 dp の円内に収める必要があります。円の外側にあるものはすべて非表示になります（マスクされます）。

図 3: スプラッシュ画面上の背景が無地と透明のアイコンのサイズ

スプラッシュ画面のアニメーションと起動シーケンス

レイテンシの増加は一般に、コールドスタートでのアプリの起動に関連します。スプラッシュ画面にアニメーションアイコンを追加すると、自然に美しさに目が向き、エクスペリエンスを高めることができます。さらに、ユーザー調査によると、アニメーションを表示した場合は起動時間が認識されにくいというメリットもあります。

スプラッシュ画面のアニメーションは、次の起動シーケンスコンポーネントに埋め込まれます。

開始アニメーション: システムビューからスプラッシュ画面までです。これはシステムによって制御され、カスタマイズできません。
スプラッシュ画面: スプラッシュ画面はカスタマイズでき、独自のロゴのアニメーションやブランディングの提示に利用できます。適切に動作するためには、このドキュメントに記載されている要件を遵守する必要があります。
終了アニメーション: スプラッシュ画面を非表示にするアニメーションです。カスタマイズする場合は、SplashScreenView とそのアイコンにアクセスし、変換、不透明度、色を設定して任意のアニメーションを実行できます。その場合、アニメーションが終了したらスプラッシュ画面を手動で削除する必要があります。

アイコンのアニメーションを実行すると、アプリの起動により、アプリの準備が早く整った場合にシーケンスをスキップするためのオプションが表示されます。アプリが onResume() をトリガーするか、スプラッシュ画面が自動的にタイムアウトするため、モーションを安心してスキップできることをご確認ください。スプラッシュ画面が onResume() で閉じるのは、アプリが表示の観点で安定している場合のみであるため、スピナーの追加は必要ありません。導入するインターフェースが不完全であると、ユーザーに不快感をもたらす可能性があるだけでなく、予測できないという印象や洗練さに欠けるという印象を与えかねません。

スプラッシュ画面のアニメーションの要件

スプラッシュ画面は次の仕様に遵守する必要があります。

ウィンドウ背景を単色で透明度なしに設定します。日中モードと夜間モードは、どちらもスプラッシュ画面の互換性ライブラリでサポートされています。
アニメーションアイコンが次の仕様を遵守していることを確認します。
- 形式: アニメーション化ベクター型ドローアブル（AVD）の XML にする必要があります。
- サイズ: AVD アイコンは、次のように、アダプティブアイコンのサイズの 4 倍にする必要があります。
  - アイコンの領域は 432 dp（つまり、アダプティブアイコンのマスクされない領域である 108 dp の 4 倍）にする必要があります。
  - 画像の内側の 2/3 がランチャーアイコンに表示され、288 dp （つまり、アダプティブアイコンの内側のマスクされる領域である 72 dp の 4 倍）にする必要があります。
- 継続時間: スマートフォンでは 1,000 ミリ秒以下にすることをおすすめします。遅延スタートを使用することもできますが、166 ミリ秒以下にする必要があります。アプリの起動時間が 1,000 ミリ秒を超える場合は、ループアニメーションをご検討ください。
スプラッシュ画面を閉じる適切なタイミングを設定します。このタイミングで、アプリは最初のフレームを表示します。この設定は、このドキュメントのスプラッシュ画面を長時間表示するに記載されているように、さらにカスタマイズできます。

スプラッシュ画面のリソース

スターターキットのサンプルをダウンロードして、アニメーションの作成、フォーマット、AVD へのエクスポートを行う方法をご確認ください。

アニメーションの Adobe After Effects プロジェクトファイル
最終的にエクスポートされる AVD XML ファイル
アニメーションの GIF の例

上記のファイルをダウンロードすると、Google 利用規約に同意したことになります。

このサービスでのデータの取り扱いについては、Google プライバシーポリシーに記載されています。

アプリのスプラッシュ画面をカスタマイズする

SplashScreen はデフォルトで、テーマの windowBackground（単色の場合）と、ランチャーアイコンを使用します。スプラッシュ画面のカスタマイズは、アプリテーマに属性を追加して行います。

アプリのスプラッシュ画面は、次のいずれかの方法でカスタマイズできます。

テーマ属性を設定して外観を変更する
長時間表示する
スプラッシュ画面を閉じるためのアニメーションをカスタマイズする

スプラッシュ画面のテーマを設定して外観を変更する

アプリのスプラッシュ画面をカスタマイズするには、アクティビティのテーマに以下の属性を指定します。android:windowBackground のような属性を使用する以前のスプラッシュ画面実装がある場合は、Android 12 以降用の代替リソースファイルを提供することをご検討ください。

背景を特定の単色で塗りつぶすには、windowSplashScreenBackground を使用します。
```
<item name="android:windowSplashScreenBackground">@color/...</item>
```
開始ウィンドウの中央にあるアイコンを置き換えるには、windowSplashScreenAnimatedIcon を使用します。AnimationDrawable と AnimatedVectorDrawable でオブジェクトのアニメーション化と描画が可能な場合、開始ウィンドウを表示しつつアニメーションを再生するには、windowSplashScreenAnimationDuration も設定する必要があります。
```
<item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>
```
スプラッシュ画面のアイコンアニメーションの継続時間を指定するには、windowSplashScreenAnimationDuration を使用します。この設定はスプラッシュ画面の実際の表示時間には影響しませんが、スプラッシュ画面の終了アニメーションをカスタマイズするときに SplashScreenView#getIconAnimationDuration を使用して取得できます。詳しくは、次のセクションのスプラッシュ画面を長時間表示するをご覧ください。
```
<item name="android:windowSplashScreenAnimationDuration">1000</item>
```
スプラッシュ画面のアイコンの背景を設定するには、windowSplashScreenIconBackgroundColor を使用します。これは、ウィンドウの背景とアイコンのコントラストが十分でない場合に便利です。
```
<item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>
```
必要に応じて windowSplashScreenBrandingImage を使用すると、スプラッシュ画面の下部に表示する画像を設定できます。デザインガイドラインでは、ブランディング画像の使用は推奨されていません。
```
<item name="android:windowSplashScreenBrandingImage">@drawable/...</item>
```

スプラッシュ画面を長時間表示する

スプラッシュ画面は、アプリが最初のフレームを描画するとすぐに閉じます。アプリ内の設定など、少量のデータをローカルディスクから非同期で読み込む必要がある場合は、ViewTreeObserver.OnPreDrawListener を使用して、最初のフレームを描画しないようアプリを一時停止します。

開始アクティビティが描画前に終了する場合（たとえば、コンテンツビューを設定せず、onResume の前に終了する場合など）は、描画前リスナーは必要ありません。

Kotlin

// Create a new event for the activity.
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // Set the layout for the content view.
    setContentView(R.layout.main_activity)

    // Set up an OnPreDrawListener to the root view.
    val content: View = findViewById(android.R.id.content)
    content.viewTreeObserver.addOnPreDrawListener(
        object : ViewTreeObserver.OnPreDrawListener {
            override fun onPreDraw(): Boolean {
                // Check if the initial data is ready.
                return if (viewModel.isReady) {
                    // The content is ready; start drawing.
                    content.viewTreeObserver.removeOnPreDrawListener(this)
                    true
                } else {
                    // The content is not ready; suspend.
                    false
                }
            }
        }
    )
}

Java

// Create a new event for the activity.
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Set the layout for the content view.
    setContentView(R.layout.main_activity);

    // Set up an OnPreDrawListener to the root view.
    final View content = findViewById(android.R.id.content);
    content.getViewTreeObserver().addOnPreDrawListener(
            new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    // Check if the initial data is ready.
                    if (mViewModel.isReady()) {
                        // The content is ready; start drawing.
                        content.getViewTreeObserver().removeOnPreDrawListener(this);
                        return true;
                    } else {
                        // The content is not ready; suspend.
                        return false;
                    }
                }
            });
}

スプラッシュ画面を閉じるためのアニメーションをカスタマイズする

Activity.getSplashScreen() を使用すると、スプラッシュ画面のアニメーションをさらにカスタマイズできます。

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // ...

    // Add a callback that's called when the splash screen is animating to
    // the app content.
    splashScreen.setOnExitAnimationListener { splashScreenView ->
        // Create your custom animation.
        val slideUp = ObjectAnimator.ofFloat(
            splashScreenView,
            View.TRANSLATION_Y,
            0f,
            -splashScreenView.height.toFloat()
        )
        slideUp.interpolator = AnticipateInterpolator()
        slideUp.duration = 200L

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.doOnEnd { splashScreenView.remove() }

        // Run your animation.
        slideUp.start()
    }
}

Java

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...

    // Add a callback that's called when the splash screen is animating to
    // the app content.
    getSplashScreen().setOnExitAnimationListener(splashScreenView -> {
        final ObjectAnimator slideUp = ObjectAnimator.ofFloat(
                splashScreenView,
                View.TRANSLATION_Y,
                0f,
                -splashScreenView.getHeight()
        );
        slideUp.setInterpolator(new AnticipateInterpolator());
        slideUp.setDuration(200L);

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                splashScreenView.remove();
            }
        });

        // Run your animation.
        slideUp.start();
    });
}

このコールバックの開始時、スプラッシュ画面のアニメーション化ベクター型ドローアブルは開始しています。アプリの起動にかかる時間によっては、ドローアブルがアニメーションの中ほどにある場合があります。SplashScreenView.getIconAnimationStart を使用して、アニメーションがいつ開始されたのかを把握します。アイコンアニメーションの残りの時間は次のように計算できます。

Kotlin

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenView.iconAnimationDuration
// Get the start time of the animation.
val animationStart = splashScreenView.iconAnimationStart
// Calculate the remaining duration of the animation.
val remainingDuration = if (animationDuration != null && animationStart != null) {
    (animationDuration - Duration.between(animationStart, Instant.now()))
        .toMillis()
        .coerceAtLeast(0L)
} else {
    0L
}

Java

// Get the duration of the animated vector drawable.
Duration animationDuration = splashScreenView.getIconAnimationDuration();
// Get the start time of the animation.
Instant animationStart = splashScreenView.getIconAnimationStart();
// Calculate the remaining duration of the animation.
long remainingDuration;
if (animationDuration != null && animationStart != null) {
    remainingDuration = animationDuration.minus(
            Duration.between(animationStart, Instant.now())
    ).toMillis();
    remainingDuration = Math.max(remainingDuration, 0L);
} else {
    remainingDuration = 0L;
}