Reversing the morphing animation from arrow to checkmark

Question

I am trying to achieve the morphing effect, when the user clicks myButton, the image inside the ImageView should morph from arrow to checkmark. And when he clicks it again, the

Answer 1

if your view is checkable and also your minsdk > 21 you can try using StateListAnimator with AnimatedVectorDrawable but because the appcompat now supports vectorDrawable and AnimatedVectorDrawable and also has a limitation on using all DrawableContainers I do not take above approach.

So let me tell you what may work:

DrawableContainers which reference other drawables resources which contain only a vector resource. For example, a StateListDrawable which references other files which contain a vector.

from Chris Banes

In order to achieve that I am going to create custom ImageView and every time it is clicked you must call morph function to run appropriate vectorAnimatorDrawable.

So code and demo:

public class ArrowToCheckMarkMorphingImageView extends ImageView {

    private AnimatedVectorDrawable mArrowToCheckMark;
    private AnimatedVectorDrawable mCheckMarkToArrow;
    private boolean mIsShowingCheckMark;
    public ArrowToCheckMarkMorphingImageView(Context context) {
        super(context);
        init();
    }

    public ArrowToCheckMarkMorphingImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ArrowToCheckMarkMorphingImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public ArrowToCheckMarkMorphingImageView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    public void init(){
        mIsShowingCheckMark = false;
        mArrowToCheckMark =
                (AnimatedVectorDrawable)getContext().getDrawable(R.drawable.arrow_to_checkmark);
        mCheckMarkToArrow =
                (AnimatedVectorDrawable)getContext().getDrawable(R.drawable.checkmark_to_arrow);
        setImageDrawable(mArrowToCheckMark);
    }

    public void morph(){
        final AnimatedVectorDrawable drawable
                = mIsShowingCheckMark ? mCheckMarkToArrow : mArrowToCheckMark;
        setImageDrawable(drawable);
        drawable.start();
        mIsShowingCheckMark = !mIsShowingCheckMark;
    }

}

and MainActivity:

public class MainActivity extends AppCompatActivity {

    ArrowToCheckMarkMorphingImageView mArrowToCheckMarkImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mArrowToCheckMarkImageView = (ArrowToCheckMarkMorphingImageView)findViewById(R.id.imageView);
        mArrowToCheckMarkImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mArrowToCheckMarkImageView.morph();
            }
        });
    }
}

in layout file you must use it like:

and resources for those who wants to give it a try:

res/animator/arrow_to_checkmark

res/animator/checkmark_to_arrow

res/drawable/arrow_to_checkmark

res/drawable/checkmark_to_arrow

res/drawable/ic_arrow_up_24dp

res/drawable/ic_checkmark_24dp