How to animate image in RecyclerView's item?

Question

GMail (supposedly using RecyclerView) in its Inbox displays items which contain images and text. When a given item is selected/tapped it triggers animation of its image which 'transitions' to a checkbox.

I've seen examples of animations that apply to whole items (viewholders). However, I have no idea how GMail app is able to animate images only.

Any help would be appreciated.

Answer 1

If there is an image in your recycler view item and you want to start a new activity by animating the image when the recycler item is clicked, add the same transition name to the image view in your recycler item as well as your image view in the next activity.

<ImageView
        android:layout_width="100dp"
        android:layout_height="120dp"
        android:layout_marginTop="10dp"
        android:id="@+id/Image"
        android:scaleType="fitCenter"
        android:transitionName="bookImage"/>

Then through the onclick listener start the activity using Activity Options compat to animate the image.

itemView.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(mActivity, DetailActivity.class);
            // Define the view that the animation will start from
            ImageView imageStart = (ImageView) v.findViewById(R.id.Image);

            ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation
                    (this, imageStart, imageStart.getTransitionName());

            ActivityCompat.startActivity(mActivity, intent, options.toBundle());
        }
    });

You can add multiple elements to animate in your ActivityOptionsCompat

Answer 2

Instead of build your own checkbox animation, you can use these third-party library and custom it if needed. I see it kind of what you want, take a look:

https://github.com/franlopjur/FlipCheckBox

https://github.com/lguipeng/AnimCheckBox

https://github.com/hanks-zyh/AnimateCheckBox