[ Android ] 스플래시 화면 ( 로딩 화면 )

 

이 글은 부스트코스 강의를 공부하며 요약한 글입니다.

 

  CatServant  

 Splash Screen ( 로딩 화면 )

 

앱이 실행되기 전에 잠깐 보였다 사라지는 화면을 Splash Screen이라고 부릅니다. 이 화면은 앱이 어떤 것인지를 알려주는 역할도 하고 메인 화면이 초기화될 때까지 시간이 걸리면서 사용자에게 주는 지루함을 없애주는 역할도 합니다.

 

Splash Screen을 구현하는 방법은 2가지로 나눌 수 있습니다. 

1. 로딩 화면을 메인으로 설정하는 방법 ( SplashActivity → MainActivity )

2. 메인 화면에서 로딩 화면을 호출하는 방법 ( MainActivity → SplashActivity → MainActivity )

 

아래의 코드는 앱의 시작점을 로딩 화면으로 설정하는 방법입니다.

 

 Code

• manifests /  AndroidManifest.xml

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <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가 처음 보이도록 할 것인지는 매니페스트 파일에서 설정합니다.

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

• res / values / styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

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

</resources>

Splash 화면을 위한 Activity는 소스 코드를 만든 후 이 Activity의 스타일을 지정해줍니다.

Activity이니 소스코드와 XML 레이아웃으로 구성할 수도 있지만 좀 더 가볍게 구성하기 위해 XML 레이아웃을 만들어 인플레이션하는 방식이 아니라 Manifest에서 theme 속성으로 스타일을 지정하는 방식을 사용합니다. 이 때문에 위와 같이 styles.xml 파일에 SplashTheme이라는 이름의 스타일을 만들어줍니다.

• res / values / splash_background.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/ic_thumb_up" android:gravity="top"/>
    </item>
</layer-list>

<item> tag 중 하나는 화면 전체를 채울 splash_base 라는 이름의 drawable을 설정하는 tag 이며 다른 하나는 ic_thumb_up.png 파일을 특정 위치에 설정하는 tag 입니다. ic_thumb_up.png 파일은 미리 만들어둔 아이콘 이미지이므로 bitmap으로 보이도록 하면 되고 drawable 폴더 안에 넣어두면 됩니다. 

• res / drawable / splash_base.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>

• SplashActivity.java

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

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

        // 1초 뒤에 Runnable 객체 안의 run이 실행됨
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                Intent intent = new Intent(getApplicationContext(), MainActivity.class);
                startActivity(intent);

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

onCreate 메소드 안에 setContentView 메소드가 없다는 점에 유의해야 합니다. ( = Inflation을 진행하지 않습니다. )

Activity가 메모리에 만들어지면 1초 후에 메인 화면으로 전환되도록 Handler를 이용합니다. Handler로 전달되는 Runnable 객체 안에서 1초 뒤에 MainActivity를 띄워주도록 합니다.

 

 

 실행 결과

 

출처

1. https://www.edwith.org/boostcourse-android/lecture/20495/

2. http://dudmy.net/android/2015/08/11/create-android-loading/

[LECTURE] 1) 스플래시 화면 : edwith

안드로이드 로딩 화면 구현하기 - Dudmy's DevLog