2023年10月23日

松本

【Android】スプラッシュスクリーンを設定するお話

スマホアプリ

facebook
twitter

スマホアプリを作る上で欠かせない･･･訳ではないですが、アプリの構成に必要なのはスプラッシュスクリーン（以下スプラッシュ画面）ですよね

1 そもそもスプラッシュ画面とは？
2 Androidアプリで実装する場合（今まで）
3 SplashScreen API登場
- 3.1 スプラッシュ画面用のActivityを用意する
- 3.2 themes.xmlにテーマを記述する

そもそもスプラッシュ画面とは？

スマホアプリにかかわらず、ほとんどのアプリやプログラムを起動した際に一瞬表示される画像のことです。

PC系は中央に小さな方形で表示されることが多く、スマホアプリや家庭用ゲーム機などは全画面で表示されるのが一般的です。

アプリによってはスプラッシュ画面が無い場合もあり、Androidは基本的に機能としては存在しません。（iOSアプリは「Launch Screen」という形で自動的に実装されます）

上記はMicrosoft 365のOutlook起動時のスプラッシュ画面

ではスプラッシュ画面はどうして必要なのかとなりますが、大きく分けて2つあると考えてます

そのアプリのブランドアイデンティティを高める
データの読み込みなどの下準備作業の表示上の軽減

ユーザーとしても「Loading…」と出るより、スプラッシュ画面が出てる方が読み込み処理をしていることを意識しなくてもいいのでありだと思います。

逆にメモ帳やツール系の意味合いが強いアプリの場合はスプラッシュ画面を起動すること自体が時間のロスの感じがするので、スプラッシュ画面は実装しない方がいいかと思います
（そういうツール系アプリにスプラッシュ画面を実装しても悪い意味でユーザーの印象に残ったりするので）

Androidアプリで実装する場合（今まで）

先ほどAndroidの場合は標準機能としてのスプラッシュ画面は存在しないと言いましたが、どうやって実装してたかというと

スプラッシュ画面用のActivityを作成、データ読み込みなどを実装し、画面はアプリロゴや表示したい内容を配置、一定時間 or データ読み込み処理が完了後にアプリの画面へ遷移する
アプリ起動時にスプラッシュ画面のActivityを起動するように設定

という感じで実装していました。
こちらのやり方が禁止されてるわけではないのですが･･･

SplashScreen API登場

Android 12以降のデバイスではデフォルトでアプリアイコンを表示してからアプリ起動を行うようになりました。

これはこれでいいのですが、今までのスプラッシュ画面を実装している場合

「アプリアイコンのスプラッシュ画面（自動的に表示）」→「今までのスプラッシュ画面」が連続して表示されるため、ユーザー側としては少しごちゃついた印象を受けるかもしれません。

新規にアプリを作る場合は気にする必要はありませんが、既存アプリの場合はその当たりの改修を行う必要があります。

改修方法としては

スプラッシュ画面の表示を止める
OSバージョンで出し分ける
新しい表示方法に改修する

の3つかなと思います。

個人的には今後のことを考えて1または3かなと思いますので今回は3をベースに考えていきます。

bundle.gradle(:app)に記述を追加する

implementation "androidx.core:core-splashscreen:1.0.1"

1	implementation "androidx.core:core-splashscreen:1.0.1"

バージョンはできれば最新のものにしておいてください。

スプラッシュ画面用のActivityを用意する

これは既存のスプラッシュ画面がある場合はそのまま利用できます。
ただし、SplashActivityなどの名前だとAndroid Studioから「SplashScreen APIを使ってよ」と警告が表示されるので、このタイミングで「FirstScreenActivty」などの変更してもいいかもしれません。

中身は

   override fun onCreate(savedInstanceState: Bundle?) {
        val splashScreen = installSplashScreen()
        // MainActivity 本来の Theme へ差し替える
        setTheme(R.style.AppTheme)
        super.onCreate(savedInstanceState)

        splashScreen.setKeepOnScreenCondition{
            setup()
            true
        }
        setContentView(R.layout.activity_first_screen)
    }

override fun onCreate(savedInstanceState: Bundle?) {

val splashScreen = installSplashScreen()

// MainActivity 本来の Theme へ差し替える

setTheme(R.style.AppTheme)

super.onCreate(savedInstanceState)

splashScreen.setKeepOnScreenCondition{

setup()

true

}

setContentView(R.layout.activity_first_screen)

}

こんな感じでonCreate時にSplashScreen関数を呼び出します。
setup関数はスプラッシュ画面の中の処理を別枠にしてますので表示するだけであれば不要です。

また、AndroidManifest.xmlですが、こちらも以下のようにスプラッシュ用のテーマを設定してください

        <activity
            android:name=".activity.FirstScreenActivity"
            android:exported="true"
            android:label="@string/app_short_name"
            android:theme="@style/Theme.App.SplashScreen" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

<activity

android:name=".activity.FirstScreenActivity"

android:exported="true"

android:label="@string/app_short_name"

android:theme="@style/Theme.App.SplashScreen" >

<intent-filter>

</intent-filter>

</activity>

ここに「android:theme=”@style/Theme.App.SplashScreen”」とあるので、こちらのテーマも実装しましょう

themes.xmlにテーマを記述する

    <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
        <!-- SplashScreenの背景色を設定する。 -->
        <item name="windowSplashScreenBackground">@color/splash_background</item>
        <!-- 開始ウィンドウの中央にあるアイコンを置き換える -->
        <item name="windowSplashScreenAnimatedIcon">@drawable/icon_splash_front</item>
        <!-- スプラッシュ画面が閉じるまでの表示時間を設定 -->
        <!-- デフォルトでは、10000ms。推奨は、1000ms以内-->
        <item name="windowSplashScreenAnimationDuration">5000</item>
        <!-- Required -->
        <item name="postSplashScreenTheme">@style/AppTheme</item>
    </style>

<item name="windowSplashScreenBackground">@color/splash_background</item>

<item name="windowSplashScreenAnimatedIcon">@drawable/icon_splash_front</item>

<item name="postSplashScreenTheme">@style/AppTheme</item>

</style>

詳しくはコメントに書いてますが、背景色とアイコンと閉じる時間をここで設定できます

これでAndroid11以前のデバイスでも12以降と同じような表示がされるようになります。
今までのような専用のスプラッシュ画面を作る必要も無く、画像さえ用意すれば簡単に実装できるようになったのは便利ですね。

その分、グラフィカルなスプラッシュ画面（特にデータ読み込みを含めるなど）を作る場合は別のActivityで用意する必要があるのかなと思います。

執筆者：松本[ エンジニア ]

プログラミング

SharePointではできないこと 4選

「これってSharePointでできないの!?」なんていう瞬間、開発やカスタマイズの現場では意外と多くあります。SharePointはとても柔軟なプラットフォームですが、実は“万能ツール”ではありません。「コードを書けば何とかなる」と思って構築を進めると、モダンページの仕様や制限に阻まれて苦い思いをすることもしばしば。今回は、実際のプロジェクトや運用の中で見えてきた「SharePointではできないこと」をまとめて紹介します。目次1 1.CSSとJSが直接使えない1.1 ク […]

2025年10月10日

Webサイト制作

WordPress納品後にクライアントが安心して運用できる仕組みづくりをしよう

ホームページ制作において、更新機能を手軽に導入できるのがWordPressです。専門知識がなくても記事の投稿やページ編集を行いやすい一方で、クライアントが自分で運用するには、が欠かせません。今回は、そのための仕組みづくりについてご紹介します。制作側の方はもちろん、クライアント側でホームページ運用を担当される方も、制作時のご相談などにぜひ参考にしてみてください。目次1 管理画面のロゴを企業ロゴに変更する2 管理画面のURLを変更する・認証などを付けてセキュリティ面を強化 […]

2025年10月3日

Webデザイン

アプリのロゴアニメーションをAfter Effectsで作成→Lottieに変換【iOS/Android対応】

こちらは、当社でリリースしたアプリ「ピンピタ」で使用しているロゴアニメーションです。スプラッシュ画面でロゴが動くと、ぐっとアプリらしい印象になりますし、作ってみたいですよね。今回は、After Effects（以降AE）でロゴアニメーションを作成し、アプリに組み込むまでをご紹介します。 AEと聞くと難しい印象がありますが、PremiereやFlashなどを触った経験がある方なら、すぐに慣れます。もう一度再生目次1 作業フロー1.1 注意点：グラデーションが使用不可2 […]

2025年9月19日

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。

Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト