[Java][Android] Lottie Animation을 이용한 버튼 구현

이번 포스팅에선 lottie animation을 통한 좋아요 버튼을 구현해보겠습니다.

Lottie 란 위 설명대로 어떤 네이티브 앱에서든 쉽고 높은 퀄리티의 애니메이션을 구현할 수 있게한 라이브러리입니다.

 

1. build.gradle 에 디펜던시를 추가해줍니다.

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

2. 자신이 원하는 Lottie 애니메이션을 다운받습니다.

https://lottiefiles.com/28705-student-university-character

저같은 경우는 하트모양의 Lottie애니메이션을 다운받았습니다.

3. asset 폴더에  다운받은 json 파일을 복사붙여넣기 해줍니다. 

4. xml 을 구현합니다.

<com.airbnb.lottie.LottieAnimationView
                android:id="@+id/lottieView"
                android:layout_width="0dp"
                android:layout_height="100dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:lottie_rawRes="@raw/loading_lottie"
                app:lottie_autoPlay="true"
                app:lottie_loop="true" />

5. 코드를 통해 구현합니다.

final LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.lav_loading);
animationView.addAnimatorListener(new Animator.AnimatorListener() {
    @Override
    public void onAnimationStart(Animator animation) {
        
    }

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

    @Override
    public void onAnimationCancel(Animator animation) {
        
    }

    @Override
    public void onAnimationRepeat(Animator animation) {
        
    }
});