Membuat Custom Listview di Android Studio

Custom Listview Android Studio

Sebelumnya sudah di bahas mengenai ListView biasa serta contoh penerapan nya pada postingan terdahulu. Dan pada postingan ini akan di contohkan cara penerapan dari Custom listView. Maksud dari Custom ListView disini layaknya seperti di modifikasi. Custom sendiri jika di artikan ke bahasa indonesia yaitu "Perubahan".

Membuat Custom Listview

Baik, pertama-tama yang di lakukan adalah membuat sebuah layout baru. Untuk membuat layout baru, perluas terlebih dahulu folder res, kemudian klik kanan pada folder layout > New > Layout Resource File. Isikan nama dari layout nya lalu klik OK. Pada contoh ini nama layout nya custom_list.xml.

Pada layout ini, kita membuat 4 komponen yaitu : 2 komponen TextView, 1 Komponen ImageView dan 1 komponen Button. Kira-kira hasil dari tutorial ini akan seperti gambar di bawah ini.

Gambar 1 : Custom Listview

Pada gambar terlihat 4 komponen; ImageView sebagai penampung gambar, 2 TextView sebagai judul dan keterangan dan Button sebagai elemen yang pada contoh ini di fungsikan untuk menghapus. Berikut isi lengkap layout custom_list.xml dari com.gwnbs.proyekketiga :

<?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">

    <ImageView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:id="@+id/gambarHero"
        tools:ignore="ContentDescription"
        android:layout_marginEnd="10sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/namaHero"
        android:textStyle="bold"
        android:textSize="40sp"
        android:layout_marginBottom="5dp"
        android:layout_toEndOf="@id/gambarHero"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/teksKeterangan"
        android:textStyle="bold"
        android:textSize="20sp"
        android:fontFamily="monospace"
        android:layout_below="@id/namaHero"
        android:layout_toEndOf="@id/gambarHero"/>

    <Button
        android:id="@+id/btnHapus"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/teksKeterangan"
        android:layout_toEndOf="@id/gambarHero"
        android:layout_marginEnd="20dp"
        android:background="#E46F0F"
        android:text="Hapus"/>

</RelativeLayout>

Total item yang ada pada Listview berjumlah 8 item. Sebelumnya, 8 buah gambar harus sudah di persiapkan terlebih dahulu. Gambar-gambar pada contoh ini menggunakan karakter dari Marvel Movies yang di download dari Google Search. Kemudian peletakkan nya pada folder drawable. Untuk meletakkan gambar ke folder drawable, salin semua gambar terlebih dahulu, lalu pada Android Studio, perluas folder res kemudian klik kanan pada folder drawable > Paste.

Gambar 2 : Menunjukkan letak gambar

Setelah langkah awal di atas, kita ke activity_main.xml. Pada layout ini di tambahkan hanya sebuah komponen yaitu komponen Listview tersebut. Berikut isi dari activity_main.xml di contoh ini :

<?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">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:id="@+id/daftar"/>

</RelativeLayout>

Selanjutnya membuat sebuah java class baru. File java ini nanti nya akan berfungsi sebagai penyimpanan data-data dari item yang ada pada Listview; gambar, judul dan keterangan. Penyimpanan saat item pada Listview di hapus sifatnya sementara; maksudnya, setelah aplikasi di refresh / launching ulang, data-data dari item yang di hapus akan terlihat kembali.



Class ini berisi variabel-variabel untuk seluruh item yang ada pada list, sebuah konstruktor untuk menginisialisasi atribut-atribut dan getter untuk mendapatkan nilai atribut. Pada tutorial ini, class nya di beri nama Pahlawan.java. Untuk membuat class java baru, klik kanan pada folder package, atau bisa juga klik kanan pada MainActivity.java > New > Java Class. Isikan namanya laluk klik OK. Berikut isi dari class ini :

package com.gwnbs.proyekketiga;

class Pahlawan {
    private int gambar;
    private String hero, keterangan;

    Pahlawan(int gambar, String hero, String keterangan){
        this.gambar = gambar;
        this.hero = hero;
        this.keterangan = keterangan;
    }
    int getGambar(){
        return gambar;
    }
    String getHero() {
        return hero;
    }
    String getKeterangan() {
        return keterangan;
    }
}

Berikutnya kita perlu membuat juga Custom Adapter. Karena ini Listview modifikasi sehingga tidak bisa menggunakan adapter bawaan yang tersedia. Namanya juga adapter, tentu gunanya sebagai penghubung. Custom Adapter ini nanti nya yang akan menghubungkan class java yang di buat tadi, lalu komponen-komponen yang ada pada activity_main.xml ke aktivitas utama. Koding implementasi untuk klik tombol juga di lakukan di dalam file adapter ini. Pada contoh ini, class adapter ini di beri nama AdapterPribadi.java.

package com.gwnbs.proyekketiga;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.DialogInterface;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AlertDialog;

import java.util.List;

public class AdapterPribadi extends ArrayAdapter <Pahlawan> {

    private List<Pahlawan> daftarPahlawan;
    private Context context;
    private int resource;

    AdapterPribadi(Context context, int resource, List<Pahlawan> daftarPahlawan) {
        super(context, resource, daftarPahlawan);
        this.context = context;
        this.resource = resource;
        this.daftarPahlawan = daftarPahlawan;
    }

    @NonNull    

    @Override    

    public View getView(final int position, @Nullable View convertView, 

                        @NonNull ViewGroup parent) {
        LayoutInflater layoutInflater = LayoutInflater.from(context);
        

        @SuppressLint("ViewHolder")
        View view = layoutInflater.inflate(resource, null, false);

        ImageView gamabars = view.findViewById(R.id.gambarHero);
        TextView teks = view.findViewById(R.id.namaHero);
        TextView tekstil = view.findViewById(R.id.teksKeterangan);
        Button tombolHapus = view.findViewById(R.id.btnHapus);

        Pahlawan pahlawan = daftarPahlawan.get(position);

        gamabars.setImageDrawable(context.getResources().getDrawable(pahlawan.getGambar()));
        teks.setText(pahlawan.getHero());
        tekstil.setText(pahlawan.getKeterangan());

        tombolHapus.setOnClickListener(new View.OnClickListener() {
            @Override            

            public void onClick(View view) {
                infoHero(position);
            }
        });

        return view;
    }

    private void infoHero(final int position) {
        AlertDialog.Builder builder = new AlertDialog.Builder(context);
        builder.setTitle("Apakah Kamu yakin ingin menghapus Pahlawan hebat ini?");

        builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
            @Override            public void onClick(DialogInterface dialogInterface, int i) {
                daftarPahlawan.remove(position);
                notifyDataSetChanged();
            }
        });

        builder.setNegativeButton("No", new DialogInterface.OnClickListener() {
            @Override            

            public void onClick(DialogInterface dialogInterface, int i) {
            }
        });
        AlertDialog alertDialog = builder.create();
        alertDialog.show();
    }
}

Berikutnya tahap terakhir kita ke MainActivity.java. Disini tidak banyak yang di lakukan, hanya menghubungkan Custom Adapter dan Custom Layout ke aktivitas, lalu memasukkan gambar dengan memanggil resource nya, menambahkan judul dan keterangan untuk masing-masing kedelapan item tersebut. Berikut isi keseluruhan yang ada pada MainActivity.java :

package com.gwnbs.proyekketiga;

import android.os.Bundle;
import android.widget.ListView;

import androidx.appcompat.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    List <Pahlawan> daftarPahlawan;
    ListView listhero;

    @Override    

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

        daftarPahlawan = new ArrayList<>();
        listhero = findViewById(R.id.daftar);

        daftarPahlawan.add(new Pahlawan(R.drawable.ave_thor,
                "Thor", getString(R.string.about_thor)));
        daftarPahlawan.add(new Pahlawan(R.drawable.ave_doctor,
                "Doctor Strange", getString(R.string.about_strange)));
        daftarPahlawan.add(new Pahlawan(R.drawable.ave_iron,
                "Iron Man", getString(R.string.about_iron)));
        daftarPahlawan.add(new Pahlawan(R.drawable.ave_captain,
                "Captain America", getString(R.string.about_cap)));
        daftarPahlawan.add(new Pahlawan(R.drawable.ave_hulk,
                "Hulk", getString(R.string.about_hulk)));
        daftarPahlawan.add(new Pahlawan(R.drawable.ave_spider,
                "Spider-Man", getString(R.string.about_spidey)));
        daftarPahlawan.add(new Pahlawan(R.drawable.ave_capmarvel,
                "Captain Marvel", getString(R.string.about_capmar)));
        daftarPahlawan.add(new Pahlawan(R.drawable.ave_thanos,
                "Mighty Thanos", getString(R.string.about_thanos)));

        AdapterPribadi adaptor = new AdapterPribadi(this,
                R.layout.custom_list, daftarPahlawan);
        listhero.setAdapter(adaptor);

    }
}

Teks keterangan untuk masing-masing item sudah di ekstrak ke strings.xml, sehingga pada kode di atas hanya menampilkan getString (R.string.about_hero). 

Sampai disini tutorial ini di nyatakan beres. Berikut di bawah di sertakan video demo hasil dari tutorial ini. Jika ada pertanyaan, kritik, saran dan lain sebagainya bisa di sampaikan melalui komentar atau kontak yang di sediakan pada blog ini.