Cara Menggunakan ListView di Android Studio

ListView adalah salah satu View yang menampilkan daftar  item secara vertical di Activity Android.  ListView secara otomatis menambahkan scroll jika jumlah item yang dimasukkan ke dalam ListView menghasilkan tinggi lebih besar dari tinggi ListView tersebut. Catatan ini akan menjelaskan cara menggunakan ListView dengan adapter sederhana yang telah disediakan oleh Android Studio.

Daftar Isi Catatan

  1. Menambahkan ListView pada Layout
  2. Mendeklarasikan ListView di Activity
  3. Membuat Adapter dan Memasangnya pada ListView

Cara Menggunakan ListView di Android Studio

Sebelum menggunakan ListView di Android Studio kita harus membuat project baru di Android Studio. Jika belum tahu cara membuatnya bisa membaca Cara Membuat Project Baru di Android Studio.

Beberapa langkah yang perlu dilakukan untuk menggunakan ListView di Android Studio adalah sebagai berikut.

Menambahkan ListView di Layout

Langkah pertama untuk menggunakan ListView adalah menambahkan ListView di Layout yang digunakan untuk menampilkan konten di Activity. Contoh kode Listview Tersebut adalah seperti di bawah ini.

<ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true" />

Kode ListView di atas memiliki atribut-atribut sebagai berikut:

  • Atribut id: ini digunakan untuk mengontrol ListView tersebut dari Activity Java dengan fungsi
    findViewById()
  • Atribut layout_width: ini digunakan untuk menentukan lebar Listview pada screen Activity.
  • Atribut layout_height: ini digunakan untuk menentukan tinggi ListView
  • Atribut layout_centerHorizontal: ini digunakan untuk membuat ListView berada di tengah layar secara horizontal (rata tengah secara horizontal).
  • Atribut layout_alignParentTop: ini digunakan untuk membuat ListView selalu berada di atas.

Keseluruhan kode Layout activity_main.xml yang digunakan pada tutorial ini adalah seperti di bawah ini:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:context="com.nusagates.listview.MainActivity">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true" />
</RelativeLayout>

Mendeklarasikan ListView di Activity dan Menginisiasinya

Setelah ListView ditambahkan pada Layout selanjutnya adalah mendeklarasikan ListView di Activity kemudian menginisiasinya dengan ListView yang telah ditambahkan pada layout.

Kode untuk mendeklarasikan ListView di Activity adalah

ListView listView;

Setelah kode tersebut ditambahkan pada Activity selanjutnya Android Studio akan menambahkan baris kode

import android.widget.ListView;

secara automatis. Jika tidak, maka tekan alt+enter.

Selanjutnya adalah mengisi variabel listView yang telah dideklarasikan di atas dengan ListView yang telah ditambahkan pada layout. Kode untuk mengisi variabel tersebut adalah:

listView=(ListView)findViewById(R.id.listView);

Keterangan: listView adalah variabel yang dideklarasikan di atas. Sedangkan listView yang dijadikan argument findViewById() adalah id ListView yang ditambahkan pada layout.

Membuat Adapter untuk ListView

ListView tidak bisa diisi secara langsung tanpa menggunakan Adapter. Catatan ini akan menjelaskan cara mengisi ListView dengan adapter sederhana yang telah disediakan oleh Android Studio. Catatan tentang penggunaan custom adapter akan diterbitkan selanjutnya.

Cara membuat adapter adalah sebagai berikut:

  1. Buat variabel dengan tipe ArrayList<String> untuk menyimpan data yang mau ditambahkan kedalam ListView. variabel ini ibarat bank data yang akan dijadikan rujukan utama ListView melalui adapter.
    ArrayList<String> list = new ArrayList<String>();
  2. Membuat adapter menggunakan ArrrayAdapter. adapter ini digunakan untuk mengambil data dari list yang dibuat pada langkah 1 untuk dimasukkan ke dalam ListView. Kode untuk membuat adapter tersebut adalah:
    ArrayAdapter arrayAdapter = new ArrayAdapter(this,android.R.layout.simple_list_item_1, list);

    Keterangan:

    ArrayAdapter membutuhkan 3 argumen. Argumen yang pertama adalah Contect. pada catatan ini diisi dengan this yang berarti Contect utama. Ini bisa dilakukan jika pembuatan adapter dilakukan di dalam method onCreate(). Jika dilakukan diluar itu maka biasa menggunakan Context.this, NamaActivity.this, MainActivity.this dan lain sebagainya tergantung struktur datanya.  Argumen kedua adalah layout. Layout ini digunakan untuk menentukan bagaimana ListView tersebut ditampilkan. Hal hal yang bisa dilakukan pada kustomisasi layout antara lain pengubahan warna text, background, uukuran, dan lain sebagainya. Pada catatan ini digunakan layout bawaan Android Studio yaitu 

    android.R.layout.simple_list_item_1

    . Argumen ketiga adalah sumber data/item. Sumber data ini bisa diambil dari variabel lain, xml, string atau lainnya. Pada catatan ini, sumber data diambil dari variabel ArrayList.

  3. Memasang adapter kedalam ListView. Kode untuk memasang adapter pada ListView adalah sebagai berikut:
    listView.setAdapter(arrayAdapter);
  4. Menambah data pada ArrayList. Variabel list yang dibuat menggunakan ArrayList di atas belum memiliki data. Meskipun sudah dipasangkan ke ListView tidak akan ada data yang ditampilkan. Maka kita perlu menambahkan beberapa data padavariabel tersebut. Caranya adalah sebagai berikut:
            list.add("List Satu");
            list.add("List Dua");
            list.add("List Tiga");
            list.add("List Empat");
            list.add("List Lima");

Kode legkap MainActivity.java adalah sebagai berikut:

package com.nusagates.listview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    ListView listView;
    ArrayList<String> list = new ArrayList<String>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView=(ListView)findViewById(R.id.listView);
        ArrayAdapter arrayAdapter = new ArrayAdapter(this,android.R.layout.simple_list_item_1, list);
        listView.setAdapter(arrayAdapter);
        list.add("List Satu");
        list.add("List Dua");
        list.add("List Tiga");
        list.add("List Empat");
        list.add("List Lima");
    }
}

Hasil eksekusi project tersebut pada emulator Android adalah seperti gambar di bawah ini:

Tampilan ListView di Emulator Android
Tampilan ListView di Emulator Android

Demikian catatan mengenai cara menggunakan ListView di Android Studio. Pembuatan ListView menggunakan custom adapter akan diterbitkan berikutnya.

Ahmad Budairi
Ahmad Budairihttps://bloggersejoli.com/
Seorang Web developer yang suka menulis artikel di blog. Kader Penggerak Nahdlatul Ulama (NU)

Bacaan Menarik Lainnya

3 KOMENTAR

  1. saya membuat hal yg serupa dengan agan, dan sayta mau bertanya gan.
    misalnya dalam listview yg 1 mau dimasukkan banyak data yg berupa jpg/png caranya bagaimana gan?

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Baru Terbit