Help us understand the problem. What is going on with this article?

Splash画面を実装する方法

はじめに

Splash画面とは、アプリ起動時に最初に表示される画面です。アプリを起動するのに少なからず時間がかかります。その間に差し込む画面です。

Splash画面は、↑のGIFで写っているドロイド君の画面です。
この画面を作成する方法は大きく分けて2つあります。
1つ目は、Activityのテーマを変更する方法
2つ目は、Splash画面ようにActivityを作成する方法です。
今回はそれぞれの長所短所と実装方法についてまとめていきます。

1つ目の方法

1つ目は、Activityのテーマを変更する方法です。アプリは起動すると、デフォルトではwindowBackgroundの画面が表示されるらしいです。このプレースホルダーをSplash画面に拡張します。

実装

windowBackgroudcolorに、これから作成するSplash画面を設定します。

styles.xml
...
    <style name="AppTheme.Splash" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_drawable</item>
    </style>
...

今回用意したSplash画面は、中心にドロイド君が配置された画面になります。それを実装すると、

splash_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/colorWhite" />
    <item
        android:drawable="@drawable/ic_baseline_android_24"
        android:gravity="center"
        />

</layer-list>

このようになります。真ん中に配置するドロイド君は、

New -> VectorAssetから作成してください。

起動時のテーマをAppThemeからApptheme.Splashに変更します。

AndroidManifest.xml
<activity android:name=".MainActivity"
            android:theme="@style/AppTheme.Splash">

アプリが起動する準備ができたら、MainActivityのsetContentView()で渡されたレイアウトが適応されます。その前にThemeを元のAppThemeに変更しましょう。

MainActivity.kt
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setTheme(R.style.AppTheme)
        setContentView(R.layout.activity_main)
    }
}

以上の実装でドロイド君が中心に配置してあるSplash画面を作成することができました。

長所
この実装方法では、アプリが起動する準備ができ次第、Splash画面から遷移するのでユーザーの時間を無駄にすることがありません。さらに、アプリがすでにメモリにある場合はあまり表示されることもないです。
短所
短所?ではないかもしれませんが、この実装だとアニメーションのような画面を表示することができません。

2つ目の方法

2つ目は、Splash画面ようにActivityを作成する方法です。この方法だと、1つ目の方法でできなかったアニメーションや複雑な画面を実装することができます。

実装

この方法では、様々なやり方があると思いますが今回はCoroutineを使って実装します。
まず、Gradleに依存関係を記述します。

build.gradle
dependencies {
    //Coroutine
    implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.7'
}

新たにSplashActivityというActivityを作成します。

SplashActivity.kt
class SplashActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)

        CoroutineScope(Dispatchers.Main).launch {
            delay(2000)
            val intent = Intent(this@SplashActivity, MainActivity::class.java)
            startActivity(intent)
            finish()
        }
    }
}

このActivityでは2秒のdelayの後、MainActivityに遷移するという実装をしてあります。Splash画面用にActivityを作成することにより、レイアウトにアニメーションを追加したり、様々なことができます。今回はプログレスバーを表示させるSplash画面を作成しました。

activity_splash.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/splash"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Slash"
        android:textSize="40dp"
        app:layout_constraintBottom_toTopOf="@id/progressbar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

    <ProgressBar
        android:id="@+id/progressbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/splash"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

AndroidManifestに、起動時のActivityをSplashActivityに指定してあげれば完了です。

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

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

karass
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした