How can make a like button with lottie animation?

Question

I want to make a like button in my app with lottie animation. I have downloaded a json file ofvthe animation that I want. It works after clicking. But the heart icon is white as default. After I click it, it gets red with the animation. I want it to get white again after I click a second time. I just can't do it. How can I do it?

ProductActivity.java

   public class ProductActivity extends AppCompatActivity {
    LottieAnimationView imgIconLike;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_product);
        imgIconLike = findViewById(R.id.img_icon_like);
        }

     /* I did isAnimated boolean to handle second time click. Also
       try pauseAnimation, cancelAnimation and another else. I can't success it anyways. */

    private void registerHandler() {
        imgIconLike.setOnClickListener(new View.OnClickListener() {
            boolean isAnimated=false;
            @Override
            public void onClick(View v) {

               if (!isAnimated){
                imgIconLike.playAnimation();
                imgIconLike.setSpeed(3f);
                isAnimated=true;}
                else {
                    imgIconLike.cancelAnimation;
                    isAnimated=false;
                }

            }
        });
    }
  }

activity_product.xml

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/img_icon_like"
            android:layout_width="50dp"
            android:layout_height="58dp"
            app:layout_constraintBottom_toBottomOf="@+id/textFollow_cost"
            app:layout_constraintEnd_toStartOf="@+id/textFollow_cost"
            app:layout_constraintTop_toTopOf="@+id/textFollow_cost"
            app:lottie_autoPlay="false"
            app:lottie_fileName="1087-heart.json"
            app:lottie_loop="false" />

Answer 1

you can use standard APIs like playAnimation() and reverseAnimationSpeed() to achieve this.

And use LottieDrawable instead of LottieAnimationView.

Answer 2

I want it to get white again after I click a second time

You can do this in 2 ways:

1. Set the visibility of the view to GONE when clicked second time, but this won't show the animation.
2. Reverse the animation of lottie view using setSpeed(float) and passing -1F to the method.

So try this:

if (!isAnimated){ 
          imgIconLike.setSpeed(3f); 
          isAnimated=true; 
          imgIconLike.playAnimation();
} else { 
          imgIconLike.setSpeed(-1F); 
          isAnimated=false; 
          imgIconLike.playAnimation();
}

Answer 3

Use 2 different functions, once for the initial animation and the other for the reverse one. I would recommend you use an animator listener aswell. Use the removeAllAnimatorListeners to reset the animation.

(The example was made in Kotlin, but is pretty much the same) Then call these 2 methods in your booleans.

private fun initAnimation() {
    imgIconLike?.playAnimation()

    imgIconLike?.addAnimatorListener(object : Animator.AnimatorListener {
        override fun onAnimationCancel(animation: Animator?) {}
        override fun onAnimationStart(animation: Animator?) {}
        override fun onAnimationRepeat(animation: Animator?) {}
        override fun onAnimationEnd(animation: Animator?) {
            imgIconLike?.removeAllAnimatorListeners()
        }
    })
}

private fun revertInitAnimation() {
    imgIconLike?.speed = -1F
    imgIconLike?.playAnimation()

    sendBtn?.addAnimatorListener(object : Animator.AnimatorListener {
        override fun onAnimationCancel(animation: Animator?) {}
        override fun onAnimationStart(animation: Animator?) {}
        override fun onAnimationRepeat(animation: Animator?) {}
        override fun onAnimationEnd(animation: Animator?) {
            imgIconLike?.removeAllAnimatorListeners()
        }
    })
}

Answer 4

You can do this by stopping animation and set progress to 0.0f , follow the code below:

private var isLiked: Boolean = false

animationLike.setOnClickListener {
    isLiked = !isLiked
    animationLike.apply {
        if (isLiked) {
            playAnimation()
        } else {
            cancelAnimation()
            progress = 0.0f
        }
    }
}

XML looks like:

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animation_like"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:lottie_rawRes="@raw/heart"/>