How to make sharedElement Transition

Aman Gupta

25 August 2017

In this blog, We are going to show you how to shared element Image transition works in application.

To make a screen transition animation between two activities that have a shared element:

Enable window content transitions in your theme.
Specify a shared elements transition in your style.
Define your transition as an XML resource.
Assign a common name to the shared elements in both layouts with the android:transitionName attribute.
Use the ActivityOptions.makeSceneTransitionAnimation() method.

Implementation

Step 1: Add android:transitionName=”profile” in your ImageView

activity_main.java

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" tools:context="application.coderdna.imageanimation.MainActivity"> <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:transitionName="profile" app:srcCompat="@mipmap/ic_launcher" tools:layout_editor_absoluteX="164dp" tools:layout_editor_absoluteY="129dp" /> </LinearLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="application.coderdna.imageanimation.MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:transitionName="profile"
        app:srcCompat="@mipmap/ic_launcher"
        tools:layout_editor_absoluteX="164dp"
        tools:layout_editor_absoluteY="129dp" />

</LinearLayout>

Step 2: Add below code on your onClickListener,

Intent intent = new Intent(view.getContext(), Main2Activity.class); View v = ((View) findViewById(R.id.imageView)); ActivityOptionsCompat options = ActivityOptionsCompat. makeSceneTransitionAnimation(MainActivity.this, v, "profile"); startActivity(intent, options.toBundle());

1
2
3
4
5

Intent intent = new Intent(view.getContext(), Main2Activity.class);
                View v = ((View) findViewById(R.id.imageView));
                ActivityOptionsCompat options = ActivityOptionsCompat.
                        makeSceneTransitionAnimation(MainActivity.this, v, "profile");
                startActivity(intent, options.toBundle());

MainActivity.java

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); findViewById(R.id.imageView).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(view.getContext(), Main2Activity.class); View v = ((View) findViewById(R.id.imageView)); ActivityOptionsCompat options = ActivityOptionsCompat. makeSceneTransitionAnimation(MainActivity.this, v, "profile"); startActivity(intent, options.toBundle()); } }); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.imageView).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(view.getContext(), Main2Activity.class);
                View v = ((View) findViewById(R.id.imageView));
                ActivityOptionsCompat options = ActivityOptionsCompat.
                        makeSceneTransitionAnimation(MainActivity.this, v, "profile");
                startActivity(intent, options.toBundle());
            }
        });
    }
}

Step 3: Add android:transitionName=”profile” in your ImageView in Result Activity,

<ImageView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:transitionName="profile" app:layout_behavior="@string/appbar_scrolling_view_behavior" app:srcCompat="@mipmap/ic_launcher" tools:context="application.coderdna.imageanimation.Main2Activity" tools:showIn="@layout/activity_main2">

1
2
3
4
5
6
7
8
9
10

    <ImageView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:transitionName="profile"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:srcCompat="@mipmap/ic_launcher"
        tools:context="application.coderdna.imageanimation.Main2Activity"
        tools:showIn="@layout/activity_main2">

Done, Now you have made your first shared element transition.