Kotlin - Android 앱 개발하기 (3) - splash 추가

앱을 실행시키면 Activity가 띄워질때까지 흰 화면이 보일것이다.

이것을 감추기위하여 splsh 화면을 추가해보자.

 

순서는 새로운 splash 전용 새로운 액티비티를 생성하고 해당 액티비티에 theme 로 splash 이미지를 걸어둘것이다.

 

1. 이미지 다운로드 및 추가

난 적당히 로고로 사용할 이미지를 다운받았다

https://pixabay.com

 

이미지를 프로젝트의 res > drawable 폴더에 추가한다

 

2. 로고 이미지 resource 화

이미지를 그대로 사용하기보다는 themes 에 추가하여 사용하는것이 재사용성에 좋다

 

우선 drawable 우클릭 -> New -> Drawable Resource File 선택 후 file name 을 splash.xml 로 설정한다

 

 

아래와 같이 코드를 바꿔준다.

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

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>

    <item android:bottom="0dp" android:right="30dp">
        <bitmap
            android:gravity="center_vertical|right"
            android:src="@drawable/logo" />
    </item>

</layer-list>

 

이미지를 xml resource 로 바꿔준것이며 바탕화면을 하얀색으로 바꾸고 이미지를 추가해주었다.

 

3. Themes에 해당 resource 추가

 

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.Basic_mobile" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your light theme here. -->
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
    </style>

    <style name="Theme.Basic_mobile" parent="Base.Theme.Basic_mobile" />

////추가////
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.Bridge">
        <item name="android:textSize">18dp</item>
    </style>
 ////추가////
    <style name="AppTheme.Splash">
        <item name="android:windowBackground">@drawable/splash</item>
    </style>

</resources>

 

4. Entry Activity 추가

empty activity 를 추가해주자. 파일명은 EntryActivity 이며 activity_entry.xml 은 건들지말고 EntryActivity.kt 파일만 수정한다

class EntryActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        goPageIntro()
    }

    fun goPageIntro() {
        Handler(Looper.getMainLooper()).postDelayed({
            val intent = Intent(this, IntroActivity::class.java)
            startActivity(intent)

            finish()
        },1500) //여기숫자로 splash 화면 초 설정 가능
    }
}

 

해당 액티비티에 들어오면바로 IntroActivity 로 이동하게 하는 로직을 추가했다.

 

5. AndroidManifest 수정

 

이렇게 만든 EntryActivity 가 앱 첫실행 시 로드되도록 AndroidManifest를 수정해보자

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" >

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Basic_mobile"
        tools:targetApi="31" >
        <activity
            android:name=".IntroActivity"
            android:exported="false" />
        <activity
            android:name=".MainActivity"
            android:exported="false" />
        <activity
            android:name=".EntryActivity" ////수정////
            android:exported="true"
            android:theme="@style/AppTheme.Splash" > ////수정////
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

 

이렇게 하면 logo 이미지를 resource 화 시키고 theme 에 등록시켜서 android:theme 으로 불러오기까지 완성!

 

 

 

추가적으로 오류사항을 발견했다. splash 화면을 넣었음에도, 상단에 basic_mobile 이라는 app name이 노출된다.

app name을 없애보자

 

6. app name 제거

themes.xml 파일을 수정해보자

 

....

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.NoActionBar.Splash">
        <item name="android:windowBackground">@drawable/splash</item>
    </style>
....

 

windowActionBar , windowNotitle 속성을 추가했다.

그리고 겸사겸사 다른이미지로 바꿈...

이렇게하면 더이상 app name이 보이지않는다.