들어가기 전에

앱이 실행되기 전에 잠깐 보였다 사라지는 화면을 스플래시 화면이라고 부릅니다.

이 화면은 앱이 어떤 것인지를 알려주는 역할도 하고 메인 화면이 초기화될 때까지 시간이 걸리면서 사용자에게 주는 지루함을 없애주는 역할도 합니다.

물론 메인 화면이 금방 보이는 경우에는 굳이 필요하지 않을 수도 있습니다.

그래도 여러 가지 장점이 있으니 만드는 방법을 알아두는 것이 좋겠죠?

스플래시 화면을 어떻게 만들 수 있는지 알아봅시다.

학습 목표

1. 앱에 스플래시 화면을 추가하는 방법을 알아봅시다.
2. 스플래시 화면을 위한 레이아웃과 소스 코드에 대해 설명해봅시다.

핵심 단어

• Splash Screen
• Drawable XML

학습하기

스플래시 화면

스플래시 화면은 메인 화면이 보이기 전에 보이는 화면입니다.

화면 단위이므로 액티비티로 만들 수 있죠.

앱이 실행되었을 때 어떤 액티비티가 처음 보이도록 할 것인지는 매니페스트 파일(AndroidManifest.xml)에서 설정합니다

따라서 매니페스트 파일을 열고 처음 보일 액티비티를 스플래시를 위한 액티비티로 설정해야 합니다.

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

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

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

<application> 태그 안에 추가된 <activity> 태그를 보면 자동으로 만들어졌던 메인 액티비티가 일반적인 액티비티로 설정되어 있고, 새로 만든 SplashActivity가 처음 띄울 액티비티로 설정되어 있습니다.

이 액티비티는 새로 만들어줍니다.

SplashActivity

스플래시 화면을 위한 액티비티는 소스 코드를 만든 후 이 액티비티의 스타일을 지정해줍니다.

액티비티이니 소스 코드와 XML 레이아웃으로 구성할 수도 있지만 좀 더 가볍게 구성하기 위해 XML 레이아웃을 만들어 인플레이션하는 방식이 아니라 매니페스트에서 theme 속성으로 스타일을 지정하는 방식을 사용합니다.

이 때문에 /res/values 폴더 안에 있는 styles.xml 파일에 SplashTheme이라는 이름의 스타일을 만들어줍니다.

먼저 SplashActivity 소스 코드를 만듭니다.

public class SplashActivity extends AppCompatActivity {
    Handler handler = new Handler();

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        handler.postDelayed(new Runnable() {
            public void run() {
                Intent intent = new Intent(getApplicationContext(), MainActivity.class);
                startActivity(intent);

                finish();
            }
        }, 1000);
    }
}

onCreate 메소드 안에 setContentView 메소드가 없다는 점에 유의해야 합니다.

다시 말해 이 소스 코드에서는 인플레이션을 진행하지 않습니다.

액티비티가 메모리에 만들어지면 1초 후에 메인 화면으로 전환되도록 핸들러를 이용합니다.

핸들러로 전달되는 Runnable 객체 안에서 1초 뒤에 MainActivity를 띄워주도록 합니다.

(스플래시 화면을 만드는 다양한 방법이 있을 수 있으며, 여기에서는 그 중 하나의 방법을 사용하고 있습니다. 예를 들어, 스플래시 화면 제작 시에 Handler.postDelayed 메소드를 사용하지 않고 바로 메인 액티비티를 띄울 수도 있습니다.)

스플래시 화면을 위한 스타일 정의

스플래시 화면에는 SplashTheme이라는 이름의 스타일이 설정됩니다.

이 스타일은 /res/values 폴더 안에 들어있는 styles.xml에 정의합니다.

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

SplashTheme을 보면 NoActionBar를 상속하여 액션바 부분이 보이지 않도록 했으며 windowBackground 속성에 드로어블을 지정하여 배경으로 보이도록 했습니다.

배경으로 보일 드로어블은 drawable 폴더 안에 넣어주고 XML로 만들어줍니다.

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

    <item android:drawable="@drawable/splash_base" />

    <item android:top="210dp">
        <bitmap android:src="@drawable/profile" android:gravity="top" />
    </item>

</layer-list>

드로어블 XML을 보면 두 개의 <item> 태그가 들어 있습니다.

하나는 화면 전체를 채울 splash_base라는 이름의 드로어블을 설정하는 태그이며 다른 하나는 profile.png 파일을 특정 위치에 설정하는 태그입니다.

profile.png 파일은 미리 만들어둔 아이콘 이미지이므로 비트맵으로 보이도록 하면 되고 drawable 폴더 안에 넣어두면 됩니다.

splash_base.xml에는 그러데이션으로 색상이 보이도록 XML로 만들어줍니다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:startColor="#FF3E50B4"
        android:centerColor="#FF7288DB"
        android:endColor="#FF7288DB"
        android:angle="90"
        android:centerY="0.5" />

    <corners android:radius="0dp" />

</shape>

드로어블 XML을 만드는 방법을 안다면 어렵지 않게 구성할 수 있을 것입니다.

생각해보기

1. SplashActivity를 위한 XML 레이아웃을 만들고 인플레이션하여 설정하는 것도 가능할까요?
2. SplashActivity에 설정하는 스타일을 수정해서 원하는 모양으로 만들어볼 수 있을까요?
   

참고자료