[Kotlin][Android] Splash Screen(로딩 화면) 구현하기

안녕하세요. 오늘은 안드로이드에서 Splash Screen을 구현하는 3가지 방법에 대해 얘기해보겠습니다.

1. 타이머 사용
2. Launcher Theme 사용
3. Splash Screen API (Android 12)

 

1. 타이머 사용

splash activity를 만들고  onCreate()에 정한 시간동안 보여주는 쓰레드를 위치시킵니다.

class SplashScreenActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash_screen)
        //이 메소드는 타이머가 끝나면 실행됩니다.
        Handler().postDelayed(Runnable {
            // 앱의 main activity로 넘어가기
            val i = Intent(this@SplashScreenActivity, MainActivity::class.java)
            startActivity(i)
            // 현재 액티비티 닫기
            finish()
        }, 3000)
    }
}

 

 

2. Launcher Theme 사용

1. 원하는 이미지를 비트맵으로 사용하여 drawable/splash_background.xml 에 시작 화면 배경을 만듭니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="<http://schemas.android.com/apk/res/android>">
    <item
        android:drawable="@drawable/bg_gradient"/>
    <item>
        <bitmap android:gravity="center"
            android:src="@drawable/splash_fg"/>
    </item>
</layer-list>

2. 앱 로고의 배경으로 사용할 drawable/bg gradient.xml에 gradient를 만듭니다. 배경은 앱에 따라 gradient 또는 모든 색상이 될 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="<http://schemas.android.com/apk/res/android>"
    android:shape="rectangle" >
    <gradient
        android:type="linear"
        android:angle="135"
        android:startColor="#ff1b49"
        android:endColor="#e67d20" />
</shape>
<!--원하는 색상을 선택하면 됩니다  -->

3. res/values/themes.xml 에서 스플래시 화면을 만드세요.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="SplashTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_background</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:statusBarColor">@color/colorAccent</item>
    </style>
</resources>

4. SplashScreenActivity 라는 이름의 빈 액티비티를 만들어 AndroidManifest.xml 에서 액티비티의 테마로 스타일을 설정합니다 .

<activity
    android:name=".SplashScreenActivity"
    android:theme="@style/SplashTheme">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
</activity>

5. SplashScreenActivity.java 에서 MainActivity.java 로 인텐트 전달

class SplashScreenActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        startActivity(Intent(this@SplashScreenActivity, MainActivity::class.java))
        finish()
    }
}

splash 화면이 이미 매니페스트에서 로드 되고 있기 때문에 xml 레이아웃과 함께 setContentView()가 필요하지 않습니다. 5초와 같이 정해진 시간동안 시작화면을 표시하려면 핸들러를 만들면 됩니다.

 

3. Splash Screen API 사용하기 

Android 12 릴리즈와 함께 Splash Screen API가 나왔습니다. 

Android 12에서 모든 앱은 기본적으로 중간에 앱 아이콘이 있는 시작화면을 표시합니다. 

Setup

새 API에 액세스하기 전에 몇 가지 설정을 해야합니다.

 

1. 앱 모듈 build.gradle 내에서 compileSdk 를 수정합니다. Gradle의 Splash Screen API 종속성을 버전 31로 설정합니다. 이전 버전과의 호환성을 위해 컴팩트 버전을 사용합니다.

android {
    compileSdk = 31
}

dependencies {
    val splahScreenVersion = "1.0.0"
    // Use: def instead of val if you are not using Kotlin Gradle(.kts)
  
    implementation("androidx.core:core-splashscreen:$splashScreenVersion")
}

 

2. value-night, values 디렉토리에 splash_theme.xml을 만듭니다. (다크모드와 라이트모드 호환을 위해)

 

3. 두 파일 모두에서 이제 어둡고 밝은 모드 시나리오에 대한 시작 화면 테마를 구성합니다. 

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Splash Screen Theme. -->
    <style name="Theme.AppSplash" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/dark</item>
        <item name="windowSplashScreenAnimatedIcon">@mipmap/ic_launcher_round</item>
        <item name="windowSplashScreenAnimationDuration">300</item>
        <item name="postSplashScreenTheme">@style/Theme.SplishSplash</item>

        <!-- Status bar and Nav bar configs -->
        <item name="android:statusBarColor" tools:targetApi="l">@color/dark</item>
        <item name="android:navigationBarColor">@color/dark</item>
        <item name="android:windowLightStatusBar">false</item>
    </style>
</resources>

-> value-night 폴더의 파일 

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Splash Screen Theme. -->
    <style name="Theme.AppSplash" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/white</item>
        <item name="windowSplashScreenAnimatedIcon">@mipmap/ic_launcher_round</item>
        <item name="windowSplashScreenAnimationDuration">300</item>
        <item name="postSplashScreenTheme">@style/Theme.SplishSplash</item>

        <!-- Status bar and Nav bar configs -->
        <item name="android:statusBarColor" tools:targetApi="l">@color/white</item>
        <item name="android:navigationBarColor">@color/white</item>
        <item name="android:windowLightStatusBar">true</item>
    </style>
</resources>

-> value 폴더의 파일 

 

4. 매니페스트 - 애플리케이션 태그의 android:theme에 이전에 생성한 Splash Screen 테마로 설정합니다. 

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.SplashThemeName"> //여기
        <activity
            android:name=".ui.main.MainActivity"
            android:exported="true"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

 

5. 메인액티비티의 super.onCreate() 직후 와 onCreate 메소드 내부에서 setContentView() 전에 사용합니다.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Enable support for Splash Screen API for
        // proper Android 12+ support
        installSplashScreen()
        
        setContentView(R.layout.activity_main)
    }
}

주의사항 및 권장사항

- 여기서 사용되는 앱 아이콘은 108dp보다 크면 안됩니다.(잘릴 수 있음)

- 아이콘은 드로어블, png, jpg,webp 

- AnimatedVectorDrawable 또는 AnimationDrawable은 안드로이드12에서만 작동하고 더 낮은 API레벨에서는 작동하지 않아서 windowSplashScreenBackground에 추가할 수 없습니다.

- 애니메이션 아이콘은 안드로이드 버전 12 이상에서만 사용할 수 있습니다.