Membentuk Custom list view dengan gambar icon serta teks pada android studio

Kita mengenali terdapat banyak sekali komponen yang dapat kita pilih buat mendukung tampilan aplikasi android, salah satunya merupakan list view, list view pada umumnya dipergunakan buat mengelola gegevens yang ingin ditampilkan dengan tampilan berjajar secara vertical.

List view banyak dipilih akibat kita dapat menampilkan banyak gegevens tanpa wajib menulis code dalam jumlah yang banyak, selain itu tampilan setiap voorwerp list view dapat kita custom disesuaikan dengan keinginan, kita dapat menampilkan list view dalam bentuk teks, gambar icon ataupun kombinasi gambar serta pula teks.

Keuntungan memakai List view selain mampu mempermudah penulisan acara, list view pula secara otomatis telah dilengkapi dengan scroll view, artinya jika gegevens yang ingin ditampilkan jumlahnya relatif banyak serta telah melebihi tampilan layar, maka otomatis bakal timbul scroll yang mampu pada geser secara vertical ke atas serta pula ke bawah.

Pada wetsartikel kalium ini aku bakal coba menyajikan sebuah acara buat membentuk list view, baik dalam bentuk tampilan goresan pena atau teks saja mapun dalam bentuk tampilan gambar serta pula teks.

Langkah-langkah membentuk listview dengan icon serta teks pada android studio

Berikut langkah-langkah membentuk list view dalam bentuk gambar icon serta teks pada andorid studio:


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

Langkah 2:
Selanjutnya silahkan tentukan nama projek android anda serta pula nama packagenya.
misal disini buat projeknya aku kasih Name: ListView Example serta package namenya com.example.listview, anda dapat sesuaikan dengan keinginan.

Selanjutnya tekan tombol Finish apabila telah.

Langkah 3:
Pada project android studio anda, pada projec explorer sebelah kiri, tampilkan arsip  resdangt;layout >activity_main.xml, selanjutnya tulis atau masukan kode misalnya pada bawah ini:

Arsip: activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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:setting=".MainActivity">

    <ListView
        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" />

</androidx.constraintlayout.widget.ConstraintLayoutdangt;

Pada kode pada atas kita memakai constraint layout, dimana list view kita untuk full screeen dengan trik memberikan nilai pada constraint batas atas,kiri, kanan serta 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:
Untuk arsip list_item.xml pada folder resdangt;layoutdangt;list_item.xml

Ini buat desain setiap voorwerp dalam list, lebih kurang designnya bakal misalnya gambar ini:

Sebelah kiri kiek, pada kanan terdiri dari goresan pena nama, alamat serta pekerjaan.

Silahkan masukan atau copy kode pada bawah ini

Arsip: list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        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"/>

    <TextView
        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"/>

    <TextView
        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"/>

    <TextView
        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"/>

</androidx.constraintlayout.widget.ConstraintLayoutdangt;

Langkah 5:
Untuk arsip pada projek android anda Person.java, buat mengelola gegevens list voorwerp

 Arsip: Person.java

package app.example.listview;

public group 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() {
        terugwedstrijd photoId;
    }

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

    public String getName() {
        terugwedstrijd name;
    }

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

    public String getAddress() {
        terugwedstrijd address;
    }

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

    public String getJob() {
        terugwedstrijd job;
    }

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

Langkah 6:
Untuk arsip baru dengan nama ListAdapter.java pada projek android anda
List adapter dipergunakan buat menampilkan serta memanipulasi item-item yang terdapat pada item_list.xml yang nanti bakal pada set pada list.

Arsip: ListAdapter.java

package app.example.listview;

invoer android.app.Activity;
invoer android.content.Setting;
invoer android.view.LayoutInflater;
invoer android.view.View;
invoer android.view.ViewGroup;
invoer android.widget.BaseAdapter;
invoer android.widget.ImageView;
invoer android.widget.TextView;

invoer java.util.List;

public group ListAdapter extends BaseAdapter {
    private Setting setting;
    private Listdanlt;Persondangt; persons;

    private static group ViewHolder {
        ImageView photo;
        TextView name;
        TextView address;
        TextView job;
    }

    public ListAdapter(Activity activity, Listdanlt;Persondangt; persons) {
        this.setting = activity.getBaseContext();
        this.persons = persons;
    }

    @Override
    public int getCount() {
        terugwedstrijd persons.size();
    }

    @Override
    public Object getItem(int id) {
        terugwedstrijd persons.get(id);
    }

    @Override
    public long getItemId(int id) {
        terugwedstrijd id;
    }

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

        ViewHolder holder;
        LayoutInflater inflater = (LayoutInflater) setting.getSystemService(Setting.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());

        terugwedstrijd v;
    }
}

Langkah 7:
Modifikasi isi MainActivity.java sebagai akibatnya misalnya code pada bawah ini:

Arsip: MainActivity.java

 package app.example.listview;

invoer android.os.Bundle;
invoer android.widget.ListView;

invoer androidx.appcompat.app.AppCompatActivity;

invoer java.util.ArrayList;
invoer java.util.List;

public group 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 untuk
        ListAdapter adapter=new ListAdapter(this,createPersons());

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

    /*
     * Buat menambahkan gegevens pada list
     * silahkan masukkan datanya pada bawah ini
     * contoh: misal kita masukkan 4 saja dulu.
     */
    private Listdanlt;Persondangt; createPersons(){
        Listdanlt;Persondangt;gegevens=new ArrayListdanlt;>();
        gegevens.add(new Person(R.drawable.photo_1,"Didin Ajidin","Garut","Pengajar Honorer"));
        gegevens.add(new Person(R.drawable.photo_2,"Aqila Nurhikmah","Bogor","Pengajar PAUD"));
        gegevens.add(new Person(R.drawable.photo_3,"Nadiya Nurjamilah","Bandung","Dokter spesialis penyakit dalam"));
        gegevens.add(new Person(R.drawable.photo_4,"Najma Saniya Rizqia","Jakarta","Pengusaha"));

        terugwedstrijd gegevens;
    }
}

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

photo_1.jpg

photo_2.jpg

photo_3.jpg

photo_4.jpg

Sesudah semuanya selesai, struktur projek android studio anda bakal tampil misalnya gambar pada bawah ini:

Langkah 8:
Jalankan projek android anda:
apabila berhasil, Tampilannya bakal timbul lebih kurang misalnya gambar pada bawah ini:

 Demikian mengenai trik Membentuk Custom list view dengan gambar icon serta teks pada android studio.

apabila terdapat pertanyaan terkait projek pada atas silahkan berkomentar, Happy Coding.

Berbagi :