[Android/Kotlin] Lottie Splash

오늘은 앱을 개발할 때 거의 필수적이라고 생각되는 Splash 화면을 개발해보았습니다.
로딩화면은 일반인들이 보기엔 앱이 켜지는 로딩시간이라고 볼 수도 있겠지만, 앱이나 회사의 브랜드를 홍보하는 아주 효율적인 홍보 방법이라고도 할 수 있죠.

사실 Splash 화면을 간단하게 만들려다가 효과를 줘서 이쁘게 만드는게 낫지 않나 싶어, 구글링으로 이리뒤적 저리뒤적하다 Lottie Animation이라는 것을 발견했습니다. Lottie 공식 사이트에 들어갔더니 개발 용도별로 설명이 아주 잘 되어있어 손쉽게 만들 수 있었습니다.

이제 이 Lottie Animation을 사용해서 로딩화면을 만들어본 방법을 포스팅하고자 합니다.

Lottie-Animation 무료 다운 : https://lottiefiles.com/featured

Lottie-Android 공식 블로그 : https://lottiefiles.com/blog/working-with-lottie

🎨 Lottie json파일 다운받기

📑 res폴더에 raw폴더 만든후 json파일 넣기

res폴더에 우클릭을 하고 New -> Android Resource Directory -> raw를 입력하여 폴더를 만듭니다.
그 다음 다운받은 json파일을 드래그하여 raw폴더에 넣어주면 됩니다.

📌 프로젝트 설정

우선, Lottie를 사용하기에 앞서 build.gradle(:app)에 들어가서 설정을 해야합니다.
현재 최신 버전은 5.0.3입니다. (작성일자 2022.03.23)

dependencies {

  implementation 'com.airbnb.android:lottie:5.0.3'

}

🌞 activity_splash.xml

원하는 대로 xml을 구성합니다. 저는 TextView와 ImageView, LottieAnimationView를 띄웠습니다.

    <TextView
        android:id="@+id/introtext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="AI와 함께하는"
        android:textSize="18sp"
        android:textColor="@color/black"
        android:fontFamily="@font/bazzi"
        android:layout_marginTop="150dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <ImageView
        android:id="@+id/logo"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="5dp"
        app:layout_constraintTop_toBottomOf="@+id/introtext"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/shiritori" />

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animationView"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:layout_marginTop="300dp"
        app:layout_constraintTop_toBottomOf="@+id/logo"
        app:layout_constraintBottom_toTopOf="@+id/introteam"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/loading_lottie" />

    <TextView
        android:id="@+id/introteam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Github: sinbee0402"
        android:textSize="12sp"
        android:textColor="#939393"
        android:fontFamily="@font/bazzi"
        android:layout_marginBottom="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

🌚 SplashActivity.kt

특정 시간동안 SplashActivity 화면을 보여주기 위해 Handler를 사용합니다.
저는 Splash화면을 3초동안 보여준 뒤 MainActivity로 이동하게 구현했습니다. Splash화면은 앱을 켰을 때 딱 한번만! 보여주는 화면이므로 꼭 finish()를 사용해 닫아주도록 합니다.

package com.example.shiritori

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler

class SplashActivity : AppCompatActivity() {

    private val SPLASH_TIME_OUT: Long = 3000  //3 sec

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)

        Handler().postDelayed({  //3초(SPLASH_TIME_OUT)가 지나면 이 메서드가 실행됨

            //main activity 시작
            startActivity(Intent(this, MainActivity::class.java))

            //액티비티 닫기
            finish()
        }, SPLASH_TIME_OUT)
    }

    override fun onBackPressed() {
        super.onBackPressed()
    }
}

⭐ AndroidManifest.xml

앱을 켰을 때 맨처음 SplashActivity가 실행되도록 AndroidManifest의 <intent-filter>를 SplashActivity로 지정해줍니다. MainActivity에 존재하는 <intent-filter>를 SplashActivity로 옮겨주면 됩니다.
마지막으로 보통의 Splash화면에서는 Action Bar가 보이지않기에 Theme.AppCompat.NoActionBar를 사용해 Action Bar를 없애줍니다.

<application>
        <activity
            android:name=".SplashActivity"
            android:theme="@style/Theme.AppCompat.NoActionBar">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

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

🌠 포스팅을 마치며

현재 만들고 있는 앱은 끝말잇기 앱인데 초심자도 개발할 수 있는 간단한 (넓은 의미의) 인공지능을 사용해 만들고있습니다.

오늘 처음 벨로그를 작성해보았지만 앞으로도 이 프로젝트를 통해 벨로그를 꾸준히 작성해 볼 생각입니다.

참고 블로그 : https://velog.io/@tlsgks48/Kotlin-로딩화면-Splash-만들기-feat.-Lottie