Belajar Menciptakan 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. Makara di dalam Expandable ListView ,terdapat dua level atau tingkatan ListView , satu tingkatan level grup , satu lagi tingkatan level child. Setiap grup mempunyai childnya masing-masing, rujukan yang sanggup kita ambil dalam kategori Grup ialah Nama Binatang ,memiliki child yang sanggup memuat dan menampilkan data menyerupai Anjing ,Kucing ,Cicak. Jadi sekali lagi , ketika 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 sanggup membuka datanya dengan cara menentukan grup Nama Binatang ,atau sanggup disebut Expanded. Jika kita ingin menutup  datanya kembali ,kita sanggup menentukan grup Nama Binatang kembali ,atau sanggup disebut Collapsed.

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

Contoh data 

1. Pertama-tama kalian sanggup menciptakan project gres , atau yang sudah ada di Android Studio.


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


Untuk menciptakan file layout xml gres ,kalian sanggup mengikuti cara berikut:

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

Membuat file layout xml baru

Pada bab jendela Configure Component , kalian sanggup menentukan nama file layout xml , pada kolom Layout File Name lalu menentukan Root View menyerupai LinearLayout ,atau RelativeLayout , pada kolom Root Tag. Setelah itu, jikalau sudah pilih tombol Finish.

Configure Component

3. Setelah kita  membuat file layout gres , kali ini kita akan mencoba menerapkan baris isyarat (codingan) pada file layout xml.  Berikut rujukan codenya.


activity_main.xml

Seperti yang kalian mungkin sudah tahu , kita juga sanggup mendrag secara eksklusif pada tab Design , kemudian tepatnya pada bab Pallete, Pilih Containers , kemudian Pilih ExpandableListView , kemudian drag pada area layar preview perangkat Android.

Design ExpandableListView

grup_item.xml

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

child_item.xml




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


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

Untuk menciptakan file java gres , kalian sanggup 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 sanggup mengisi file javanya dengan cara mengisi kolom Name. Jika sudah pilih tombol OK.

Create New Class

5. Setelah berhasil menciptakan  file java gres , kali ini kita akan menerapkan codenya pada file java tersebut. Berikut rujukan codenya:

Contoh code:

Membuat Model Class Grup.java dan Child.java


Grup.java


Penjelasan :

Disini kita menciptakan 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 ketika kita coding ,di bahasa pemrograman Java .Yang nanti berfungsi untuk menciptakan objek dan menginput data menyerupai ,"Nama Binatang" dan "Bahasa Pemrograman"  (Baca disini selengkapnya).

Child.java


Penjelasan :

Disini kita menciptakan Model Class kedua yaitu Child.java, yang dimana kita  mendefinisikan atribut dengan Getter dan Setter ,dengan tipe data String. Yang nanti berfungsi untuk menciptakan 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 menyerupai 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 wacana class Abstract).

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

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

Generate 

Berikut beberapa daftar method Override yang dipakai 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 menurut nilai atau data dari View terkait dengan object Child  di dalam object Grup. (Baca selengkapnya wacana LayoutInflater). Makara 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 menurut 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 menyerupai method getChildView() , disini kita akan mengambil dan mengconvert menurut 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 sanggup di selectable


MainActivity.java (Default)


Penjelasan :

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

Diikuti dengan menginisialisasi object dari container ExpandableListView yang berada di activity_main.xml , kemudian menunjukkan nilai pada object groupExpandList menurut method inputData().

Lalu menginstansiasi object dari class Adapter ExpandListAdapter,mensetting nilai menurut 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 menyerupai ini:

Contoh Hasil ExpandableListView

Atau kalian sanggup lihat video berikut :

Sumber https://www.okedroid.com/

Share this post