Tutorial Menambahkan OnClickListener pada RecyclerView di Android

Last Updated on 8 years by Mas Herdi

Hi Guys, kali ini kita akan belajar tentang bagaimana cara menambahkan OnClickListener di RecyclerView item sesuai dengan standar Android Material Design. Sebelumnya kita telah belajar tentang cara membuat RecyclerView di Android, dilanjutkan dengan membuat RecyclerView dengan penambahan CardView. Sekarang kita akan belajar untuk menambahkan listener pada RecyclerView item, sehingga apabila item tersebut diklik, akan ada aksi yang bisa dilakukan.

Cara Set OnClickListener di RecyclerView Android (Material Design)

Berbeda dengan ListView atau GridView yang menggunakan OnItemClickListener, RecyclerView tidak mempunyai fungsi tersebut. Pada RecyclerView click terjadi di level Adapter. Sehingga nanti kita bisa mengeset OnClickListener di masing-masing view, tidak di satu list item secara keseluruhan. Gambaran gampangnya, pada tutorial RecyclerView ini layout item yang kita gunakan adalah sebagai berikut :

Nah nantinya kita bisa mengeset OnClickListener pada setiap view di item layout tersebut. Kita bisa mengeset di ImageView nya, di TextView title, dan juga di view lainnya. Ini merupakan keunggulan dibandingkan dengan ListView yang hanya bisa mendeteksi click di item secara keseluruhan (tidak di-breakdown berdasarkan View seperti di RecyclerView).

Oke, nanti akan ada dua kasus implementasi OnClickListener, kita akan implementasi di satu TextView dan kita akan implement OnClickListener juga pada satu list item secara keseluruhan (di CardView).

Sebelum melanjutkan tutorial ini, kalian diharuskan membaca dan melakukan tutorial-tutorial di bawah ini :

Pre-Requisites

• Membuat Project Android Baru di Android Studio
• Tutorial Membuat RecyclerView di Android
• Tutorial Membuat RecyclerView dengan CardView

Cara Set OnClickListener pada Single View di RecyclerView

Jika sudah, kita akan belajar mengeset onClickListener pada TextView yang ada di RecyclerView. caranya buka file RecyclerViewAdapter.java dan pada onBindViewHolder kita tambahkan kodenya sehingga menjadi seperti di bawah ini :

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // - mengambil elemen dari dataset (ArrayList) pada posisi tertentu
        // - mengeset isi view dengan elemen dari dataset tersebut
        final String name = rvData.get(position);
        holder.tvTitle.setText(rvData.get(position));

        // Set onclicklistener pada view tvTitle (TextView)
        holder.tvTitle.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                remove(name);
            }
        });

        holder.tvSubtitle.setText("Frau " + position);
    }

Kita tambahkan onClickListener pada view tvTitle seperti kode di atas. Lantas apa action yang akan dilakukan ketika kita mengclick TextView tvTitle tersebut? Ketika diclick, kita akan melakukan action remove / menghapus elemen tersebut dari list RecyclerView, untuk melakukannya tambahkan method baru remove() pada class RecyclerViewAdapter.java tadi.

    // method untuk menghapus data recyclerview
    public void remove(String item) {
        int position = rvData.indexOf(item);
        rvData.remove(position);
        notifyItemRemoved(position);
    }

Hanya itu saja yang perlu diganti. Selanjutnya …

Cara Set OnClickListener pada Entire View di RecyclerView

Kita akan belajar cara mengeset OnClickListener pada entire item di RecyclerView, untuk itu kita harus mengesetnya pada parent view dari layout RecyclerView tersebut. Untuk kasus ini kita menggunakan CardView sebagai parent view, karena itu kita akan mengeset OnClickListener pada CardView tersebut.
Pertama-tama kita tambahkan CardView ke dalam RecyclerView.ViewHolder :

    public class ViewHolder extends RecyclerView.ViewHolder {

        // di tutorial ini kita hanya menggunakan data String untuk tiap item
        public TextView tvTitle;
        public TextView tvSubtitle;
        public CardView cvMain;

        public ViewHolder(View v) {
            super(v);
            tvTitle = (TextView) v.findViewById(R.id.tv_title);
            tvSubtitle = (TextView) v.findViewById(R.id.tv_subtitle);
            cvMain = (CardView) v.findViewById(R.id.cv_main);
        }
    }

Setelah itu sama seperti di atas, pada onBindViewHolder() kita set OnClickListener di CardView tersebut :

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // rest of code ...

        // Set onclicklistener pada view cvMain (CardView)
        holder.cvMain.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Clicked element "+name, Snackbar.LENGTH_LONG).show();
            }
        });
    }

Jika CardView diklik maka akan memunculkan SnackBar bertuliskan elemen yang diklik.

Inilah isi final dari file RecyclerViewAdapter.java setelah dimodifikasi :

package id.web.twoh.coolandroiddesign;

import android.support.design.widget.Snackbar;
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by Herdi_WORK on 15.09.16.
 */
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {

    private ArrayList<String> rvData;

    public RecyclerViewAdapter(ArrayList<String> inputData) {
        rvData = inputData;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        // di tutorial ini kita hanya menggunakan data String untuk tiap item
        public TextView tvTitle;
        public TextView tvSubtitle;
        public CardView cvMain;

        public ViewHolder(View v) {
            super(v);
            tvTitle = (TextView) v.findViewById(R.id.tv_title);
            tvSubtitle = (TextView) v.findViewById(R.id.tv_subtitle);
            cvMain = (CardView) v.findViewById(R.id.cv_main);
        }
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // membuat view baru
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_rv_item, parent, false);
        // mengeset ukuran view, margin, padding, dan parameter layout lainnya
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // - mengambil elemen dari dataset (ArrayList) pada posisi tertentu
        // - mengeset isi view dengan elemen dari dataset tersebut
        final String name = rvData.get(position);
        holder.tvTitle.setText(rvData.get(position));

        // Set onclicklistener pada view tvTitle (TextView)
        holder.tvTitle.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                remove(name);
            }
        });

        holder.tvSubtitle.setText("Frau " + position);

        // Set onclicklistener pada view cvMain (CardView)
        holder.cvMain.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Clicked element "+name, Snackbar.LENGTH_LONG).show();
            }
        });
    }

    @Override
    public int getItemCount() {
        // menghitung ukuran dataset / jumlah data yang ditampilkan di RecyclerView
        return rvData.size();
    }

    public void add(int position, String item) {
        rvData.add(position, item);
        notifyItemInserted(position);
    }

    public void remove(String item) {
        int position = rvData.indexOf(item);
        rvData.remove(position);
        notifyItemRemoved(position);
    }
}

Demo

Untuk demonya, kalian bisa melihat langsung di video ini 🙂 Bagaimana click di tempat berbeda akan menghasilkan hasil berbeda juga 🙂

That’s all ! Semoga membantu. ? Dan jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya ya, dengan terlebih dahulu follow dan star project tersebut. ?Silahkan bertanya di bagian komentar jika ada yang kurang jelas.