Android 12 以降では、SplashScreen API を使用して、アニメーションでアプリを起動できます。これには、起動時のアプリ内モーション、アプリアイコンを表示するスプラッシュ画面、アプリ自体への遷移が含まれます。SplashScreen は Window であるため、Activity をカバーします。
スプラッシュ画面のエクスペリエンスでは、すべてのアプリ起動に標準のデザイン要素が使用されますが、カスタマイズできるため、アプリの独自のブランディングを維持することもできます。
SplashScreen プラットフォーム API を使用するだけでなく、SplashScreen API をラップする SplashScreen 互換ライブラリを使用することもできます。
スプラッシュ画面の仕組み
アプリのプロセスが実行されていないとき（コールド スタート）または Activity が作成されないとき（ウォーム スタート）に、ユーザーがアプリを起動すると、次のイベントが発生します。
スプラッシュ画面は、定義したテーマとアニメーションを使用して表示されます。
アプリの準備が整うと、スプラッシュ画面は閉じてアプリが表示されます。
ホットスタート中は、スプラッシュ画面は表示されません。
スプラッシュ画面の要素とメカニズム
スプラッシュ画面の要素は、Android マニフェスト ファイル内の XML リソース ファイルで定義されます。各要素には、ライトモードとダークモードのバージョンがあります。
スプラッシュ画面のカスタマイズ可能な要素は、アプリアイコン、アイコン背景、ウィンドウ背景で構成されます。
図 2 に示す次の要素について検討します。
1 アプリアイコンはベクター型ドローアブルにする必要があります。静的にすることも、アニメーション化することもできます。アニメーションの継続時間に制限はありませんが、1,000 ミリ秒以下にすることをおすすめします。ランチャー アイコンがデフォルトです。
2 アイコンの背景はオプションであり、アイコンとウィンドウの背景のコントラストを強くする必要がある場合に便利です。アダプティブ アイコンを使用すると、ウィンドウの背景とのコントラストが十分であれば、アイコンの背景が表示されます。
3 アダプティブ アイコンと同様に、フォアグラウンドの 3 分の 1 がマスクされます。
4 ウィンドウ背景は、不透明な単色で構成されています。ウィンドウ背景が設定され、無地である場合、属性が設定されていない場合、デフォルトでその背景が使用されます。
スプラッシュ画面のサイズ
スプラッシュ画面のアイコンは、次のようにアダプティブ アイコンと同じ仕様を使用します。
- ブランド画像: 200×80 dp にする必要があります。
- 背景付きのアプリアイコン: 240 x 240 dp とし、直径 160 dp の円に収まる必要があります。
- アイコンの背景がないアプリアイコン: 288×288 dp とし、直径 192 dp の円内に収まる必要があります。
たとえば、画像の合計サイズが 300 x 300 dp の場合、アイコンを直径 200 dp の円内に収める必要があります。円の外側にあるものはすべて非表示（マスクされます）になります。
スプラッシュ画面のアニメーションと起動シーケンス
レイテンシの増加は一般に、コールド スタートでのアプリの起動に関連します。スプラッシュ画面にアニメーション アイコンを追加すると、見た目が良くなり、よりプレミアムなエクスペリエンスを提供できます。ユーザー調査によると、アニメーションを表示すると、認識される起動時間が短くなることがわかっています。
スプラッシュ画面のアニメーションは、図 4 に示すように、起動シーケンス コンポーネント内に埋め込まれます。
開始アニメーション: システムビューからスプラッシュ画面までで構成されます。システムによって制御されるため、カスタマイズできません。
スプラッシュ画面（シーケンスの「待機」部分で表示）: スプラッシュ画面をカスタマイズして、独自のロゴ アニメーションとブランディングを提供できます。適切に動作するには、このページに記載されている要件を満たしている必要があります。
終了アニメーション: スプラッシュ画面を非表示にするアニメーションで構成されます。カスタマイズする場合は、
SplashScreenViewとそのアイコンを使用します。変形、不透明度、色を設定して、任意のアニメーションを実行できます。この場合、アニメーションが終了したら、スプラッシュ画面を手動で削除します。
アイコンのアニメーションを実行すると、アプリの起動により、アプリの準備が早く整った場合にシーケンスをスキップするためのオプションが表示されます。アプリが onResume() をトリガーするか、スプラッシュ画面が自動的にタイムアウトするため、モーションを無理なくスキップできることを確認してください。スプラッシュ画面は、アプリが視覚的に安定している場合にのみ、onResume() で閉じる必要があります。したがって、追加のスピナーは必要ありません。不完全なインターフェースを導入すると、ユーザーに不快感を与え、予測不能な印象や洗練さに欠けるという印象を与える可能性があります。
スプラッシュ画面のアニメーションの要件
スプラッシュ画面は、次の仕様に準拠している必要があります。
ウィンドウ背景を単色で透明度なしに設定します。日中モードと夜間モードは
SplashScreen互換ライブラリでサポートされています。アニメーション アイコンが次の仕様を遵守していることを確認します。
- 形式: アイコンは AnimatedVectorDrawable（AVD）XML である必要があります。
- サイズ: AVD アイコンは、次に示すように、アダプティブ アイコンのサイズの 4 倍にする必要があります。
- アイコンの領域は 432 dp、つまりマスクされていないアダプティブ アイコンの 108 dp の領域の 4 倍にする必要があります。
- 画像の内側の 3 分の 2 はランチャー アイコンに表示され、288 dp にする必要があります。つまり、アダプティブ アイコンの内側のマスク領域を構成する 72 dp の 4 倍にする必要があります。
- 時間: スマートフォンでは 1,000 ミリ秒を超えないようにすることをおすすめします。遅延起動を使用できますが、166 ミリ秒を超えることはできません。アプリの起動時間が 1,000 ミリ秒を超える場合は、ループ アニメーションを検討してください。
スプラッシュ画面を閉じる適切なタイミングを設定します。このタイミングで、アプリは最初のフレームを表示します。これは、スプラッシュ画面を長時間表示するセクションで説明されているように、さらにカスタマイズできます。
スプラッシュ画面のリソース
サンプル スターター キットをダウンロードして、アニメーションを作成、フォーマットして、AVD にエクスポートする方法をご確認ください。次のツールが含まれています。
- アニメーションの Adobe After Effects プロジェクト ファイル。
- 最終エクスポートされた AVD XML ファイル。
- アニメーションの GIF の例。
上記のファイルをダウンロードすると、Google 利用規約に同意したことになります。
このサービスでのデータの取り扱いについては、Google プライバシー ポリシーに記載されています。
アプリのスプラッシュ画面をカスタマイズする
デフォルトでは、windowBackground が単色の場合、SplashScreen はテーマの windowBackground を使用します。スプラッシュ画面をカスタマイズするには、アプリのテーマに属性を追加します。
アプリのスプラッシュ画面は、次のいずれかの方法でカスタマイズできます。
テーマ属性を設定して外観を変更します。
それよりも長い時間画面上に表示してください。
スプラッシュ画面を閉じるためのアニメーションをカスタマイズします。
始める
SplashScreen コアライブラリにより、API 23 からすべてのデバイスに Android 12 のスプラッシュ画面が提供されます。これをプロジェクトに追加するには、次のスニペットを build.gradle ファイルに追加します。
Groovy
dependencies {
implementation "androidx.core:core-splashscreen:1.0.0"
}
Kotlin
dependencies {
implementation("androidx.core:core-splashscreen:1.0.0")
}
スプラッシュ画面のテーマを設定して外観を変更する
Activity テーマで次の属性を指定して、アプリのスプラッシュ画面をカスタマイズできます。android:windowBackground などの属性を使用する以前のスプラッシュ画面をすでに実装している場合は、Android 12 以降に代替リソース ファイルを提供することを検討してください。
背景を特定の単色で塗りつぶすには、
windowSplashScreenBackgroundを使用します。<item name="android:windowSplashScreenBackground">@color/...</item>windowSplashScreenAnimatedIconを使用して、開始ウィンドウの中央のアイコンを置き換えます。Android 12（API レベル 32）のみをターゲットとするアプリの場合は、次の手順を行います。
AnimationDrawableとAnimatedVectorDrawableでオブジェクトがアニメーション化可能かつドローアブルの場合は、開始ウィンドウを表示しながらアニメーションを再生するようにwindowSplashScreenAnimationDurationを設定します。Android 13 では、所要時間はAnimatedVectorDrawableから直接推定されるため、必須ではありません。<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>Android 13 以降では、
windowSplashScreenBehaviorを使用して、アプリのスプラッシュ画面にアイコンを常に表示するかどうかを指定できます。デフォルト値は 0 です。これは、起動アクティビティがsplashScreenStyleをSPLASH_SCREEN_STYLE_ICONに設定している場合はスプラッシュ画面にアイコンを表示し、起動アクティビティがスタイルを指定していない場合はシステムの動作に従います。空のスプラッシュ画面を表示せず、常にアニメーション アイコンを表示する場合は、この値をicon_preferredに設定します。<item name="android:windowSplashScreenBehavior">icon_preferred</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 whether the initial data is ready.
return if (viewModel.isReady) {
// The content is ready. Start drawing.
content.viewTreeObserver.removeOnPreDrawListener(this)
true
} else {
// The content isn't 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 whether the initial data is ready.
if (mViewModel.isReady()) {
// The content is ready. Start drawing.
content.getViewTreeObserver().removeOnPreDrawListener(this);
return true;
} else {
// The content isn't 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;
}
参考情報
- 既存のスプラッシュ画面の実装を Android 12 以降に移行する
- Now in Android アプリ: スプラッシュ画面の実際の実装を表示します。