0

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" />
TylerH
  • 20,799
  • 66
  • 75
  • 101
Ahmet Yılmaz
  • 425
  • 5
  • 16
  • https://lottiefiles.com/ lottie library I mean – Ahmet Yılmaz Aug 27 '19 at 07:57
  • You can use boolean values to determine if the button is clicked or not. If you click the button set a bool to true, do your logic inside a if condition and at the end, set the bool value again to false. – Blnpwr Aug 27 '19 at 08:03

3 Answers3

3

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();
}
Prithvi Bhola
  • 3,041
  • 1
  • 16
  • 32
  • This code make stop doing animation and still make red color. – Ahmet Yılmaz Aug 27 '19 at 08:17
  • @AhmetYılmaz you have to start the animation again after setting `setSpeed(-1F)` – Prithvi Bhola Aug 27 '19 at 08:18
  • This is my code. I start animation again. ` if (!isAnimated){ imgIconLike.playAnimation(); imgIconLike.setSpeed(3f); isAnimated=true;} else { imgIconLike.setSpeed(-1F); isAnimated=false; }` – Ahmet Yılmaz Aug 27 '19 at 08:19
  • 1
    Try this `if (!isAnimated){ imgIconLike.setSpeed(3f); isAnimated=true; imgIconLike.playAnimation();} else { imgIconLike.setSpeed(-1F); isAnimated=false; imgIconLike.playAnimation();}` – Prithvi Bhola Aug 27 '19 at 09:38
  • @AhmetYılmaz Please upvote and mark it as answer if it helps. Thanks. – Prithvi Bhola Aug 27 '19 at 09:53
  • I just upvoted. How can I mark your answer? It's only in comment. – Ahmet Yılmaz Aug 27 '19 at 09:56
  • @AhmetYılmaz upvote and make it as answer the whole main answer. I can edit the answer with the update. Check my updated answer – Prithvi Bhola Aug 27 '19 at 09:57
  • @AhmetYılmaz if you want to back from liked without animating (what usually do), then you can follow [https://stackoverflow.com/a/57671293/4544797](https://stackoverflow.com/a/57671293/4544797) – Abu Noman Aug 28 '19 at 07:19
2

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"/>
Abu Noman
  • 435
  • 3
  • 13
1

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()
        }
    })
}
Sergio
  • 451
  • 3
  • 11