[AOS] Splash Screen Api 적용기 ( api 12 ), 하위 버전 호환까지

수정 이력

- 22.12.20 : 최초 작성

- 22.12.27 : 지정한 Splash Screen 끝나고 아이콘 잔상이 남아 보이는 문제 

 

 

평소 퍼블릭한 작업이 끝나고 남는 시간에는 리팩토링을 하는데, 최근 어느정도 코드가 자리 잡아서 성능 개선도 병행해서 진행하고자 합니다.

그래서 Screen Api가 추가 됐단 얘기를 들은지 한참 지났지만 이제라도 대응해보려고 합니다! 

Splash Screen Api 

많은 앱들이 구동에 필요한 정보들을 호출하거나 아이덴티티를 보여주는 용도로 스플래시 화면을 구현해 사용하고 있었는데

구글에서 Splash Api를 만들어서 12버전 이상의 디바이스부턴 강제하도록 했습니다.

 

대응하지 않은 앱들은 아이콘 모양의 스플래시와 앱에서 추가한 화면인 스플래시도 보여주기 때문에 유저에게 불편함을 줍니다.

아래 영상은 예시로 투썸플레이스 앱입니다.

1. 투썸 아이콘이 중앙에 위치한 화면 
2. 투썸에서 제공하는 스플래시 화면 

시간만 보면 오래 걸리지 않겠지만 자주 진입할수록 유저들에게 피로를 가져다줄 것입니다.

 

그래서 어떤것들을 제공하며 커스텀 가능한지 알아보고 그에 맞게 대응해보시죠!

1. 스플래시 이미지 ( 위 사진에서 상단 네모 박스 안 ) 
2. 스플래시 이미지 배경 색상 ( 미설정시 1번만 보임 ) 
3. 스플래시 배경 ( 배경 색상 ) 
4. 스플래시 이후 테마  ( 테마 ) 
5. 브랜드 이미지 ( 맨 우측 사진에서 하단 네모 ) 

위 5가지를 커스텀할 수 있습니다.

권장 사이즈

스플래시 이미지(1)의 권장 사이즈는 배경이 있는 경우 240dp * 240dp , 없는 경우 288dp * 288dp지만 짤릴수 있기 때문에

각각 지름 160dp, 190dp안에 들어오는 이미지로 해야 합니다.

브랜드 이미지(2)의 사이즈는 200dp * 80dp 입니다.

마이그레이션 ( 기존 버전에 추가 ) 

build.gradle ( app level )

    // splash Screen api
    implementation 'androidx.core:core-splashscreen:1.0.0-beta02'

 

스타일 설정 ( v31용 )

아래 속성들은 31버전 부터 사용 가능합니다.

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

    <style name="AppTheme.SplashScreen" parent="AppTheme.NoActionBar">

        <!-- API 31+ specific attributes -->
        <item name="android:windowSplashScreenBackground">@color/white</item>
        <item name="android:windowSplashScreenAnimatedIcon">@drawable/avd_anim</item>

    </style>
</resources>

Parent의 'AppTheme.NoActionBar' 는 기존 앱에 사용중이던 테마로 상속받습니다.

사용중인 속성은 아래 두가지입니다.

android:windowSplashScreenBackground = 스플래시 배경색
android:windowSplashScreenAnmatedIcon = 스플래시 아이콘

그외에도 아래와 같은 속성이 있습니다.

android:windowSplashScreenAnimationDuration = 스플래시 화면 지속 시간
android:windowSplashScreenIconBackground = 스플래시 아이콘 배경색 
android:windowSplashScreenBrandImage = 스플래시 화면 하단에 브랜드 이미지 
postSplashScreenTheme = 스플래시 화면후에 보일 화면의 테마 지정 

AndroidManifest.xml

생성된 스타일은 Application에 지정합니다. 

 <application
        android:theme="@style/AppTheme.SplashScreen">

위 처럼 지정하면 중복해서 나오던 화면이 하나로 통합되어 나오는걸 확인할 수 있습니다.

 

추가적으로 스플래시 이미지에 애니메이션을 넣을수 있는데 해당 내용은 별도 포스팅 하겠습니다. 

아래는 구글 지메일 예시로 앱 구동시 M의 모양 색상이 변하는걸 보실수 있습니다.

 

 

Android12미만 버전 호환

위처럼 설정 했을 경우 Api 버전에 따라 다른 스플래시 화면을 맞이하게 됩니다.

되도록 유저간 ux를 다르게 하지 않게 하고자 같은 화면을 보도록 해줍시다.

 

스타일 설정 ( 기본 ) 

위에서 작성한 테마외 하위 버전용 테마를 따로 작성해야 합니다.

( 중요 :  parent에 'Theme.SplashScreen' , postSplashScreenTheme 필수) 

    <style name="AppTheme.SplashScreen" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/black</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/avd_anim</item>
        <item name="windowSplashScreenAnimationDuration">1000</item>
        <item name="postSplashScreenTheme">@style/AppTheme.NoActionBar</item>
    </style>

 

Androidmanifest.xml

시작하는 엑티비티에 작성한 위의 테마를 설정하고 기존 Application 테마를 앱 전용 테마로 변경해야 합니다.

    <application
        android:theme="@style/AppTheme.NoActionBar">

		<activity
            android:name=".Activity"
            android:theme="@style/AppTheme.SplashScreen"
            >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

 

Activity.kt

setKeepOnScreenCondition을 사용해 위 테마에 적용된 Splash Screen Api를 유지할지 정합니다. 

	
    private var isShowDialog = false// 다이얼로그를 보여줘야 하는디
	
	override fun onCreate(saveInstanceState: Bundle?) {
        val splashScreen = installSplashScreen()
        super.onCreate(saveInstanceState)

        splashScreen.setKeepOnScreenCondition{!isShowDialog}
    }

isShowDialog 변수를 이용해서 스플래시 유지를 지정하는 이유는 강제 업데이트가 필요하거나

필수 데이터를 로드하지 못한 경우 진입하지 못하도록 팝업을 띄워야 하기 때문입니다.

 

Splash Screen Api 테마가 사라질 경우 기존 스플래시 Activity의 xml 코드가 들어나게 됩니다. 

이질감을 주지 않기 위해선 Splash Screen Api와 xml 디자인을 일치를 추천합니다.

 

 

아이콘 잔상 문제  (22.12.27일 추가)

Splash Screen Api를 적용할때 생성한 아이콘의 배경 색상과 함께 아이콘의 형태가 잔상으로 남아 보였습니다. 

stlyes에 windowBackground 속성을 줘도 변함이 없었고 

생성한 아이콘은 avd파일에 순수 아이콘만 남겼더니 증상은 해결됐습니다.

꼭 필요하지 않으면 아이콘의 배경은 주지 말고 

스타일의 배경색상으로 스플래시 배경을 채워보세요!