How to animate an expand/collapse arrow for 180 degree when arrow is clicked?

Question

I have a expand more icon on linearLayout in expandable recycler view

I want when click on linearLayout is clicked layout will expand and this icon will rotate with animation in 180 degrees like below-

here is my action code:

rotationAngle = rotationAngle == 0 ? 180 : 0;
expandArrow.animate().rotation(rotationAngle).setDuration(500).start();

where rotationalAngle=0; is declared globally.

Can you find me a proper solution?

Answer 1

You can use an AnimationListener to set a new Drawable when Animation is finished:

expandArrow.animate().setListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animator) {
            
        }

        @Override
        public void onAnimationEnd(Animator animator) {
            expandIcon.setImageResource(R.drawable.arrow_up);
        }

        @Override
        public void onAnimationCancel(Animator animator) {

        }

        @Override
        public void onAnimationRepeat(Animator animator) {

        }
    }).rotation(rotationAngle).setDuration(500).start();

Answer 2

ImageV.animate().rotation(isExpanded()? -180 : 0  )
                        .setInterpolator(new SineInOut60())
                        .setDuration(2000)
                        .withLayer();