ロード画面を実装する方法 | Androidアプリ開発

Androidアプリ開発において、ロード画面を実装する方法を紹介します。

今回作成するテストアプリ

今回作成するテストアプリは下図のように起動後に3秒間ロード画面を表示し、その後にメインのロード完了の文字列を表示するものです。

実際のアプリでは3秒といった固定秒数ではなく、バックグラウンドの処理だけ待つと思いますが、これはテストアプリなので便宜上、3秒待つものとしておきます。

ロード完了後のレイアウトを作成する

まずはロード完了後に表示したいレイアウトを作成します。サンプルコードとして、ここでは以下のようにしました。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/LL_Main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:background="@color/black"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="ロード完了！！"
            android:textColor="@color/white"
            />
    </LinearLayout>
    
</LinearLayout>

ルートのLinearLayoutの子要素として、ロード後に表示したいレイアウトのLinearLayoutを作成します。ロード後用のLinearLayoutはあとでプログラムから操作するのでidを付与しておきましょう。

ここではロード後用のLinearLayoutの下にTextViewを作成していますが、自分の好きなViewを作成してOKです。

ロード後用のLinearLayoutを隠す

さきどの作成したロード後用のLinearLayoutはロード後に表示したいので、アプリ起動時は隠しておきましょう。

レイアウトを隠すにはvisibilityにgoneを設定します。サンプルコードは以下です。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/LL_Main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:background="@color/black"
        android:visibility="gone"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="ロード完了！！"
            android:textColor="@color/white"
            />
    </LinearLayout>

</LinearLayout>

ロード中用のレイアウトを作成する

続いて、アプリ起動時に表示したいロード中用のレイアウトを作成します。

さきほどと同様にロード中用のLinearLayoutを作成します。こちらもあとでプログラムから操作するためidを付与しておきます。

ロード中のぐるぐるはProgressBarというレイアウト要素を使用すれば表示できます。

サンプルコードは以下です。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/LL_Main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:background="@color/black"
        android:visibility="gone"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="ロード完了！！"
            android:textColor="@color/white"
            />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LL_Load"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ロード中です..."
            />
        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
    </LinearLayout>

</LinearLayout>

これでアプリを起動すると「ロード中です…」という文字列とともにProgressBarのぐるぐるが表示されるだけの状態になっていると思います。

これでレイアウトファイルの作成は完了です。

ロード完了時のコードを実装する

あとはロード完了にあわせて、さきほど作成したロード中およびロード後のLinearLayoutの表示/非表示をプログラムから操作してあげれば完成です！

以下、サンプルコードです。

MainActivity.java

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        new Thread(() -> {
            //テストアプリなので3秒sleepしていますが、本来はここで実行したいバックグラウンド動作を実装してください。
            try {
                Thread.sleep(3000);
            } catch (InterruptedException e) {
                return;
            }

            runOnUiThread(() -> {
                findViewById(R.id.LL_Load).setVisibility(View.GONE);
                findViewById(R.id.LL_Main).setVisibility(View.VISIBLE);
            });
        }).start();

    }
}

上記の例では3秒sleepをしていますが、実際のアプリではその箇所にバックグラウンドで動作させたいコードを実装してください。

3秒スリープ( = バックグラウンド動作完了)後にsetVisibilityメソッドを使用し、さきほど作成したロード中およびロード後用にLinearLayoutの表示/非表示を変更してやります。

runOnUiThreadメソッドでラッパーしているのは以下の記事で紹介したエラーが出るためです。
アプリを起動して、下図のように動作していれば成功です！

まとめ

Androidアプリ開発において、ロード画面を実装する方法を紹介しました。