[Tutorial Lanjutan] Cara Menambahkan Method SetOnClickListener Pada RecyclerView di Android Studio

Tutorial Cara Menggunakan Method SetOnClickListener Pada RecyclerView di Android Studio

Halo Coders, Bagaimana kabar kalian hari ini? Sudahkah kalian menemukan bug nya. Saya harap kalian cepat menyelesaikannya. Pada kesempatan kali ini saya akan membagikan Tutorial Cara Menambahkan Method SetOnClickListener Pada RecyclerView di Android Studio.

Tutorial ini adalah tutorial lanjutan dari tutorial sebelumnya yaitu Cara Membuat RecyclerView Custom di Android Studio untuk Menampilkan Gambar dan Teks dengan Mudah.

Untuk bisa memahami tutorial dibawah ini, sebaiknya kalian mempelajari tutorial sebelumnya. Klik tautan di atas untuk membuka dan mempelajarinya. Terima kasih.

Sebelum kita terjun ke koding, disini saya akan menjelaskan apa yang akan kita pelajari di tutorial ini. Jadi pada kesempatan kali ini, kita akan belajar cara menambahkan method setOnClickListener untuk menampilkan toast ketika item pada RecyclerView di klik. Tutorial ini juga awal dari bagaimana nantinya setiap item pada RecyclerView bisa berpindah ke masing-masing activity yang ingin kita tuju. Namun sebelum itu, agar memudahkan kalian memahami semua tentang hebatnya widget satu ini. Untuk itu saya ingin mengajarkan caranya satu per satu dari awal. Dibawah ini adalah tutorialnya.

Cara Menambahkan Method setOnClickListener Pada RecyclerView di Android Studio dengan Mudah

Seperti yang telah saya tulis pada judul, di tutorial ini kita tidak akan membuat projek baru. Kalian cukup menggunakan projek sebelumnya yang telah saya bagikan tutorialnya agar tidak memakan banyak waktu untuk mengerjakannya. Kalian bisa mengklik tautan dibawah untuk mempelajarinya.

Apabila kalian sudah membuat project yang sama seperti pada tutorial diatas, kalian bisa mengikuti tutorial pada artikel ini. Apabila kalian mengalami kesulitan dalam mengikuti tutorial sebelumnya, kalian tidak perlu cemas karena saya telah mencantumkan link download projectnya agar kalian tidak menghabiskan waktu terlalu banyak. Namun tetap kalian harus paham agar bisa mengikuti tutorial di bawah ini.

Daftar file xml yang digunakan dalam projek ini:

  1. activity_main.xml [tutorial sebelumnya]
  2. list_item.xml [tutorial sebelumnya + perbarui]

Daftar file java yang digunakan dalam project ini:

  1. AdapterRecyclerView.java [tutorial sebelumnya + perbarui]
  2. ItemModel.java [tutorial sebelumnya]
  3. MainActivity.java [tutorial sebelumnya]
  4. MyItem.java [tutorial sebelumnya]

Kalian bisa melihat di atas bahwa daftar file yang di perbarui hanya dua saja untuk membuat setiap item pada RecyclerView menampilkan toast atau yang seperti yang ingin kita pelajari di bawah ini yaitu menambahkan method setOnClickListener.

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi RecyclerView App setOnClickListener.

XML list_item File

Buka file list_item.xml dalam folder layout lalu tambahkan id pada LinearLayout atau Layout yang kalian gunakan pada paling atas. Berikut ini adalah kode lengkap untuk file list_item.xml

res/layout/list_item.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/parent_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingLeft="16dp"
    android:paddingTop="8dp"
    android:paddingRight="16dp"
    android:paddingBottom="8dp">

    <ImageView
        android:id="@+id/imageList"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/facebook" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/text_headline"
            style="@style/TextAppearance.AppCompat.Title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Facebook" />

        <TextView
            android:id="@+id/text_subhead"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Social Media" />
    </LinearLayout>
</LinearLayout>

AdapterRecyclerView Java File

Pertama-tama, kalian harus menambahkan mendeklarasikan id dari widget LinearLayout yang baru saja kita tambahkan. Setelah itu, kalian tambahkan juga Context ke dalamnya. Dalam method onBindViewHolder, tambahkan lagi method setOnClickListener dengan menggunakan deklarasi dari id LinearLayout. Berikut ini adalah kode lengkap dari file AdapterRecyclerView.java

app/java/com.androidrion.recyclerviewapp/AdapterRecyclerView.java

package com.androidrion.recyclerviewapp;

import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.google.android.material.snackbar.Snackbar;

import java.util.ArrayList;

public class AdapterRecyclerView extends RecyclerView.Adapter<AdapterRecyclerView.ViewHolder> {

    private final ArrayList<ItemModel> dataItem;

    private final Context mContext;

    static class ViewHolder extends RecyclerView.ViewHolder {

        TextView textHead;
        TextView textSubhead;
        ImageView imageIcon;
        LinearLayout parentLayout;

        ViewHolder(View v) {

            super(v);

            textHead = v.findViewById(R.id.text_headline);
            textSubhead = v.findViewById(R.id.text_subhead);
            imageIcon = v.findViewById(R.id.imageList);
            parentLayout = v.findViewById(R.id.parent_layout);

        }
    }

    AdapterRecyclerView(Context context, ArrayList<ItemModel> data) {

        this.dataItem = data;
        mContext = context;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);

        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {

        TextView textHead = holder.textHead;
        TextView textSubhead = holder.textSubhead;
        ImageView imageIcon = holder.imageIcon;

        textHead.setText(dataItem.get(position).getName());
        textSubhead.setText(dataItem.get(position).getType());
        imageIcon.setImageResource(dataItem.get(position).getImage());

        holder.parentLayout.setOnClickListener(v -> {
            Toast.makeText(mContext, dataItem.get(position).getName(), Toast.LENGTH_SHORT).show();
            
        });

    }

    @Override
    public int getItemCount() {

        return dataItem.size();
    }


}

Run ‘app’

Setelah kalian menambahkan method dalam file java, jalankan project android studio kalian. Pada tampilan awal aplikasi, kalian akan melihat banyaknya item yang muncul dalam widget RecyclerView. Ketika kalian mengklik salah satu dari item tersebut, maka aplikasi akan menampilkan toast. Jika kode di atas terjadi error, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial singkat Cara Menambahkan Method setOnClickListener pada RecyclerView di Android Studio dengan mudah. Jika kalian mengalami kendala atau error dalam mengikuti tutorial di atas, silahkan berkomentar di bawah artikel ini. Jangan lupa juga untuk like, comment and subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima kasih.

Download Project

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.

Get real time updates directly on you device, subscribe now.

You might also like
Leave A Reply

Your email address will not be published.