[Android] Splash Screen 만들기 (with Lottie)

프로젝트를 하다가 splashScreen을 만들고 싶어서 찾아보게 되었다

내가 한 방법이 100% 정답은 아님

 

---

 

1. dependency 설정

dependencies {
    implementation("androidx.core:core-splashscreen:1.0.0")
}

 

2. theme에 splash관련 속성 지정

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- 기본 전역 테마 설정 -->
    <style name="Base.Theme.Sai" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="android:textViewStyle">@style/customTextViewFontStyle</item>
        <item name="android:buttonStyle">@style/BaseButtonStyle</item>
        <item name="android:editTextStyle">@style/customEditTextViewFontStyle</item>
        <item name="android:imageButtonStyle">@style/customImgBtnViewFontStyle</item>

        <!--themes에 pretendard 폰트 전체 적용-->
        <item name="android:fontFamily">@font/font_family</item>

        <!--툴바, 툴바텍스트 스타일 적용-->
        <item name="toolbarStyle">@style/ToolbarStyle</item>

        <!-- 카드뷰 아웃라인 전체 적용 -->
        <item name="materialCardViewStyle">@style/CustomMaterialCardView</item>
    </style>

    <style name="Theme.Sai.Splash" parent="Theme.SplashScreen">
        <!-- splashScreen background 색상 지정 -->
        <item name="windowSplashScreenBackground">@color/primary</item>
        <!-- splashScreen에서 보여줄 icon -->
        <item name="windowSplashScreenAnimatedIcon">@drawable/splash_icon_img</item>
        <!-- splashScreen 이후에 바뀔 테마 -->
        <item name="postSplashScreenTheme">@style/Theme.Sai</item>
    </style>

    <style name="Theme.Sai" parent="Base.Theme.Sai" />
</resources>

 

windowSplashScreenBackground : 스플래시 스크린 백그라운드에 적용할 색상
windowSplashScreenAnimationIcon : 스플래시 스크린에서 보여줄 아이콘
postSplashScreenTheme : 스플래시 스크린 테마 이후로 보여줄 테마

 

windowSplashScreenAnimationIcon에 설정해야하는 이미지는 공홈에서 다음과 같이 설명하고 있다

스플래시 화면 크기

스플래시 화면 아이콘은 다음과 같이 적응형 아이콘과 동일한 사양을 사용합니다.

• 브랜드 이미지: 200x80dp여야 합니다.
• 아이콘 배경이 있는 앱 아이콘: 240x240dp여야 하며 지름이 160dp인 원 내에 들어맞아야 합니다.
• 아이콘 배경이 없는 앱 아이콘: 288x288dp여야 하며 지름이 192dp인 원 내에 들어맞아야 합니다.

예를 들어 이미지의 전체 크기가 300x300dp인 경우 아이콘은 직경이 200dp인 원 안에 들어맞아야 합니다. 원 외부의 모든 항목이 보이지 않게 됩니다 (마스킹됨).

 

 

나의 경우에는 아이콘에 배경이 없기 때문에 288x288로 설정하고

192x192 원을 하나 만들어서 그 안에 아이콘이 들어가게끔 했다(그 다음 원을 삭제함)

근데 나의 경우 아이콘이 gif라서 다음과 같이 설정해주었다

 

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

<animated-image
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/splash_text_logo02"
    />

 

animated-image관련 참고

 

3. AndroidManifest.xml에 관련 설정

<application
    android:name=".util.ApplicationClass"
    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.Sai.Splash"
    tools:targetApi="31"
    >

아까 theme에서 설정한 스플래시 스크린 테마명을 적어준다 

그러면 처음에 실행될 때는 스플래시 스크린 메타가 적용되고 그 다음 postSplashScreenTheme에 설정한 테마들이 적용이 된다

 

4. MainActivity에서 스플래시 스크린 실행

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private lateinit var navController: NavController

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        installSplashScreen()
        
        }
}

 

---

 

근데 다 만들고나서 알게 된 사실인데 애니메이션 아이콘은 AVD 형식을 권장한다고 한다...

 

 

내가 사용한 animated-image는 AnimatedImageDrawable(AID)이라서 수정이 좀 필요할거같다

예시도 나와있어서 보니까 animated-vector인가를 썼던데... 나중에 수정해봐야겠다

 

참고 : 

https://developer.android.com/develop/ui/views/launch/splash-screen?hl=ko#kts

https://developer.android.com/reference/android/graphics/drawable/AnimatedImageDrawable