CODEWITHSUNDEEP
androidanimationmaterial-designandroid-5.0-lollipop
Himanshu Chhabra
Himanshu Chhabra

Reputation: 257

Shared element transition

I have an icon in a RecyclerView, in the left followed by some text. When you click on it a new activity starts corresponding to that item with the same icon in the center of the header bar and the text right below it. I want to implement shared element transition here so that there is a smooth movement between the two places for the icon and it looks like the header bar exploded form that icon. Any idea how I could do this? Something like this: https://developer.android.com/design/material/videos/ContactsAnim.mp4

Upvotes: 3

Views: 1045

Answers (1)

ErShani
ErShani

Reputation: 392

Here is sample code my friend

ListView or RecyclerView's Single Item

item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/img"
        android:transitionName="@string/transition_name"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/imageView"
        android:text="txt"
        android:textSize="18sp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:text="BUTTON TEXT"/>

</RelativeLayout>

detail_activity.xml

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:src="@drawable/img"
        android:transitionName="@string/transition_name"/>

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:hint="Some Hint"/>

    <ImageView
        android:id="@+id/smallerImageView"
        android:src="@drawable/img2"/>

</RelativeLayout>

in activity code set onItemClickListner in ListView as below

imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            ActivityOptionsCompat options = ActivityOptionsCompat.
                    makeSceneTransitionAnimation(this, imageView, getString(R.string.activity_image_trans));
            startActivity(intent, options.toBundle());
        }
        else {
            startActivity(intent);
        }
    }
});

Key point of SharedElement transition is xml property of element which you want to animate.

android:transitionName="@string/activity_image_trans"

transition name should be same at both layout.

****Note:** ** Shared Element Transition is only supports Lolipop and uper versions of Android.

Upvotes: 3

Related Questions