Menciptakan Custom List View Dengan Gambar Icon Dan Teks Di Android Studio

Kita kenal ada aneka macam bagian yang bisa kita pilih untuk mendukung tampilan aplikasi android, salah satunya yakni list view, list view kebanyakan digunakan untuk mengorganisir data yang ingin ditampilkan dengan tampilan berjajar secara vertical.

List view banyak diseleksi alasannya kita bisa memperlihatkan banyak data tanpa mesti menulis code dalam jumlah yang banyak, selain itu penampilan setiap item list view bisa kita custom disesuaikan dengan impian, kita mampu menampilkan list view dalam bentuk teks, gambar icon ataupun kombinasi gambar dan juga teks.

Keuntungan menggunakan List view selain dapat mempermudah penulisan program, list view juga secara otomatis telah dilengkapi dengan scroll view, artinya apabila data yang ingin ditampilkan jumlahnya lumayan banyak dan sudah melampaui tampilan layar, maka otomatis akan timbul scroll yang dapat di geser secara vertical ke atas dan juga ke bawah.

Di artikel kali ini saya akan coba menyuguhkan sebuah program untuk membuat list view, baik dalam bentuk tampilan goresan pena atau teks saja mapun dalam bentuk performa gambar dan juga teks.

Langkah-langkah membuat listview dengan icon dan teks di android studio

Berikut langkah-langkah menciptakan list view dalam bentuk gambar icon dan teks di andorid studio:

Langkah 1:
Pada android studio, pilih menu file > new Project, pilih empty activity kemudian klik next

Langkah 2:
Selanjutnya silahkan tentukan nama projek android anda dan juga nama packagenya.
misal disini untuk projeknya saya kasih Name: ListView Example dan package namenya com.example.listview, anda bisa sesuaikan dengan cita-cita.

Selanjutnya tekan tombol Finish jikalau telah.

Langkah 3:
Pada project android studio anda, di projec explorer sebelah kiri, tampilkan file  res>layout >activity_main.xml, lalu tulis atau masukan arahan seperti di bawah ini:

File: activity_main.xml

    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

            android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:dividerHeight="0dp" />

Pada arahan di atas kita menggunakan constraint layout, dimana list view kita buat full screeen dengan cara memperlihatkan nilai pada constraint batas atas,kiri, kanan dan bawahnya dengan parent supaya menyesuaikan dengan lebar layar.

...
...
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
...
...

 Langkah 4:
Buat file list_item.xml di folder res>layout>list_item.xml

Ini untuk desain setiap item dalam list, kurang lebih designnya akan mirip gambar ini:

Sebelah kiri foto, di kanan terdiri dari tulisan nama, alamat dan pekerjaan.

Silahkan masukan atau copy arahan di bawah ini

File: list_item.xml

    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">

   
        android:id="@+id/photo"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

   
        android:id="@+id/name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@id/photo"
        app:layout_constraintTop_toTopOf="parent"
        android:padding="5dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@id/address"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintVertical_chainStyle="packed"/>

   
        android:id="@+id/address"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="5dp"
        app:layout_constraintLeft_toRightOf="@id/photo"
        app:layout_constraintTop_toBottomOf="@id/name"
        app:layout_constraintBottom_toTopOf="@+id/job"
        app:layout_constraintRight_toRightOf="parent"/>

   
        android:id="@+id/job"
        android:layout_width="0dp"
        android:padding="5dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@id/photo"
        app:layout_constraintTop_toBottomOf="@id/address"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

Langkah 5:
Buat file pada projek android anda Person.java, untuk mengorganisir data list item

 File: Person.java

package app.example.listview;

public class Person
    private int photoId;
    private String name;
    private String address;
    private String job;

    public Person(int photoId, String name, String address, String job)
        this.photoId = photoId;
        this.name = name;
        this.address = address;
        this.job = job;
   

    public int getPhotoId()
        return photoId;
   

    public void setPhotoId(int photoId)
        this.photoId = photoId;
   

    public String getName()
        return name;
   

    public void setName(String name)
        this.name = name;
   

    public String getAddress()
        return address;
   

    public void setAddress(String address)
        this.address = address;
   

    public String getJob()
        return job;
   

    public void setJob(String job)
        this.job = job;
   

Langkah 6:
Buat file baru dengan nama ListAdapter.java pada projek android anda
List adapter digunakan untuk memperlihatkan dan memanipulasi item-item yang terdapat pada item_list.xml yang nanti akan di set pada list.

File: ListAdapter.java

package app.example.listview;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

public class ListAdapter extends BaseAdapter
    private Context context;
    private List persons;

    private static class ViewHolder
        ImageView photo;
        TextView name;
        TextView address;
        TextView job;
   

    public ListAdapter(Activity activity, List persons)
        this.context = activity.getBaseContext();
        this.persons = persons;
   

    @Override
    public int getCount()
        return persons.size();
   

    @Override
    public Object getItem(int id)
        return persons.get(id);
   

    @Override
    public long getItemId(int id)
        return id;
   

    @Override
    public View getView(int pos, View v, ViewGroup vGroup)
        // TODO Auto-generated method stub

        ViewHolder holder;
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if (v == null)
            holder = new ViewHolder();

            v = inflater.inflate(R.layout.list_item, vGroup, false);

            holder.photo = v.findViewById(R.id.photo);
            holder.name = v.findViewById(R.id.name);
            holder.address = v.findViewById(R.id.address);
            holder.job = v.findViewById(R.id.job);

            v.setTag(holder);
        else
            holder = (ViewHolder) v.getTag();

       

        Person p = persons.get(pos);

        holder.photo.setImageResource(p.getPhotoId());
        holder.name.setText(p.getName());
        holder.address.setText(p.getAddress());
        holder.job.setText(p.getJob());


        return v;
   

Langkah 7:
Modifikasi isi MainActivity.java sehingga seperti code di bawah ini:

File: MainActivity.java

 package app.example.listview;

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

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

        //ambil list view dari activity_main.xml
        ListView list=findViewById(R.id.list_view);

        //efinisikan list adapter yang kita buat
        ListAdapter adapter=new ListAdapter(this,createPersons());

        //set adapter pada list view.
        list.setAdapter(adapter);
   

    /*
     * Untuk menambahkan data pada list
     * silahkan tambahkan datanya di bawah ini
     * pola: misal kita tambahkan 4 saja dulu.
     */
    private List createPersons()
        Listdata=new ArrayList<>();
        data.add(new Person(R.drawable.photo_1,"Didin Ajidin","Garut","Guru Honorer"));
        data.add(new Person(R.drawable.photo_2,"Aqila Nurhikmah","Bogor","Guru PAUD"));
        data.add(new Person(R.drawable.photo_3,"Nadiya Nurjamilah","Bandung","Dokter spesialis penyakit dalam"));
        data.add(new Person(R.drawable.photo_4,"Najma Saniya Rizqia","Jakarta","Pengusaha"));

        return data;
   

Langkah 7:
Download gambar berikut, lalu tempatkan pada folder drawable di projek android studio anda.

photo_1.jpg

photo_2.jpg

photo_3.jpg

photo_4.jpg

Setelah seluruhnya selesai, struktur projek android studio anda akan tampil seperti gambar di bawah ini:

Langkah 8:
Jalankan projek android anda:
Jika sukses, Tampilannya akan muncul kurang lebih seperti gambar di bawah ini:



 Demikian wacana cara Membuat Custom list view dengan gambar icon dan teks di android studio.

Jika ada pertanyaan terkait projek di atas silahkan berkomentar, Happy Coding.