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
packagecom.example.putuguna.animationwithrv;
/**
 * Created by putuguna on 02/06/16.
 */publicclassImageModel {
 privateString mImage;
 privateString mImageName;
 privateString mImageOwnerName;
 privateString mDesc;
 publicImageModel(StringmImage, StringmImageName, StringmImageOwnerName, StringmDesc) {
 this.mImage = mImage;
 this.mImageName = mImageName;
 this.mImageOwnerName = mImageOwnerName;
 this.mDesc = mDesc;
 }
 publicImageModel() {
 }
 publicStringgetmImage() {
 return mImage;
 }
 publicvoidsetmImage(StringmImage) {
 this.mImage = mImage;
 }
 publicStringgetmImageName() {
 return mImageName;
 }
 publicvoidsetmImageName(StringmImageName) {
 this.mImageName = mImageName;
 }
 publicStringgetmImageOwnerName() {
 return mImageOwnerName;
 }
 publicvoidsetmImageOwnerName(StringmImageOwnerName) {
 this.mImageOwnerName = mImageOwnerName;
 }
 publicStringgetmDesc() {
 return mDesc;
 }
 publicvoidsetmDesc(StringmDesc) {
 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
packagecom.example.putuguna.animationwithrv;
importandroid.app.Activity;
importandroid.content.Context;
importandroid.content.Intent;
importandroid.support.v4.app.ActivityCompat;
importandroid.support.v4.app.ActivityOptionsCompat;
importandroid.support.v7.widget.RecyclerView;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.ImageView;
importandroid.widget.TextView;
importjava.util.List;
/**
 * Created by putuguna on 02/06/16.
 */publicclassImageAdapterextendsRecyclerView.Adapter<ImageAdapter.ViewHolder> {
 privateList<ImageModel> mListImage;
 privateContext mContext;
 publicImageAdapter(List<ImageModel>mListImage, ContextmContext) {
 this.mListImage = mListImage;
 this.mContext = mContext;
 }
 @OverridepublicViewHolderonCreateViewHolder(ViewGroupparent, intviewType) {
 View view =LayoutInflater.from(parent.getContext()).inflate(R.layout.item_row, parent,false);
 ViewHolder holder =newViewHolder(view);
 return holder;
 }
 @OverridepublicvoidonBindViewHolder(ViewHolderholder, intposition) {
 holder.mImageProduct.setImageResource(Integer.parseInt(mListImage.get(position).getmImage()));
 holder.mNameOfImage.setText(mListImage.get(position).getmImageName());
 holder.mNameOfOwner.setText(mListImage.get(position).getmImageOwnerName());
 }
 @OverridepublicintgetItemCount() {
 return mListImage.size();
 }
 publicclassViewHolderextendsRecyclerView.ViewHolderimplementsView.OnClickListener{
 publicImageView mImageProduct;
 publicTextView mNameOfImage;
 publicTextView mNameOfOwner;
 publicViewHolder(ViewitemView) {
 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);
 }
 @OverridepublicvoidonClick(Viewv) {
 int position = getAdapterPosition();
 ActivityOptionsCompat options =ActivityOptionsCompat.makeSceneTransitionAnimation(
 ((Activity)mContext), mImageProduct, SecondActivity.TAG_IMAGE_NAME);
 Intent intent =newIntent(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.
packagecom.example.putuguna.animationwithrv;
importandroid.content.Intent;
importandroid.media.Image;
importandroid.support.v4.view.ViewCompat;
importandroid.support.v7.app.AppCompatActivity;
importandroid.os.Bundle;
importandroid.widget.ImageView;
importandroid.widget.TextView;
publicclassSecondActivityextendsAppCompatActivity {
 publicstaticStringTAG_IMAGE_NAME="tag_image_name";
 privateImageView mImage;
 privateTextView mNameOfImage;
 privateTextView mNameOfOwner;
 privateTextView mDesc;
 @OverrideprotectedvoidonCreate(BundlesavedInstanceState) {
 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
.
packagecom.example.putuguna.animationwithrv;
importandroid.support.v7.app.AppCompatActivity;
importandroid.os.Bundle;
importandroid.support.v7.widget.DefaultItemAnimator;
importandroid.support.v7.widget.LinearLayoutManager;
importandroid.support.v7.widget.RecyclerView;
importjava.util.ArrayList;
importjava.util.List;
publicclassMainActivityextendsAppCompatActivity {
 privateRecyclerView mRecyclerView;
 privateList<ImageModel> mList;
 privateImageAdapter mAdapter;
 @OverrideprotectedvoidonCreate(BundlesavedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
 mList =newArrayList<>();
 mList.add(newImageModel(String.valueOf(R.drawable.drink1), "Drink 1", " Putu Joli Artaguna", "This is the best drink in the world."));
 mList.add(newImageModel(String.valueOf(R.drawable.drink2), "Drink 2", " putu guna", "This is the best drink in the world."));
 mList.add(newImageModel(String.valueOf(R.drawable.drink3), "Drink 3", " Putu Guna", "This is the best drink in the world."));
 mList.add(newImageModel(String.valueOf(R.drawable.drink4), "Drink 4", " Putu Guna", "This is the best drink in the world."));
 mList.add(newImageModel(String.valueOf(R.drawable.drink5), "Drink 5", " Putu Guna", "This is the best drink in the world."));
 mList.add(newImageModel(String.valueOf(R.drawable.paket1), "Packet 1", " putuguna.com", "This is the best packet in the world."));
 mList.add(newImageModel(String.valueOf(R.drawable.paket2), "Packet 2", " putuguna.com", "This is the best packet in the world."));
 mList.add(newImageModel(String.valueOf(R.drawable.paket3), "Packet 3", " putuguna.com", "This is the best packet in the world."));
 mList.add(newImageModel(String.valueOf(R.drawable.paket5), "Packet 5", " putuguna.com", "This is the best packet in the world."));
 mList.add(newImageModel(String.valueOf(R.drawable.drink1), "Drink 1", " Putu Joli Artaguna", "This is the best drink in the world."));
 mList.add(newImageModel(String.valueOf(R.drawable.drink2), "Drink 2", " putuguna.com", "This is the best drink in the world."));
 mList.add(newImageModel(String.valueOf(R.drawable.drink3), "Drink 3", " putuguna.com", "This is the best drink in the world."));
 mAdapter =newImageAdapter(mList, this);
 RecyclerView.LayoutManager mLayoutManager =newLinearLayoutManager(getApplicationContext());
 mRecyclerView.setLayoutManager(mLayoutManager);
 mRecyclerView.setItemAnimator(newDefaultItemAnimator());
 mRecyclerView.setAdapter(mAdapter);
 }
}
That's all, hope running well.

Get a Game Cheat Trick with the new free online hack tool. Try it today!
Blogger
Disqus

No comments