Membuat ListView Dengan Implementasi Klik Pada Setiap Item

ListView Android Studio

Jika Spinner menampilkan seluruh item-item yang ada pada Spinner tersebut saat icon dropdown di klik, berbeda dengan ListView; sebuah ListView secara langsung menampilkan seluruh item-item yang ada pada ListView tersebut.  Namun, kurang lebih tidak jauh berbeda cara implementasi nya dengan Spinner.

Pada tutorial ini akan dibuat sebuah ListView yang ketika setiap itemnya di klik akan memperlihatkan sesuatu atau menunjukkan sebuah reaksi. Sama dengan Spinner yang sudah dibahas pada postingan sebelumnya, bedanya pada Spinner yang sudah dibahas ditambahkan sebuah tombol (Button) untuk menangani saat sebuah item dipilih. Pada ListView ini tidak ditambahkan tombol, namun langsung menunjukkan reaksi saat item dipilih.

Gambar 1 : Contoh ListView

ListView yang akan dibuat ini akan memiliki sebuah metode pada setiap item nya, sehingga jika Anda menginginkan reaksi atau sesuatu yang diperlihatkan berbeda ketika item di klik, Anda tinggal mengganti saja metode di dalam setiap item dengan yang Anda inginkan. Pada tutorial ini akan dibuat pesan toast yang menginformasikan setiap itemnya.

Dalam pembahasan ini akan dibuat 25 item pada sebuah ListView. Item-item tersebut pada contoh ini adalah karakter dari Marvel Cinematic Universe. Seluruh item dibuat pada file java MainActivity.java, pada layout activity_main.xml hanya akan ada sebuah komponen TextView sebagai judulnya, dan sebuah komponen ListView itu sendiri.

Membuat ListView

Jika proyek Anda sudah siap, buka activity_main.xml. Untuk membuat ListView, panggil dengan tag <ListView>, tentukan atribut-atribut tata letak, id dan lainnya. Berikut ini isi lengkap activity_main.xml dari package com.gwnbs.proyekpertama :

<?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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/daftarMCU"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:gravity="center"
        android:background="@color/colorPrimary"
        android:textStyle="bold"
        android:textSize="20sp"
        android:text="Daftar Karakter MCU" />

    <ListView
        android:layout_below="@id/daftarMCU"
        android:id="@+id/listKarakter"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

Selanjutnya kita beralih ke MainActivity.java. Pertama-tama adalah membuat item-item untuk ListView tesebut dengan menggunakan resource String. Supaya tidak ribet, seluruh kodingan akan dibuat di dalam metode onCreate tepat dibawah setContentView(R.layout.activity_main);

Jika Anda mengikuti contoh tutorial ini, salin kode-kode dibawah ini tepat dibawah setContentView(R.layout.activity_main);, Namun jika tidak, silahkan berimprovisasi; misalnya ingin item-itemnya bukan karakter Marvel, tinggal ganti saja nama-nama yang ada dengan yang di inginkan :

String[] karakterMarvel = {"Iron Man", "Thor", "Hulk", "Captain America", "Black Widow",
"Hawkeye", "Spider-Man", "Ant-Man", "War Machine", "Captain Marvel", "Doctor Strange",
"Star-Lord", "Scarlet Witch", "Falcon", "Black Panther", "Drax", "Groot", "Valkyrie", "Odin",
"Korg", "Winter Soldier", "Nick Furry", "Wong", "Loki", "Mighty Thanos"};

Jumlah seluruh item-item di atas adalah 25 item, namun untuk memperpendek isi kodingan pada contoh tutorial ini, dibuat hanya 6 item yang dapat di klik. Untuk yang lainnya, seandainya Anda membuat banyak item, Anda hanya perlu menambahkan kodingan yang sama dibawah kodingan item terakhir.

Untuk perhitungan posisi, dimulai dari angka 0, bukan 1. Pada contoh item-item diatas, item "Iron Man" adalah starter nya, jadi posisi "Iron Man" adalah 0. Sehingga, jika dihitung seluruhnya; akan berhenti di angka 24, yaitu "Mighty Thanos" sebagai posisi terakhir. Ini perlu diketahui untuk menentukan reaksi dari klik pada masing-masing item yang segera akan Anda ketahui.

Tahapan selanjutnya adalah membuat variabel untuk class ListView. Pada contoh ini, variabelnya dibuat daftar. Kemudian mendapatkan id dari komponen <ListView> di activity_main.xml, id <ListView> nya tadi dibuat listKarakter. Selanjutnya adalah membuat adpter dan menentukan layout untuk adapter tersebut. Karena ini ListView yang menampilkan banyak item, sehingga adapter yang dipakai adalah ArrayAdapter. Letakkan semua kodingan dibawah String [] karakterMarvel diatas.

ListView daftar = findViewById(R.id.listKarakter);
ArrayAdapter<String> adaptor = new ArrayAdapter<>(this,
android.R.layout.simple_list_item_1, karakterMarvel);
daftar.setAdapter(adaptor);

Langkah selanjutnya adalah membuat Click Listener untuk item-item pada ListView tersebut dengan setOnItemClickListener. Seperti yang sudah dikatakan diatas, untuk tutorial ini hanya 6 item yang dibuat dapat di klik, yaitu mulai dari posisi 0 hingga 5 guna mermperpendek kodingan pada MainActivity.java. Pertanyaan yang muncul mungkin "Lantas kenapa membuat banyak item kalau hanya 6 item yang dapat di klik?".

Pertanyaan tersebut wajar saja bagi yang belum mengenal ListView. "Dibuat sebanyak itu, supaya diketahui bawha ListView ini adalah salah satu komponen yang tidak memerlukan elemen ScrollView untuk pengguliran dalam penerapannya". Berbeda dengan misalnya sebuah komponen TextView; Anda membuat teks panjang hingga halaman pada ponsel penuh dan masih menyisakan banyak lagi dibawahnya, Anda tidak akan dapat scrolling (menggulir) layar Anda kebawah tanpa bantuan komponen <ScrollView>.

Di dalam setOnItemClickListener akan terdapat sebuah metode yaitu public void onItemClick. Lalu pada metode inilah implementasi klik untuk seluruh item ditempatkan. Letakkan semua kode dibawah daftar.setAdapter(adaptor). Berikut selengkapanya pada setOnItemClickListener :

daftar.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int posisi, long id) {
switch (posisi) {
    case 0:
        Toast t = Toast.makeText(MainActivity.this,
        "Iron Man adalah Manusia Besi", Toast.LENGTH_SHORT);
        t.setGravity(Gravity.CENTER, 0, 0);
        t.show();
        break;
    case 1 :
        Toast t1 = Toast.makeText(MainActivity.this,
        "Thor adalah Dewa Petir", Toast.LENGTH_SHORT);
        t1.setGravity(Gravity.CENTER, 0, 0);
        t1.show();
        break;
    case 2 :
        Toast t2 = Toast.makeText(MainActivity.this,
        "Hulk adalah Raksasa Hijau", Toast.LENGTH_SHORT);
        t2.setGravity(Gravity.CENTER, 0, 0);
        t2.show();
        break;
    case 3 :
        Toast t3 = Toast.makeText(MainActivity.this,
        "Captain America adalah Leader Avengers", Toast.LENGTH_SHORT);
        t3.setGravity(Gravity.CENTER, 0, 0);
        t3.show();
        break;
    case 4 :
        Toast t4 = Toast.makeText(MainActivity.this,
        "Black Widow adalah Wanita Cantik", Toast.LENGTH_SHORT);
        t4.setGravity(Gravity.CENTER, 0, 0);
        t4.show();
        break;
    case 5 :
        Toast t5 = Toast.makeText(MainActivity.this,
        "Hawkeye adalah Archery Master", Toast.LENGTH_SHORT);
        t5.setGravity(Gravity.CENTER, 0, 0);
        t5.show();
        break;
   /*Letakkan disini untuk Case berikutnya*/
    }}
});

Jadi, jika Anda hendak menambahkan klik event untuk item-item lainnya, Anda tinggal tambahkan saja case posisi berikutnya dibawah case posisi item terakhir. Dan jika Anda ingin mengubah reaksi dari klik, gantilah kode pesan toast pada setiap case dengan reaksi yang di inginkan. Mengenai pesan toast, bisa dilihat pada postingan ini. Berikut kode selengkapnya pada MainActivity.java dari com.gwnbs.proyekpertama :

package com.gwnbs.proyekpertama;

import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override    

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

        String[] karakterMarvel = {"Iron Man", "Thor", "Hulk",
                "Captain America", "Black Widow", "Hawkeye", "Spider-Man",
                "Ant-Man", "War Machine", "Captain Marvel", "Doctor Strange",
                "Star-Lord", "Scarlet Witch", "Falcon", "Black Panther",
                "Drax", "Groot", "Valkyrie", "Odin", "Korg", "Winter Soldier",
                "Nick Furry", "Wong", "Loki", "Mighty Thanos"};

        ListView daftar = findViewById(R.id.listKarakter);
        ArrayAdapter<String> adaptor = new ArrayAdapter<>(this,
                android.R.layout.simple_list_item_1, karakterMarvel);
        daftar.setAdapter(adaptor);

        daftar.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override            

            public void onItemClick(AdapterView<?> adapterView, View view, int posisi, long id) {
                switch (posisi) {
                    case 0:
                        Toast t = Toast.makeText(MainActivity.this,
                                "Iron Man adalah Manusia Besi", Toast.LENGTH_SHORT);
                        t.setGravity(Gravity.CENTER, 0, 0);
                        t.show();
                        break;
                    case 1 :
                        Toast t1 = Toast.makeText(MainActivity.this,
                                "Thor adalah Dewa Petir", Toast.LENGTH_SHORT);
                        t1.setGravity(Gravity.CENTER, 0, 0);
                        t1.show();
                        break;
                    case 2 :
                        Toast t2 = Toast.makeText(MainActivity.this,
                                "Hulk adalah Raksasa Hijau", Toast.LENGTH_SHORT);
                        t2.setGravity(Gravity.CENTER, 0, 0);
                        t2.show();
                        break;
                    case 3 :
                        Toast t3 = Toast.makeText(MainActivity.this,
                                "Captain America adalah Leader Avengers", Toast.LENGTH_SHORT);
                        t3.setGravity(Gravity.CENTER, 0, 0);
                        t3.show();
                        break;
                    case 4 :
                        Toast t4 = Toast.makeText(MainActivity.this,
                                "Black Widow adalah Wanita Cantik", Toast.LENGTH_SHORT);
                        t4.setGravity(Gravity.CENTER, 0, 0);
                        t4.show();
                        break;
                    case 5 :
                        Toast t5 = Toast.makeText(MainActivity.this,
                                "Hawkeye adalah Archery Master", Toast.LENGTH_SHORT);
                        t5.setGravity(Gravity.CENTER, 0, 0);
                        t5.show();
                        break;
                }
            }
        });
    }
}

Menguji Klik Item ListView

Tahapan terakhir tentunya adalah testing apakah semua berjalan dengan baik. Jika Anda mengikuti tutorial diatas dan semuanya sama, seharusnya tidak ada kelainan (semoga tidak bingung). Karena saya juga praktik langsung saat membuat postingan ini. Di bawah ini video singkat setelah aplikasi di running debug pada ponsel Android. Sekian dan terima kasih, jika ada yang mengganjal atau ada pertanyaan lain, silahkan di post di kolom komentar.