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

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