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 x 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 アプリ