[Kotlin] Splash Screen(로딩 화면) 만들어보기

Splash Screen이란 어플을 실행시켰을 때, 로딩 중 일때 화면에 표시되는 이미지 또는 로고를 말합니다.

이러한 화면은 우리가 사용하는 앱의 대부분에서 적용되어 있습니다.

카카오톡, 페이스북, 인스타그램 등등 어플을 처음 실행하게 되면 위와 같이 각 어플의 로고 또는 이미지들을 애니메이션처럼 보여주는 것을 볼 수 있습니다.

이러한 로딩화면(Splash Screen)을 간단하게 만들어 보겠습니다.

 

1. Splash Screen Activity생성하기

우선 Splash Screen을 만들 Activity를 생성합니다.

new -> Activity -> Empty Activity 선택을 해주고 이름은 SplashActivity라고 생성합니다. 

 

2. 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SplashActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/water"
        android:scaleType="centerCrop"/>

</androidx.constraintlayout.widget.ConstraintLayout>

생성한 layout에 Splash Screen에 어떠한 이미지를 보여줄지 설정합니다.

layout -> activity_splash.xml에서 원하는 이미지 또는 원하는 형태의 Splash Screem화면을 구성합니다.

 

3. SplashActivity.kt

package com.duran.testapp

import android.content.Intent
import android.os.Bundle
import android.os.Handler
import androidx.appcompat.app.AppCompatActivity

class SplashActivity : AppCompatActivity() {

    // Splash Screen을 몇초동안 보여줄것인지 선언 / 1초 = 1000
    private val SPLASH_TIME_OUT: Long = 3000 // 4초동안 보여줍니다.

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

        // 일정 시간 지연 후 실행하기 위한 코드입니다.
        // Handler를 통해서 UI쓰레드를 컨트롤 합니다.
        val handler = Handler()
        // postDelayed() 를 통해 일정 시간, 딜레이 시간동안 쓰레드작업을 멈춥니다.
        handler.postDelayed({
            // {딜레이 이후 동작입니다.} 를 통해서 딜레이 시간 이후의 동작을 정의해줍니다.
            val intent = Intent(this, MainActivity::class.java)
            startActivity(intent)
            finish()
        }, SPLASH_TIME_OUT)
    }
}

kotlin파일로 이동 후 Splash Screen을 몇초동안 보여줄 것인지, 정한 시간이 끝나면 어디로 이동할 지 작성합니다.

 

4. AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.duran.testapp">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.TestApp"
        tools:targetApi="31">
        <!-- 처음 시작화면 변경 -->
        <activity
            android:name=".SplashActivity"
            android:exported="true"
            android:label="@string/title_activity_splash"
            android:theme="@style/Theme.TestApp.NoActionBar"><!-- 엑션바 제거 -->
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

        </activity>
    </application>

</manifest>

manifests -> AndroidManifest.xml 파일에서 처음 시작화면을 main에서 splash로 변경해줍니다.

<intent-filter>
    <action android:name="android.intent.action.MAIN" />

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

이 부분이 원래 mainActivity에 있는데 SplashActivity로 이동시켜 주면 처음 시작화면이 변경되게 됩니다.

이렇게 하게되면 아주 간단하게 Splash Screen화면 설정이 끝났습니다.

실행시켜 보게되면

 

어플을 실행하게 되면 설정한 image가 3초간 보여지게 되고 3초가 지난뒤 딜레이 이후 동작인 MainActivity로 이동하게 되는것을 확인할 수 있습니다!