Wednesday, February 22, 2017

android - Shared element transition example

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#d1dad3">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="bottom"
        android:layout_margin="10dp"
        >
        <ImageView
            android:id="@+id/iv"
            android:layout_width="match_parent"
            android:layout_height="125dp"
            android:src="@drawable/horses"
            android:scaleType="centerCrop"
            android:transitionName="horseImageTransition"
            />
        <TextView
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="HORSE"
            android:textSize="25sp"
            android:transitionName="imageTitleTransition"
            />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>
MainActivity.java

package com.cfsuman.me.androidcodesnippets;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.support.design.widget.CoordinatorLayout;
import android.support.v4.app.ActivityOptionsCompat;
import android.support.v4.util.Pair;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;


public class MainActivity extends AppCompatActivity {
    private Context mContext;
    private Activity mActivity;

    private static final String TAG = MainActivity.class.getSimpleName();

    private CoordinatorLayout mCLayout;
    private ImageView mImageView;
    private TextView mTextView;


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

        // Get the application context
        mContext = getApplicationContext();
        mActivity = MainActivity.this;

        // Get the widget reference from XML layout
        mCLayout = (CoordinatorLayout) findViewById(R.id.coordinator_layout);
        mImageView = (ImageView) findViewById(R.id.iv);
        mTextView = (TextView) findViewById(R.id.tv);

        /*
            Pair
                Container to ease passing around a tuple of two objects. This object provides a
                sensible implementation of equals(), returning true if equals() is true on
                each of the contained objects.
        */

        // Initialize two pairs instance
        final Pair<View,String> pair1 = Pair.create((View)mImageView,"horseImageTransition");
        final Pair<View,String> pair2 = Pair.create((View)mTextView,"imageTitleTransition");

        /*
            ActivityOptionsCompat
                Helper for accessing features in ActivityOptions introduced in API
                level 16 in a backwards compatible fashion.
        */
        /*
            ActivityOptionsCompat makeSceneTransitionAnimation (Activity activity,
                            Pair...<View, String> sharedElements)

                Create an ActivityOptions to transition between Activities using cross-Activity scene
                animations. This method carries the position of multiple shared elements to the
                started Activity. The position of the first element in sharedElements will be used
                as the epicenter for the exit Transition. The position of the associated shared
                element in the launched Activity will be the epicenter of its entering Transition.
        */
        mImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Initialize a new intent
                Intent intent = new Intent(mActivity, SecondActivity.class);
                ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
                        mActivity, // This activity
                        pair1, // Shared element
                        pair2 // Shared element
                );
                // Start the second activity
                startActivity(intent,options.toBundle());
            }
        });
    }
}
activity_second.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_second"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SecondActivity"
    android:background="#d1dad3"
    >
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:src="@drawable/horses"
        android:scaleType="centerCrop"
        android:transitionName="horseImageTransition"
        />
    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HORSE"
        android:textSize="50sp"
        android:gravity="center"
        android:layout_margin="15dp"
        android:transitionName="imageTitleTransition"
        android:layout_gravity="bottom|center_horizontal"
        />
</android.support.design.widget.CoordinatorLayout>
SecondActivity.java

package com.cfsuman.me.androidcodesnippets;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;


public class SecondActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
    }
}
res/values/style.xml [part]

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowContentTransitions">true</item>
    </style>
</resources>