[Android] lottie를 활용하여 좋아요 클릭 버튼 만들기

lottie 활용해서 좋아요 버튼 만들기

 

Lottie Docs

 

http://airbnb.io/lottie/#/android?id=animation-listeners 

Lottie Docs

 

좋아요 애니메이션 json 파일

https://lottiefiles.com/89777-like

 

 

 

lottie를 활용하려면 우선 build.gradle에 dependency에 lottie를 추가해주어야 한다.

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

 

그리고 app 디렉토리에 assets 폴더를 만들고

다운로드 받은 lottie json 파일을 추가한다.

그리고 추가할 xml 파일에 LottieAnimationView를 추가하고

lottie_fileName에 다운로드 받은 로티 파일의 이름을 추가하면 xml에 로티파일을 추가할 수 있다.

 

 

 

로티 애니메이션을 커스텀 하려면 다음과 같은 방식으로 설정할 수 있다.

ofFloat는 애니메이션 전체의 어떤 부분을 보여줄 것인지 정할 수 있고

setDuration은 정한 부분을 몇초 동안 보여줄 것인지 정할 수 있다.

1초는 1000이다.

val animator = ValueAnimator.ofFloat(0f, 0.5f).setDuration(1000)
animator.addUpdateListener { animation : ValueAnimator ->
    like_btn.setProgress(
        animation.getAnimatedValue() as Float
    )
}
animator.start()

 

 

 

전체코드

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context=".MainActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/like_btn"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:background="@android:color/white"
        app:lottie_autoPlay="false"
        app:lottie_fileName="like.json"
        app:lottie_loop="false" />
</RelativeLayout>

 

 

MainActivity.kt

package com.example.lottieanimationtutorial

import android.animation.ValueAnimator
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import com.example.lottieanimationtutorial.databinding.ActivityMainBinding
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    val TAG = "MainActivity"

    var isLiked: Boolean = false
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        isLiked = false
        //좋아요 버튼에 클릭 리스너를 달아준다.
        like_btn.setOnClickListener {
            if(isLiked == false){
                val animator = ValueAnimator.ofFloat(0f, 0.5f).setDuration(1000)
                animator.addUpdateListener { animation : ValueAnimator ->
                    like_btn.setProgress(
                        animation.getAnimatedValue() as Float
                    )
                }
                animator.start()
                isLiked = true
            }else{ // 좋아요 상태일 때
                val animator = ValueAnimator.ofFloat(0.5f, 1f).setDuration(1000)
                animator.addUpdateListener { animation : ValueAnimator ->
                    like_btn.setProgress(
                        animation.getAnimatedValue() as Float
                    )
                }
                animator.start()
                isLiked = false
            }
        }

    }
}