Android Shared Content Transition Example.




In this blog we will see how androids shared content transition works. Generally you would have seen this kind of transition in image gallery where an image in a cell of a grid would transition into a full screen image

So lets start

1.     Create a new project File->New->Project. While creating the project, create two activities and name them a FirstActivity.java and SecondActivity.java. Create layout files for the activities as activity_first.xml and activity_second.xml
2.     Now let us design the UI for both the layout files.

activity_first.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="apps.colloquial.sharedelementtransition.FirstActivity">

    <TextView
        android:text="App List"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="25dp"
        android:gravity="center"/>

    <ImageView
        android:id="@+id/iv1"
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:transitionName="appImage"
        android:onClick="openDetails"
        android:src="@drawable/ck_cover"/>

    <ImageView
        android:id="@+id/iv2"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"
        android:transitionName="appImage"
        android:onClick="openDetails"
        android:src="@drawable/scribble_cover"/>
</LinearLayout>

activity_second.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="apps.colloquial.sharedelementtransition.FirstActivity">

    <TextView
        android:text="App Detail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="25dp"
        android:gravity="center"/>
    <ImageView
        android:id="@+id/iv"
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:transitionName="appImage"
        android:src="@drawable/ck_cover"/>
    <TextView
        android:layout_marginTop="10dp"
        android:text="App Detail: \n\n Blah Blah blah \n Blah blah \n Blah"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="25dp"
        />
</LinearLayout>

3.     Note the transitionName attribute in ImageView. The value of this attribute should be same in both the layout file. Now use Intents to navigate from one activity to another. While starting the activity send the ActivityOption parameter, similar to the one below in FirstActivity

FirstActivity.java:

public class FirstActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_first);
    }

    public void openDetails(View view){
        Intent intent = new Intent(FirstActivity.this, SecondActivity.class);
        if(view.getId()==R.id.iv1){
            intent.putExtra("Item", 1);
        }else{
            intent.putExtra("Item", 2);
        }
        ActivityOptionsCompat options = ActivityOptionsCompat.
                makeSceneTransitionAnimation(FirstActivity.this, view, "appImage");
        startActivity(intent, options.toBundle());
    }
}


4.     Now in the SecondActivity, receive the intent extras and decide which image to be displayed in the transition animation.

Second Activity:

-->
public class SecondActivity extends AppCompatActivity {

    ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);

        imageView = (ImageView) findViewById(R.id.iv);

        int i = getIntent().getIntExtra("Item",1);
        if (i==1)
            imageView.setImageResource(R.drawable.ck_cover);
        else
            imageView.setImageResource(R.drawable.scribble_cover);

    }
}
5. Run the project in an android device or an emulator. The output should look similar to the video below
Labels: ,