android 12 (api 33) 부터 기본으로 제공되는 Splash screen api 를 이용하여 움직이는 효과가 적용된 Splash screen 을 만들어 보자.

1. Icon Design

Icon 을 기본적으로 디자인 할때는 SVG (Scalable Vector Graphics) 을 기본으로 디잔인 한다.

1-1. Icon Guide line 을 참고 해야 한다.

• Splash screens Guidelines

1. 위 글에 따라 Icon 은 2개의 사각형과 1개의 원형을 규격을 가진다.
2. 바깥 사각형은 288 크기의 정사각형이다.
3. 안쪽 사각형은 192 크기를 가진다.
4. 마지막으로 원형은 지름을 192에 맞춰서 안쪽 사각형의 내부에 채워지는 원형이다.

2. Icon design 도구

여러가지 그리기 도구가 있지만 이글에서 Figma 를 이용하여 Icon 을 디자인 하도록 하였다.

• Figma 사이트

1. Figma 사이트나 앱을 이용하여 새 Drafts 에 새파일을 만들고
2. Frame 을 이용하여 288 x 288 크기의 프래임을 만든다.
3. Frame 속에 사각형(Rectangle) 을 이용하여 사각형을 그린다. x와y는 48,48 이고 크기는 192x192 로 설정한다.
4. 사각형에 맞추어 원(Ellipse)을 그려준다. - 원의 지름이 192가 되게 된다.
5. Icon으로 넣을 그림을 원(Ellipse)내에 맞춰서 옮긴다. - 원을 벗어나면 안된다.

• PNG -> SVG 사이트
• PNG -> SVG 사이트

  사이트 마다 결과물이 다르게 나오니 편한데로 사용해서 SVG 파일을 Pigma 의 원내에 넣으면 된다.

1. 원과 안쪽 사각형을 지우고 프래임의 배경도 지운다.

3. animation 적용하기.

shapeshifter.design 사이트에서 에니메이션을 제작할 수 있다.

4. AndroidStudio 에서 작업

1. Splash libary 를 추가한다.

// build.gradle.kts

// splash scree
  implementation(libs.androidx.core.splashscreen)

# libs.versions.toml

[versions]
agp = "8.3.2"
coreSplashscreen = "1.1.0-rc01"

[libraries]
androidx-core-splashscreen = { module = "androidx.core:core-splashscreen", version.ref = "coreSplashscreen" }

2. Theme 를 설정한다.

• 기초 Theme 를 설정한다.

<!--  res/value/splash.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.AnimatedSplash.AppSplash" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/white</item>
        <item name="postSplashScreenTheme">@style/Theme.Lunacal</item>
    </style>
</resources>

• 제작된 avd_anim.xml 파일을 /res/drawable/ 에 주입해서 넣는다.
• 기초 splash.xml 파일에 주입해서 넣은 xml 파일을 설정한다.

<item name="windowSplashScreenAnimatedIcon">@drawable/avd_anim</item><item name="windowSplashScreenAnimationDuration">1000</item>

• 그러니까 완성된 splash.xml 파일은 다음과 같다.

<!--  res/value/splash.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.AnimatedSplash.AppSplash" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/white</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/avd_anim</item>
        <item name="windowSplashScreenAnimationDuration">1000</item>
        <item name="postSplashScreenTheme">@style/Theme.Lunacal</item>
    </style>
</resources>

3. Theme 를 앱에서 사용하도록 설정한다.

• manifests 에 android:theme="@style/Theme.AnimatedSplash.AppSplash">를 설정함

<!-- app/manifests/AndroidManifests.xml -->
<activity
  android:name=".ui.MainActivity"
  android:exported="true"
  android:label="@string/app_name"
  android:theme="@style/Theme.AnimatedSplash.AppSplash">
        

4. MainActivity 에서 splashScreen 을 호출

// MainActivity.kt 
// onCreate()
    val splashScreen = installSplashScreen()
    splashScreen.setKeepOnScreenCondition { vm.isLoading.value }
    
// vm