アプリ起動時に、ネットワークの通信やストレージの読み込みをする場合等は画面が表示されるまでに時間がかかり、しばらく真っ白な画面が表示されてしまうことがあります。

ユーザーから見れは、アプリが反応しなくなったのか?と思われてしまい、ユーザービリティがよくありません。

なので、今回はアプリ起動時にスプラッシュ画面(起動中のロード画面)の設定について書きたいと思います。

画面イメージは以下です。

1.スプラッシュ画面用の画像を用意する

今回は、起動時にアプリと同じアイコンを用意しています。

res/drawable配下にic_splash.pngを用意します。

2.スプラッシュ画面のxmlを定義する

res/drawableの下にsplash.xmlを追加します。

通常、画面のレイアウトファイルであればres/layoutですが、スプラッシュ画面はres/drawableなので注意です。

splash.xmlは以下のようにします。


<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 背景を緑に設定します。 -->
    <item android:drawable="@android:color/holo_green_light" />
    <item>
        <!-- アイコンを中央に表示します。 -->
        <bitmap
            android:gravity="center"
            android:src="@drawable/ic_splash"/>
    </item>
</layer-list>

1.で指定したアイコンを中央に表示して、背景色を設定しています。

3.themes.xmlにスプラッシュ画面の定義をする

res/value/themes.xmlに以下のようにスプラッシュ画面の定義を追加します。


    <!-- Splash screen theme. -->
    <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@drawable/splash</item>   
    </style>

4.AndroidManifest.xmlにスプラッシュ画面を起動する設定をする

AndroidManifest.xmlのファイルの起動時のactivityタグにthemes.xmlで定義したスプラッシュ画面を起動する設定をします。
MainActivityが起動画面であれば、以下のように修正します。

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

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

5.MainActivityでonCreate時に通常のthemeを設定する

上記までの設定で、起動時にスプラッシュ画面が表示されるようになりましたので、最後にスプラッシュ画面から通常の画面に遷移するようにthemeを設定します。

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setTheme(R.style.Theme_AppName_NoActionBar);
        setContentView(R.layout.activity_main);


setThemeで指定するのは、AndroidManifest.xmlで元々指定されていたtheme「android:theme="@style/Theme.AppName.NoActionBar"」をアンダースコアで繋げたものを指定する形となります。
 

以上で、冒頭のスクリーンショットで指定した画面遷移となります。

この実装をした、以下のアプリで動作確認ができますので、ぜひダウンロードして確認してみてください。

シンプル操作でやることの管理ができる「記録が残るToDoリスト」

 

 

Todoを登録したり、完了した日時を自動で記録して履歴として表示することができる便利な機能が特徴です。

無料で公開しています!