Belajar Membuat ExpandableListView Sederhana Android

Expandable ListView adalah salah satu container yang termasuk komponen user inteface , pada Aplikasi Android, yang berfungsi untuk mengelompokan dan memuat list/daftar data ,dalam bentuk kategori. Jadi di dalam Expandable ListView ,terdapat dua level atau tingkatan ListView , satu tingkatan level grup , satu lagi tingkatan level child. Setiap grup memiliki childnya masing-masing, contoh yang bisa kita ambil dalam kategori Grup adalah Nama Binatang ,memiliki child yang dapat memuat dan menampilkan data seperti Anjing ,Kucing ,Cicak. Jadi sekali lagi , saat kita menjalankan Aplikasinya pertama kali . Aplikasi akan menampilkan ListView dalam kategori Grup saja ,contohnya seperti Nama Binatang. Nah , untuk menampilkan data yang berisi Nama Binatang ,yaitu child dari grup. Kita bisa membuka datanya dengan cara memilih grup Nama Binatang ,atau bisa disebut Expanded. Jika kita ingin menutup datanya kembali ,kita bisa memilih grup Nama Binatang kembali ,atau bisa disebut Collapsed.

Pada tutorial belajar android kali ini , kita akan Belajar Membuat Expandable ListView Sederhana Android. Adapun, data-data yang akan kita tampilkan ,ke dalam bentuk Expandable ListView , kalian bisa perhatikan pada contoh gambar di bawah:

Contoh data

1. Pertama-tama kalian bisa membuat project baru , atau yang sudah ada di Android Studio.

2. Disini kita akan menggunakan 3 file layout untuk mendescribing data resource , yang bernama activity_main.xml (default) ,grup_item.xml (layout untuk grup) ,child_item.xml (layout untuk child).

Untuk membuat file layout xml baru ,kalian bisa mengikuti cara berikut:

Klik kanan pada folder layout , lalu pilih New
Pilih XML lalu pilih Layout XML file.

Membuat file layout xml baru

Pada bagian jendela Configure Component , kalian bisa menentukan nama file layout xml , pada kolom Layout File Name lalu menentukan Root View seperti LinearLayout ,atau RelativeLayout , pada kolom Root Tag. Setelah itu, jika sudah pilih tombol Finish.

Configure Component

3. Setelah kita membuat file layout baru , kali ini kita akan mencoba menerapkan baris instruksi (codingan) pada file layout xml. Berikut contoh codenya.

activity_main.xml

Seperti yang kalian mungkin sudah tahu , kita juga bisa mendrag secara langsung pada tab Design , lalu tepatnya pada bagian Pallete, Pilih Containers , lalu Pilih ExpandableListView , kemudian drag pada area layar preview perangkat Android.

Design ExpandableListView

grup_item.xml

Disini kita akan menggunakanya sebagai nama-nama dari grup seperti "Nama Binatang" dan "Bahasa Pemrograman" . Kalian bisa mengkustomisasi ,besar ,warna ,ketebalan textnya sendiri.

child_item.xml

Disini juga kita akan menggunakanya, sebagai nama-nama child dari tiap grup seperti "Anjing" ,"Kucing" , "Cicak" dari grup "Nama Binatang" dan "Java" ,"PHP" ,"SQL" dari grup "Bahasa Pemrograman" . Kalian bisa mengkustomisasi ,besar ,warna ,ketebalan textnya sendiri.

4. Selanjutnya kita masuk kepada logic bahasa pemrogramanya , disini kita akan menggunakan file java yang bernama , Grup.java , Child.java (Model Class) , ExpandListAdapter(Adapter) , MainActivity.java (Default).

Untuk membuat file java baru , kalian bisa ikuti langkah berikut:

Klik kanan pada package (contoh : com.okedroid.contohaplikasi)
Lalu pilih New > Pilih Java Class.

Membuat file java baru

Lalu pada jendela Create New Class , kita bisa mengisi file javanya dengan cara mengisi kolom Name. Jika sudah pilih tombol OK.

Create New Class

5. Setelah berhasil membuat file java baru , kali ini kita akan menerapkan codenya pada file java tersebut. Berikut contoh codenya:

Contoh code:

Membuat Model Class Grup.java dan Child.java

Grup.java

Penjelasan :

Disini kita membuat Model Class pertama yaitu Grup.java , yang dimana kita mendefinisikan atribut dengan Getter dan Setter ,dengan tipe data String dan juga salah satu Collection yaitu ArrayList ,yang biasa di gunakan saat kita coding ,di bahasa pemrograman Java .Yang nanti berfungsi untuk membuat objek dan menginput data seperti ,"Nama Binatang" dan "Bahasa Pemrograman" (Baca disini selengkapnya).

Child.java

Penjelasan :

Disini kita membuat Model Class kedua yaitu Child.java, yang dimana kita mendefinisikan atribut dengan Getter dan Setter ,dengan tipe data String. Yang nanti berfungsi untuk membuat objek dan menginput data seperti, "Anjing" ,"Kucing" , "Cicak" dari grup "Nama Binatang" lalu "Java" ,"PHP" ,"SQL" dari grup "Bahasa Pemrograman" .

Membuat class Adapter ExpandListAdapter.java

ExpandListAdapter.java

Penjelasan :

Adapter berfungsi untuk binding data ,memproses dan memformat konten (pull konten) dari resource seperti Collection atau Database ,kemudian di convert setiap item ke dalam tampilan list/daftar.

Nah ,disini kita akan mewarisi (extends) class Abstract yaitu BaseExpandableListAdapter. Yang dimana akan kita instansiasi melalu class ExpandListAdapter . (Baca selengkapnya tentang class Abstract).

Lalu kita mendeklarasi var private Context context; dan private ArrayList<Group> groups;

Selanjutnya kalian bisa membuat Constructor dan method Override , dengan menekan tombol Alt + Insert pada Keyboard di Komputer kalian. Oh ya tak lupa juga ,kalian juga bisa membuat Getter dan Setter disini ,dimana sebelumnya kita telah membuatnya pada Model Class Grup.java dan Child.java .Lalu akan muncul contoh gambar berikut :

Generate

Berikut beberapa daftar method Override yang digunakan pada ExpandListAdapter .java. Untuk membuat ExpandableListView.

public Object getChild(int groupPosition, int childPosition) = Mengambil nilai atau data yang terkait dengan object Child di dalam object Grup. Berdasarkan posisi grup dan child

public long getChildId(int groupPosition, int childPosition) = Mengambil id terkait dengan posisi Child di dalam Grup.

public View getChildView(int groupPosition, int childPosition, boolean isLastChild,
View convertView, ViewGroup parent) =

Mengambil dan mengconvert berdasarkan nilai atau data dari View terkait dengan object Child di dalam object Grup. (Baca selengkapnya tentang LayoutInflater). Jadi dengan method ini kita akan menentukan nilai atau data yang mana akan kita convert dan tampilkan ke dalam layout child_item.xml.

public int getGroupCount() = Mengambil nilai atau value dari jumlah grup

public int getChildrenCount(int groupPosition) = Mengambil jumlah child berdasarkan grup tertentu

public Object getGroup(int groupPosition) = Mengambil data yang terkait object grup

public long getGroupId(int groupPosition) = Mengambil id yang terkait grup

public boolean hasStableIds() =Menunjukan apakah id dari grup dan child stabil terkait perubahan data di dalamnya

public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) =

Sama seperti method getChildView() , disini kita akan mengambil dan mengconvert berdasarkan nilai atau data dari View terkait object Grup. Yang dimana kita akan menentukan nilai atau data yang mana akan kita convert dan tampilkan ke dalam layout grup_item.xml.

public boolean isChildSelectable(int groupPosition, int childPosition) =

Menunjukan apakah posisi child tertentu dapat di selectable

MainActivity.java (Default)

Penjelasan :

Pada file class java utama ini ,kita akan menginput data ,yang akan di tampilkan dalam bentuk ExpandableListView , setelah kita membuat class Model dan Adapternya. Di awali dengan membuat object dari ExpandableListAdapter , ArrayList<Group> ,ExpandableListView.

Diikuti dengan menginisialisasi object dari container ExpandableListView yang berada di activity_main.xml , lalu memberikan nilai pada object groupExpandList berdasarkan method inputData().

Lalu menginstansiasi object dari class Adapter ExpandListAdapter,mensetting nilai berdasarkan object expandableListAdapter dari method di object expandableListView. Lalu method .setOnChildClickListener ,yang dimana ketika di klik akan menampilkan data dari Child yang ada di dalam Grup serta menampilkan pesan text Toast

Method .setOnGroupExpandListener digunakan untuk membuka list data dari Child

Method .setOnGroupCollapseListener digunakan untuk menutup list data dari Child

public ArrayList<Group> inputData() = Digunakan untuk mensetting dan menginput data yang ingin ditampilkan ke dalam bentuk ExpandableListView.

Method public void tampilPesan(String pesan) = Method untuk menampilkan pesan text toast

6. Setelah itu kita jalankan Aplikasinya , di Android Studio.

Hasilnya kira-kira akan seperti ini: