Android – Membuat Image Transition Seperti di Google Play Saat Gambar di Klik

Untuk sekarang ini sudah tidak dipungkiri lagi, khususnya di mobile, kita sering dimanjakan oleh tampilan yang enak di lihat jika dibandingkan dengan aplikasi saat pertama kali smartphone muncul. Ya! material design semakin hari semakin bagus dan maju, banyak dari kalangan developer terkenal membuat librarylibrary sejenis.

Hal-hal seperti itu akan mebuat orang-orang sayang sedang belajar Android menjadi kelabakan, yang mana harus dipelajari terlebih dahulu. Jangankan untuk masalah tampilan, masalah logic di main prosesnya juga kadang-kadang masih kurang hahaha. Itulah yang saya alami pertama kali turun sebagai programmer Android.

Pada postingan sebelum-sebelumnya saya telah membagi masalah material design juga yaitu parallax dan ripple effect :

    1. Membuat Effect Parallax di ActionBar Android
    2. Membuat Effect Ripple Pada Button Android

Untuk kali ini saya akan mebagi masalah Image Transition. Diantara kalian pasti pernah melihat image transisi di Google Play ketika di klik, kan? Gambarnya terlihat membesar dan ketika di back seolah-olah kembali ke tempat sebelumnya.

Effect tersebut menggunakan ActivityOptionsCompat. Kenapa bisa kembali seperti ketempat semula pada saat di back, itu karena menggunakan TAG yang ditaruh di activity dimana dia tampil saat diklik.

Hasil dari project ini adalah seperti video dibawah ini :


 

Implementasi

Biar lebih jelas mari kita coba langsung praktekan saja. Disini saya menggunakan listview sebagai tempat kumpulan-kumpulan gambar. Mari lakukan persiapan :

Compile library berikut di build.gradle (apps) pada Android Studio kalian :


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'

Efek yang akan kita gunakan merupakan bawaan dari design support 23.4.0, Selanjutnya siapkan beberapa layout.xml dan class.java

  1. ImageAdapter.java > tempat kita men set image yang ada pada object
  2. ImageModel.java > Object tempat image berada
  3. MainActivity.java > tempat kita men set listview dengan adapter
  4. SecondActivity.java > Activity tempat image akan tampil
  5. activity_detail_layout.xml > Layoutnya SecondActivity.java
  6. activity_main.xml > Layoutnya MainActivity.java
  7. item_row.xml > layout yang digunakan pada ImageAdapter.java

Selanjutnya kita buat koding dari masing-masing layout dan file.java yang sudah di siapkan :

activity_detail_layout.xml

item_row.xml

activity_main.xml

Proses selanjutnya membuat kodingan di file java nya. Pertama kita akan buat kodingan untuk model dari object yang punya, sebut saja namanya 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;
    }
}

Proses selanjutnya kodingan untuk ImageAdapter.java. Karna yang saya gunakan adalah RecyclerView maka adapternya pun, meng extends RecyclerView. Perhatikan juga TAG_IMAGE_NAME yang diambil dari SecondActivity.java, itu yang akan menuntunnya kembali ke index awal si Image.


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());

        }
    }
}

Kita buat lagi kodingan untuk SecondActivity.java. Perhatikan dikodingan ini ada sebuah string bernama TAG_IMAGE_NAME, itu yang akan menjadi panduan image kembali ketempat semula saat anda tekan button back, makanya tadi ketika di Image diklik di adapter sebenarnya dia membawa TAG_IMAGE_NAME


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);
    }
}

Terakhir MainActivity.java, tempa kita men set Object dan RecyclerView dengan Adapter


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);
    }
}

Silakan gunakan image sendiri yang kalian punya, tempatkan di folder res/drawable. Jika sudah selesai semua silakan dirunning pada android studio kalian. Kalu mau ada yang ditanyakan silakan langsung di kolom komentar. happy coding!! have fun!!

Download projectnya di :

(Visited 106 times, 1 visits today)



Baca juga :


About The Author

Related Posts

Add Comment

Berlangganan Artikel

Untuk mendaftarkan tutorial pemrograman terbaru dari putuguna[dot]com, silakan tuliskan email kalian dibawah ini