Android Modul 2 - Custom ListView
Android Modul 2 - Custom ListView
Fajar M Sukmawijaya
MODUL 2
CUSTOM LISTVIEW
ListView adalah user interface pada Android yang menampilkan item-item dari sekumpulan daftar
yang tersusun berbaris ke bawah atau ke samping dengan tampilan yang dapat scroll. Setiap item akan
otomatis dimasukkan kedalam list menggunakan Adapter yang datanya di ambil dari suatu Array atau
List atau Query Database yang dijadikan data model sebagai item dari ListView. ListView sering
digunakan dalam aplikasi Android, seperti kontak, email, twitter, dsb.
Pada modul ini, akan dijelaskan mengenai cara pembuatan ListView di Android.
1. Buatlah Project Baru di Android Studio/ Eclipse, dengan ketentuan sebagai berikut:
- Pada bagian Activity, pilih EmptyActivity atau BlankActivity.
- Gunakan minimal API 16: Android 4.1 (Jelly Bean)
2. Buka activity_main.xml lalu ubah kode xml menjadi seperti berikut ini:
1
Android Basic | Modul 2 – Custom ListView
Fajar M Sukmawijaya
3. Pada modul ini, ListView akan menampilkan data siswa dengan isian berupa foto (ImageView),
nama (TextView), dan kelas (TextView). Untuk itu dibutuhkan layout baru untuk membuat
tampilan item ListView tersebut. Buatlah layout baru dengan cara klik kanan pada layout > New
> Layout resource file. Isikan nama layout dengan nama item_siswa.xml.
2
Android Basic | Modul 2 – Custom ListView
Fajar M Sukmawijaya
item_list.xml digunakan untuk menampilkan item ListView yang terdiri dari ImageView untuk
menampilkan foto, dan 2 TextView untuk menampilkan nama dan kelas.
5. Buatlah sebuah Class baru dengan nama DataSiswa.java, klik kanan pada nama package project
> New > Java Class. Lalu isi nama Class dengan nama DataSiswa.java
3
Android Basic | Modul 2 – Custom ListView
Fajar M Sukmawijaya
DataSiswa.java digunakan untuk mengolah data siswa, pada Class ini terdapat method getter
dan setter. Method getter adalah method yang tugasnya untuk mengambil data, sedangkan
method setter adalah method yang tugasnya untuk mengisi data ke dalam objek. Pada class ini
masukkan data apa saja yang dibutuhkan untuk ditampilkan ke dalam ListView, karena disini
listview membutuhkan 3 data, maka tambahkan variable nama, kelas, dan foto.
7. Buatlah sebuah Class baru dengan nama AdapterSiswa.java, klik kanan pada nama package
project > New > Java Class. Lalu isi nama Class dengan nama AdapterSiswa.java
4
Android Basic | Modul 2 – Custom ListView
Fajar M Sukmawijaya
5
Android Basic | Modul 2 – Custom ListView
Fajar M Sukmawijaya
10. Pastikan tidak ada error, running program ke emulator atau device.
11. Buat sebuah Activity baru dengan cara klik kanan di nama package > New > Activity > Empty
Activity. Isi nama Activity dengan DetailActivity.java
6
Android Basic | Modul 2 – Custom ListView
Fajar M Sukmawijaya
7
Android Basic | Modul 2 – Custom ListView
Fajar M Sukmawijaya
Perintah diatas merupakan event ketika salah satu Item di ListView di klik (OnItemClick), yang
akan membuka activity detail dengan mengirim data nama, kelas, dan foto berdasarkan item
yang dipilih user.
15. Pastikan tidak ada error, lalu running aplikasi.
8
Android Basic | Modul 2 – Custom ListView
Fajar M Sukmawijaya
TUGAS MODUL 2
MEMBUAT CUSTOM LISTVIEW