2
2

More than 3 years have passed since last update.

[Java]Androidでスプラッシュ画面を実装する4手順

Posted at

こんにちは、momoritoです。
今回はAndroidアプリを作る際のスプラッシュ画面を実装する手順をまとめておきます。

スプラッシュ画面を実装する際、考えられる方法として

  • スプラッシュ画面用styleを設定してActivityのThemeを差し替える(Theme差替型
  • スプラッシュ画面用のActivityを作成して遷移させる(Activity遷移型

等がありますが、今回は前者のTheme差替型で実装します。

1 はじめに

(1)完成形

下gifのように、アプリをタップ→スプラッシュ画面を表示→数秒後に元のテーマを適用してMainActivityを表示することを目指します。
qiita-square

(2)スプラッシュ画面表示の大まかなイメージ

  1. スプラッシュ画面を表示するThemeを作成し、起動時のActivity(今回はMainActivity)に適用する。
  2. MainActivityを起動し、onCreateで数秒間(今回は2秒)待つ。
  3. 本来のThemeをMainActivityに適用する。

(3)前提条件

  • AndroidStudio 4.1.1を利用
  • AndroidStudioを起動して、Create New projectでEmpty Activityを選択
  • 実施環境はエミュレータでPixel 3 XL(API 29)
  • 使用言語はJava

2 実装手順

(1)スプラッシュ画面用テーマ(splash.xml)を作成する

表示したい画像を用意する

今回は下の画像を使用しました。
infoDeviceSplash.png
160px × 160pxで用意したpngです。(表示されるサイズなら他のサイズでもOKです。)
ファイル名はsplash_logo.pngとしました。

スプラッシュ画面用の背景色を設定する。

今回は画像を画面中心に表示するため、画像の外側の背景色を設定します。
画像自体の背景を■#6A91EDで設定していたため、同様の色をcolor.xmlに定義しておきます。

color.xml
<color name ="background_color">#6A91ED</color>

splash.xmlを作成する

drawableフォルダ上で右クリック→ New → Drawable Resource Fileを選択し、splash.xmlを作成します。
名前はsplash、Root elementはlayer-litsとしました。
splash.xmlには、下記のとおり記述します。

splash.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:opacity="opaque"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <!-- 背景色の設定-->
    <item
        android:drawable="@color/background_color"/> 

  <!-- 表示する画像の設定-->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/splash_logo"/>
    </item>

</layer-list>

ここまででsplash.xmlの完成です。

(2)splash.xmlを適用したstyleを記述する

今回はres/valuesの中にthemes.xmlがあるので、その中に記載します。
昔はres/valuesの中にstyles.xmlを作っていたような…まあ、styleさえ記述できれば問題ありません。
themes.xmlには下記のとおり追記します。
なお、parentには元々のThemeを設定していますが、場合によってはNoActionBarを設定したほうがスッキリするかもしれません。

Themes.xml
  …
    <style name="SplashTheme" parent="Theme.InfoDevice">
        <item name="android:windowBackground">@drawable/splash</item>
    </style>
  …

(3)MainActivityの起動時Themeを変更する

AndroidManifest.xmlに、スプラッシュ画面用Themeを適用します。
このとき、しっかり元のThemeを覚えておいてください。
(本例では、もともとTheme_InfoDeviceというThemeを適用していました。)

変更前

AndroidManifest.xml
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

変更後

AndroidManifest.xml
        <activity
            android:name=".MainActivity"
            android:theme="@style/SplashTheme" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

android:name以下に

android:theme="@style/SplashTheme"

追記しています。(元々記載があれば、@style/...以下をスプラッシュ画面用のThemeに書き換えます。)

(4)MainActivityを数秒待機させてもとのテーマに戻す

MainActivity起動後、スプラッシュ画面のThemeが適用されているので、数秒間待ってから元のThemeに戻します。
MainActivityに記載する内容は下記のとおりです。

MainActivity.java
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        try {
            Thread.sleep(1000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        setTheme(R.style.Theme_InfoDevice);   //元々適用されていたテーマ
        setContentView(R.layout.activity_main);

        

    }

これで完成となります。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2