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:

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

Implementation

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

activity_main.java

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

<?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,

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

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,

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.