Cara Membuat Custom ListView Menggunakan ArrayAdapter

Tutorial Cara Membuat ListView Custom Menggunakan ArrayAdapter di Android Studio

Halo semuanya. bagaimana kabar kalian hari ini? saya harap kalian semua baik-baik saja. Sebelumnya saya sudah membagikan tutorial cara membuat listview sederhana. Pada kesempatan kali ini, saya akan membagikan tutorial cara membuat listview custom menggunakan arrayadapter di android studio.

Normalnya, ListView hanya menampilkan daftar item yang dapat di scroll dan item secara otomatis dimasukkan ke dalam daftar menggunakan Adapter. Tampilan normal atau sederhana ini hanya memperlihatkan daftar teks. Terkadang kita perlu menambahkan beberapa teks lagi di dalam daftar ListView. Untuk itu, android mengizinkan kalian untuk menyesuaikan ListView.

Nah, dalam tutorial ini, kalian akan belajar cara membuat ListView custom atau khusus untuk menampilkan teks tambahan menggunakan custom layout. Kalian dapat merancang sendiri layout ListView kalian.

- Advertisement -

Tutorial Cara Membuat Custom ListView Menggunakan ArrayAdapter di Android Studio

Buatlah projek android studio baru dengan informasi sebagai berikut:

Application Name:Custom ListView App
Package Name:com.androidrion.customlistview
Language:Java
Minimum SDK :API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml layout yang digunakan dalam projek ini:

  1. activity_main.xml
  2. custom_listview.xml

Daftar file java yang digunakan dalam projek ini:

  1. ListAdapter.java
  2. MainActivity.java

Berikut adalah struktur projek pada aplikasi Custom ListView App.

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi android Custom ListView App.

Drawable File

Tambahkan gambar pada projek android studio kalian. Dalam tutorial ini saya menggunakan gambar di bawah ini.

Kalian bisa mendownload ikon diatas melalui link di bawah ini.

DOWNLOAD ASSET CUSTOM LISTVIEW APP

Setelah kalian download, ekstrak file rar dan letakkan ikon ke dalam folder drawable di projek android studio kalian.

XML Layout File

Buka file activity_main.xml kalian, lalu tambahkan widget listview di dalam LinearLayout. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Buat file xml layout baru dengan nama custom_listview. fungsi dari file ini adalah agar kita bisa mendesain tata letak dari item listview yang akan ditampilkan. Berikut ini adalah kode lengkap untuk file custom_listview.xml

app/res/layout/custom_listview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp">

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

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

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

        <TextView
            android:id="@+id/text_subhead"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="Subhead" />
    </LinearLayout>
</LinearLayout>

Java Activity File

Buatlah file activity java baru dengan cara klik kanan pada folder java, lalu pilih New>Java Class. Beri nama file java baru tersebut dengan nama file ListAdapter. Berikut ini adalah kode lengkap untuk file ListAdapter.java

app/java/com.androdrion.customlistviewapp/ListAdapter.java

package com.androidrion.customlistview1;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

public class ListAdapter extends ArrayAdapter {

    private int[] Icon;
    private String[] Headline;
    private String[] Subhead;
    private Context context;

    ListAdapter(@NonNull Context context, int[] icon, String[] headline, String[] subhead) {
        super(context, R.layout.custom_listview, headline);
        this.Icon = icon;
        this.Headline = headline;
        this.Subhead = subhead;
        this.context = context;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        LayoutInflater layoutInflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = layoutInflater.inflate(R.layout.custom_listview, null, true);
        ImageView icon = view.findViewById(R.id.imageList);
        TextView headline = view.findViewById(R.id.text_headline);
        TextView subhead = view.findViewById(R.id.text_subhead);

        icon.setImageResource(Icon[position]);
        headline.setText(Headline[position]);
        subhead.setText(Subhead[position]);
        return view;
    }
}

Buka file MainActivity kalian dan tambahkan kode dibawah ini untuk membuat aplikasi menampilkan item pada listivew. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.customlistviewapp/MainActivity.java

package com.androidrion.customlistview1;

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

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    ListView lv;

    int[] iconList = new int[]{
            R.drawable.facebook, R.drawable.twitter, R.drawable.instagram, R.drawable.snapchat,
            R.drawable.whatsapp, R.drawable.line, R.drawable.kakaotalk, R.drawable.telegram, R.drawable.messenger,
            R.drawable.youtube, R.drawable.tiktok, R.drawable.vine, R.drawable.vimeo,
            R.drawable.figma, R.drawable.adobe_xd, R.drawable.sketch, R.drawable.framer,
            R.drawable.android, R.drawable.apple, R.drawable.windows,
            R.drawable.opera, R.drawable.firefox, R.drawable.safari, R.drawable.edge,
            R.drawable.paypal, R.drawable.mastercard, R.drawable.visa,
            R.drawable.bitcoin, R.drawable.ethereum
    };

    String[] Headline = {"Facebook", "Twitter", "Instagram", "SnapChat",
            "WhatsApp", "LINE", "KakaoTalk", "Telegram", "Messenger",
            "YouTube", "TikTok", "Vine", "Vimeo",
            "Figma", "Adobe XD", "Sketch", "Framer",
            "Android", "iOS", "Windows",
            "Opera", "Mozilla", "Safari", "Edge",
            "Paypal", "Mastercard", "Visa",
            "Bitcoin", "Ethereum"
    };

    String[] Subhead = {"Social Media", "Social Media", "Social Media", "Social Media",
            "Chatting App", "Chatting App", "Chatting App", "Chatting App", "Chatting App",
            "Video Streaming App", "Video Streaming App", "Video Streaming App", "Video Streaming App",
            "UI Design App", "UI Design App", "UI Design App", "UI Design App",
            "Operating System", "Operating System", "Operating System",
            "Browser App", "Browser App", "Browser App", "Browser App",
            "Payment Method", "Payment Method", "Payment Method",
            "Cryptocurrency", "Cryptocurrency"
    };

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

        lv = findViewById(R.id.list);
        ListAdapter listAdapter = new ListAdapter(this, iconList, Headline, Subhead);
        lv.setAdapter(listAdapter);
        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                Toast.makeText(getApplicationContext(),
                        "You have selected : " + Headline[position],
                        Toast.LENGTH_SHORT).show();

            }
        });

    }


}

Run ‘app’

Sekarang jalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian melihat daftar aplikasi android. Kalian bisa men-scroll aplikasi kalian untuk melihat daftar aplikasi yang lainnya. Ketika kalian mengklik item pada listview maka aplikasi akan mengeluarkan informasi berupa toast. Jika kode diatas tidak terjadi masalah, maka aplikasi akan terlihat seperti pada gambar di bawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara membuat listview di aplikasi android studio menggunakan arrayadapter. Tutorial diatas lumayan susah karena menggunakan file java tambahan untuk menjalankan aplikasi android.

Jika kalian mengalami kendala dalam mengerjakan tutorial diatas, silahkan komentar di bawah pada artikel ini. Jangan lupa juga untuk like video dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. terima kasih.

- Advertisement -

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

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.