<Android>Splash화면에 Lottie Animation 넣어서 만들기

진섭·2023년 5월 12일

🔨 서론

제가 자주 이용하는 App 중에 콜리라는 App이 있는데 콜리를 실행할 때마다 귀여운 애니메이션이 튀어나와 사용자를 맞이합니다. 평소 귀여운 것과 아기자기한 것을 좋아하는 저로서는 콜리를 실행할 때마다 와.. 재밌네? 이런 생각을 들게 하는데 콜리는 자신이 좋아하는 캐릭터나 정보를 공유하는 플랫폼으로써 Splash 화면을 통해 이 App은 자신이 좋아하는 캐릭터를 덕질을 할 수 있다는 정체성을 보여주기도 한다. Splash 화면은 사용자한테 짧은 시간 동안 좋은 첫인상과 정체성을 남겨줄 수 있는 중요한 요소라고 생각해 블로그에 기록하기로 했습니다.

콜리 :https://play.google.com/store/apps/details?id=kr.co.colley.colley&hl=ko&gl=US&pli=1

🔨 Splash 화면

영어사전을 찾아보면 프로그램을 시작했을 때, 로딩 중에 표시되는 대형 이미지를 말한다. 라고 설명을 해주는데 저는 로딩 중에 표시되는 이미지나 애니메이션을 통해 사람도 첫인상이 중요하듯 App도 Splash 화면을 이용해 App의 정체성과첫인상을 보여줄 수 있는 효과를 줄 수 있다고 생각합니다.

🔨 Lottie

Lottie는 에어비앤비에서 개발한 Json 기반의 애니메이션 포맷으로, 어느 기기와 플랫폼에서든 사용할 수 있는 라이브러리입니다.

Lottie : https://lottiefiles.com/kr/what-is-lottie

🔨 Splash화면 + Lottie 만들기

이제 Lottie를 이용해 Splash화면를 만들어 보도록 하겠습니다.

1. 준비물 Lottie에서 원하는 애니메이션 json파일 찾기

2. 라이브러리 가져오기

Lottie를 사용하면 Lottie의 라이브러리를 가져와야 합니다.
공식문서에 들어가 살펴보면 프로젝트 build.gradle 파일에 아래 코드를 추가하라고 나오네요.
최신 버전이 6.0.0이기에 최신 버전을 사용하도록 하겠습니다.

dependencies {
    ...
    implementation "com.airbnb.android:lottie:6.0.0"
    ...
}

Lottie 공식문서: https://airbnb.io/lottie/#/android

3. res파일안에 raw파일 만들어주고 다운 받은 json 파일 넣기

사진과 같이 애니메이션 json 파일을 넣어줄 폴더를 만들어주고 raw폴더 안에 json 파일을 넣어줍니다.

4. splas화면 activity 만들어 주기

저는 꽉 차게 보여주기 위해 width, height를 모두 match_parent를 주었는데 취향에 맞게 크기를 조절하시면 됩니다.

app:lottie_autoPlay="true" : 자동 플레이를 할 것인지
app:lottie_loop="true" : 반복 재생을 할 것인지
app:lottie_rawRes="@raw/sky" : 아까 다운로드한 json 파일의 위치

   	<com.airbnb.lottie.LottieAnimationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/sky" />

참고 사이트: https://lottiefiles.com/blog/working-with-lottie/getting-started-with-lottie-animations-in-android-app

5. Android handler을 이용해 지연처리를 한 후 Intent로 MainActivity로 이동하기

제가 구현한 방식은 splashActivity에서 handler에서 postDelayed를 이용해 지연처리 후 Intent로 MainActiviy를 호출하는 방식입니다.

5.1 먼저 SplashActivity를 만들어 주세요.
그리고 loadSplashScreen()에서 postDelayed 메소드로 3초 딜레이를 주고 Intent로 MainActivity를 호출합니다. 그리고 SplashActivity를 finish() 로 종료해주세요.

class SplashActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)
        loadSplashScreen()
    }

    private fun loadSplashScreen() {
        Handler(Looper.getMainLooper()).postDelayed({
            val intent = Intent(this, MainActivity::class.java)
            startActivity(intent)
            finish()
        }, 3000)
    }

}

6. AndroidManifest에서 activity 순서 바꾸기

제가 구현한 방식은 먼저 splashActivity 에서 지연 처리 후 MainActiviy를 호출하는 방식입니다. 아래와 같이 순서를 변경해주세요!

        <activity
            android:name=".SplashActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

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