Tutorial Image Transition Look Likes On Google Play When Image Clicked

Today i will share about Image transition. This image transition is look likes newer google play transition. When you clicked the image, it look like come out from its place. And when you back to the previous activity, the image will be back to its place.

That effect using ActivityOpstionCompat. How can it come back to its place or frame? because it's using TAG that placed in Activity where the image will shown.

IMPLEMENTATION

Compile the following libraries in your build.gradle(Module : apps) :

compile 'com.android.support:recyclerview-v7:23.4.0'
compile 'com.android.support:cardview-v7:23.4.0'
compile 'com.android.support:design:23.4.0'

The effect that we'll use is default from the design support 23.4.0. Next, prepare some xml layouts and java classes :

1. ImageAdapter.java > We set the image to the imageview
2. ImageModel.java > Object where the image place before set to the ImageView
3. MainActivity.java > We set listview with adapter
4. SecondActivity.java > The image will appears here
5. activity_detail_layout.xml > The layout of SecondActivity.java
6. activity_main.xml > The layout of MainActivity.java
7. item_row.xml > The layout of ImageAdapter.java

Next we modify every xml layout and classed, like the following codes :

activity_detail_layout.xml
 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/detail_image"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:scaleType="fitXY"
        android:src="@drawable/paketayam"/>

    <TextView
        android:id="@+id/name_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Name Of Image"/>

    <TextView
        android:id="@+id/name_owner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Name Of owner"/>

    <TextView
        android:id="@+id/desc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Describe"/>
</LinearLayout>

Second, modify your item_rom.xml :
 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_marginBottom="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:padding="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

                <ImageView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:id="@+id/imagedetail"
                    android:src="@drawable/paketayam"/>

                <LinearLayout
                    android:layout_marginLeft="10dp"
                    android:layout_width="match_parent"
                    android:layout_height="100dp"
                    android:orientation="vertical">

                    <TextView
                        android:gravity="center|left"
                        android:layout_weight="1"
                        android:id="@+id/name_of_picture"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="The Name of Image"/>

                    <TextView
                        android:layout_weight="1"
                        android:id="@+id/name_of_owner"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="The owner of picture"/>

                </LinearLayout>
        </LinearLayout>
    </android.support.v7.widget.CardView>

</RelativeLayout>

Third, modify your activity_main.xml :
 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.putuguna.animationwithrv.MainActivity">

    <TextView
        android:id="@+id/maintext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is the items" />

    <android.support.v7.widget.RecyclerView
        android:layout_marginTop="20dp"
        android:layout_below="@+id/maintext"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recyclerview"></android.support.v7.widget.RecyclerView>

</RelativeLayout>

Next process is write code for java classes. First we write code for model called ImageModel.java

package com.example.putuguna.animationwithrv;

/**
 * Created by putuguna on 02/06/16.
 */
public class ImageModel {

    private String mImage;
    private String mImageName;
    private String mImageOwnerName;
    private String mDesc;

    public ImageModel(String mImage, String mImageName, String mImageOwnerName, String mDesc) {
        this.mImage = mImage;
        this.mImageName = mImageName;
        this.mImageOwnerName = mImageOwnerName;
        this.mDesc = mDesc;
    }

    public ImageModel() {
    }

    public String getmImage() {
        return mImage;
    }

    public void setmImage(String mImage) {
        this.mImage = mImage;
    }

    public String getmImageName() {
        return mImageName;
    }

    public void setmImageName(String mImageName) {
        this.mImageName = mImageName;
    }

    public String getmImageOwnerName() {
        return mImageOwnerName;
    }

    public void setmImageOwnerName(String mImageOwnerName) {
        this.mImageOwnerName = mImageOwnerName;
    }

    public String getmDesc() {
        return mDesc;
    }

    public void setmDesc(String mDesc) {
        this.mDesc = mDesc;
    }
}

Next, modify your ImageAdapter.java. Please take a look clearly to the TAG_IMAGE_NAME. That tag taken from SecondActivity.java, it will lead the image back to the previous index after it back from SecondActivity.java

package com.example.putuguna.animationwithrv;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.support.v4.app.ActivityCompat;
import android.support.v4.app.ActivityOptionsCompat;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

/**
 * Created by putuguna on 02/06/16.
 */
public class ImageAdapter extends RecyclerView.Adapter<ImageAdapter.ViewHolder> {

    private List<ImageModel> mListImage;
    private Context mContext;


    public ImageAdapter(List<ImageModel> mListImage, Context mContext) {
        this.mListImage = mListImage;
        this.mContext = mContext;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_row, parent,false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.mImageProduct.setImageResource(Integer.parseInt(mListImage.get(position).getmImage()));
        holder.mNameOfImage.setText(mListImage.get(position).getmImageName());
        holder.mNameOfOwner.setText(mListImage.get(position).getmImageOwnerName());
    }

    @Override
    public int getItemCount() {
        return mListImage.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{

        public ImageView mImageProduct;
        public TextView mNameOfImage;
        public TextView mNameOfOwner;

        public ViewHolder(View itemView) {
            super(itemView);
            mImageProduct = (ImageView) itemView.findViewById(R.id.imagedetail);
            mNameOfImage = (TextView) itemView.findViewById(R.id.name_of_picture);
            mNameOfOwner = (TextView) itemView.findViewById(R.id.name_of_owner);

            mImageProduct.setOnClickListener(this);
        }

        @Override
        public void onClick(View v) {
            int position = getAdapterPosition();

            ActivityOptionsCompat options =
                    ActivityOptionsCompat.makeSceneTransitionAnimation(
                            ((Activity)mContext), mImageProduct, SecondActivity.TAG_IMAGE_NAME);
            Intent intent = new Intent(mContext, SecondActivity.class);
            intent.putExtra("image",mListImage.get(position).getmImage());
            intent.putExtra("name-image", mListImage.get(position).getmImageName());
            intent.putExtra("owner-name", mListImage.get(position).getmImageOwnerName());
            intent.putExtra("desc", mListImage.get(position).getmDesc());
            ActivityCompat.startActivity(((Activity)mContext), intent, options.toBundle());

        }
    }
}

Modify your SecondActivity.java. Take a look to the TAG_IMAGE_NAME, that will leads the image back to previous place or index after press the back button from SecondActivity.java.

Flow : After you click the image from RecyclerView, automatically it brings a TAG for the image that clicked. When you press button back from SecondActivity, the TAG that brought by Image will searching where its place before.

package com.example.putuguna.animationwithrv;

import android.content.Intent;
import android.media.Image;
import android.support.v4.view.ViewCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;

public class SecondActivity extends AppCompatActivity {

    public static String TAG_IMAGE_NAME = "tag_image_name";

    private ImageView mImage;
    private TextView mNameOfImage;
    private TextView mNameOfOwner;
    private TextView mDesc;

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

        mImage = (ImageView) findViewById(R.id.detail_image);
        mNameOfImage = (TextView) findViewById(R.id.name_image);
        mNameOfOwner = (TextView) findViewById(R.id.name_owner);
        mDesc = (TextView) findViewById(R.id.desc);

        String image = getIntent().getStringExtra("image");
        String imageName = getIntent().getStringExtra("name-image");
        String ownerName = getIntent().getStringExtra("owner-name");
        String desc = getIntent().getStringExtra("desc");

        ViewCompat.setTransitionName(mImage, TAG_IMAGE_NAME);

        mImage.setImageResource(Integer.parseInt(image));
        mNameOfImage.setText(imageName);
        mNameOfOwner.setText(ownerName);
        mDesc.setText(desc);
    }
}

Last, modify your MainActivity.java.

package com.example.putuguna.animationwithrv;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private List<ImageModel> mList;
    private ImageAdapter mAdapter;

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

        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);

        mList = new ArrayList<>();
        mList.add(new ImageModel(String.valueOf(R.drawable.drink1), "Drink 1", " Putu Joli Artaguna", "This is the best drink in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.drink2), "Drink 2", " putu guna", "This is the best drink in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.drink3), "Drink 3", " Putu Guna", "This is the best drink in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.drink4), "Drink 4", " Putu Guna", "This is the best drink in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.drink5), "Drink 5", " Putu Guna", "This is the best drink in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.paket1), "Packet 1", " putuguna.com", "This is the best packet in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.paket2), "Packet 2", " putuguna.com", "This is the best packet in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.paket3), "Packet 3", " putuguna.com", "This is the best packet in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.paket5), "Packet 5", " putuguna.com", "This is the best packet in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.drink1), "Drink 1", " Putu Joli Artaguna", "This is the best drink in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.drink2), "Drink 2", " putuguna.com", "This is the best drink in the world."));
        mList.add(new ImageModel(String.valueOf(R.drawable.drink3), "Drink 3", " putuguna.com", "This is the best drink in the world."));


        mAdapter = new ImageAdapter(mList, this);
        RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext());
        mRecyclerView.setLayoutManager(mLayoutManager);
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        mRecyclerView.setAdapter(mAdapter);
    }
}

That's all, hope running well.