Android 움직이는 이미지 엑티비티에 넣기(feat. Lottie)

Android 움직이는 이미지를 액티비티에 넣는 방법에 대해 알아봅시다.

Android 움직이는 이미지

 

 

움직이는 이미지를 삽입하기 위해서는 우선 움직이는 이미지가 필요합니다.

움직이는 이미지를 구하는 방법 및 적용하는 방식에 대해 알아봅시다.

 

Lottie에서 이미지 파일 구하기

Lottie 사이트를 통해 앱의 UI에 맞는 이미지를 찾아봅시다.

간단한 회원가입 및 로그인으로 무료 이미지를 구할 수 있습니다.

https://lottiefiles.com/

Free Lottie Animation Files, Tools & Plugins - LottieFiles

 

Discover > Free Animations 메뉴를 통해 무료 이미지를 찾아볼 수 있습니다.

Lottie 사이트

 

원하는 이미지를 클릭 후 꼭 'Lottie JSON'으로 다운로드합니다.

이미지를 JSON 파일로 다운로드

 

이것으로 움직이는 이미지를 만들었습니다.

이제 Android Studio를 통해 해당 이미지를 화면에 적용해 봅시다.

 

Android Studio에 이미지 삽입하기

우선 안드로이드 기본 라이브러리에는 제공되지 않는 기능이기에 Lottie 라이브러리를 Dependencies에 추가해야 합니다.

저는 v5.0.2 버전을 사용했습니다.

 

build.gradle (app)

dependencies {
	...
    implementation 'com.airbnb.android:lottie:5.0.2'

}

 

이제 다운로드한 JSON 파일을 assets 폴더에 넣어두기 위해 assets 폴더를 생성합니다.

폴더 생성

다운로드 받은 JSON 파일을 Ctrl+C 복사 후 생성된 assets 폴더에 Ctrl+V로 붙여 넣기 합니다.

JSON 파일 추가

 

액티비티 화면에 이미지 적용하기

Layout 에 해당 JSON 파일을 연결시키도록 합니다.

적용할 이미지를 Activity Layout 에 코드를 삽입합니다.

중요한 부분은 다운로드한 JSON 파일의 이름을 'lottie_fileName' alias에 넣어줘야 합니다.

Layout 설정

각 속성 값의 내용은 다음과 같습니다.

app:lottie_fileName="5506-networked-data.json"	> JSON 파일명 지정.
app:lottie_autoPlay="true"	> Activity 가 실행될때 자동 실행 여부 
app:lottie_loop="true"	> 움직임을 반복적으로 실행할건지 여부

 

적용된 이미지 확인

이렇게만 적용해도 움직이는 이미지 재생이 가능합니다.

움직이는 이미지

 

이미지를 컨트롤할 수 있는 코드 및 리스너 설정

이미지 노출까지는 완료했고 이제 리스너를 통해 이미지를 제어해 보도록 합시다.

위에서 Layout 에서 설정했던 반복/자동 실행 부분은 아래 코드로 제어 가능합니다.

LottieAnimationView animationView = root.findViewById(R.id.ono_btn);
        animationView.setSpeed(1f);
        animationView.setVisibility(View.VISIBLE);
        animationView.playAnimation(); //애니메이션 실행
        //animationView.pauseAnimation(); //애니메이션 중지

        animationView.addAnimatorListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {
            }

            @Override
            public void onAnimationEnd(Animator animator) {
                animationView.setVisibility(View.GONE);
            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });