이번 포스팅에서는 스플래시 스크린을 만드는 법에 대해 알아보도록 하겠습니다.

아이콘을 선택하고 앱이 구동되서 메인화면을 보여주기 전까지 로딩 시간이 필요한데 그 시간동안 보여주는 화면을 스플래시 스크린이라고 합니다. 이때 앱 아이콘과 동일한 이미지로 스플래시 스크린을 설정하면 아이콘이 튀어 나오는듯한 효과를 볼 수 있습니다.

코딩 타임

이번 앱은 앱 아이콘을 설정하는 강의에서 만들었던 프로젝트를 변경하여 만들어 보도록 하겠습니다.

우선은 스플래시 스크린에 표시할 이미지를 선정해야 하는데, 저는 이전에 앱 아이콘으로 사용했던 이미지를 그대로 사용하도록 하겠습니다. 이미지는 PNGRepo에서 다운로드 하실 수 있습니다.

TiCons

안드로이드에 이미지를 추가할 때는 해상도를 고려하여야 하는데요, 예를들어 아이콘으로 사용하는 그림파일 같은 경우 hdpi부터 xxxhdpi까지 다양한 해상도가 고려되어 있습니다. 스플래시 스크린도 이렇게 다양한 해상도별로 이미지를 준비하여야 할 필요가 있습니다.

우리가 다운받은 이미지는 파일 하나기 때문에 이 파일을 해상도별로 준비를 해 주어야 합니다. 다만 이 작업을 직접 할 필요는 없고 이미지를 변환시켜주는 사이트를 이용하면 됩니다. 저는 TiCons라는 사이트를 이용합니다.

이 사이트의 옵션을 보면 여러가지 세팅이 있는데 Splashes, Android를 선택합니다. DPI는 mdpi부터 xxxhdpi까지 설정해 줍니다. 그리고나서 이미지를 업로드하고 Generate로 변환하면 각 해상도별 이미지를 자동으로 작성해 줍니다.

NinePatch

이때 Splashes 탭에 Nine이라는 옵션이 있습니다. 이 옵션은 안드로이드의 NinePatch 기능을 이용하도록 하는 것입니다.

안드로이드에서 이미지 파일을 사용할 때 OS의 필요에 따라 이미지를 늘리거나 줄이는 작업을 할 때가 있습니다. 이 때 이미지 내부에 글씨가 늘어가는 경우 확대 축소시 비율에 안맞게 내용이 깨질 수 있습니다. 그런데 NinePatch를 사용하면 내부에 정보를 담고있는, 깨지지 않아야 하는 부분은 그대로 놔두고 나머지 부분만 늘리도록 할 수 있습니다. 이것을 NinePatch image라고 하며 NinePatch image는 그림파일을 만들 때 뒤에 9라는 숫자를 붙여주면 안드로이드가 이 이미지를 나인패치 이미지로 인식하게 됩니다.

아무튼 여기서는 NinePatch 옵션을 활성화하도록 하였습니다.

다운로드 받은 파일을 보면 해상도별로 그림파일이 준비된 것을 확인할 수 있으므로 이 파일들을 res폴더에 복사하면 drawable 폴더 안에 background.9 폴더가 생긴것을 알 수 있습니다.

액티비티 작성

다음은 이미지를 표시해줄 액티비티를 하나 만들겁니다. 이 액티비티는 스플래시 스크린을 보여주기만 하고 바로 메인액티비티를 불러오는 역할만을 하게 됩니다.

우선은 스플래시 스크린으로 사용할 splash_screen.xml 파일을 작성합니다. 아까 추가해준 background 이미지를 흰색 바탕화면에 그려주는 단순한 형태입니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />

    <item>
        <bitmap
            android:src="@drawable/background"
            android:gravity="center" />
    </item>

</layer-list>

다음은 액티비티에서 사용할 테마를 추가합니다. res -> values -> themes.xml을 열어 다음과 같이 style을 추가합니다. 액션바가 표시되지 않아야 하기 때문에 NoActionBar 테마를 상속한 뒤 위에서 작성한 splash_screen을 표시하도록 합니다.

1
2
3

<style name="SplashScreen" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen</item>
</style>

그리고 SplashActivity.kt를 만들어 줍니다. 이 액티비티는 시작되자마자 메인액티비티를 불러오는 역할만하고 종료됩니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

        val intent = Intent(this, MainActivity::class.java)
        startActivity(intent)

        finish()
    }
}

마지막으로 AndroidManifest.xml에서 시작점을 MainActivity가 아닌 SplashActivity가 되도록 변경합니다. 이 때 SplashActivity의 테마는 themes.xml에서 추가해 준 SplashScreen으로 지정합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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

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

<activity android:name=".MainActivity" />

이렇게 해서 스플래시 스크린을 작성하는 법에 대해 알아보았습니다.