-->

Tutorial Android Expandable List View

Expandable Listview digunakan untuk daftar kelompok data dengan kategori. Ia digunakan untuk memperluas dan kelompok ketika pengguna menyentuh header.

Jika Anda belum belajar tentang Listview, maka pelajarilah Listview terlebih dahulu lihat tutorial ini Android Listview Tutorial.

Mari kita mulai dengan membuat project yang baru ..

Contoh Membuat Project Android

1. Pada Android Studio, buatlah project baru.
     => Jika Anda tidak memiliki sebuah project, di layar Welcome klik New Project.
     => Jika Anda telah membuka project, dari menu File, pilih New Project.

    2. Pada Configure your new project, isi kolom berikut seperti di bawah ini.
     => Application name ⇒ ExpandableListView
     => Company domain ⇒ example.com (Misalnya: com.tahukoding.ExpandableListView)
     => Project Location ⇒ memilih lokasi untuk project Anda.

    3. Pada Select the form factors your app will run oncentang untuk Phone and Tablet.
     => Untuk Minimum SDK, pilih API 14: Android 4.0 (IveCreamSandwich). klik Next. 

    4. Pada Add an activity to Mobile, pilih Blank Activity dan klik Next.
    Next ->

    5. Klik tombol Finish untuk membuat project.
    6. Pilih View Anda sebagai Project, Buka file layout untuk kegiatan utama (activity_main.xml) terletak di bawah 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:id="@+id/activity_main"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:background = "#abc"
        android:orientation="vertical"
        tools:context="expandablelistview.tahukoding.com.expandablelistview.MainActivity">
    
        <ExpandableListView
            android:id="@+id/ExpLV"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    
    </LinearLayout>

    7. Membuat xml lain pada layout untuk header daftar grup. Saya membuat file xml bernama (list_group) dan disisipkan kode berikut.

    list_group.xml
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:background="#bca">
    
        <TextView
            android:id="@+id/ListHeader"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
            android:textSize="17dp"
            android:textColor="#f9f93d"/>
    
    </LinearLayout>

    8. Buatlah satu lagi xml file bernama (list_item.xml) untuk daftar anak :D . Ini akan berisi elemen TextView sederhana.

    list_item.xml
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="55dip">
    
        <TextView
            android:id="@+id/ListItem"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textSize="17dip"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:paddingLeft="?android:expandableListPreferredItemPaddingLeft"/>
    
    </LinearLayout>

    9. Saya menggunakan kelas adaptor khusus untuk membuat tampilan daftar. Buat file kelas baru dengan nama ExpandableListAdapter.java

    ExpandableListAdapter.java
    package expandablelistview.tahukoding.com.expandablelistview;
    
    import android.content.Context;
    import android.graphics.Typeface;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseExpandableListAdapter;
    import android.widget.TextView;
    
    import java.util.HashMap;
    import java.util.List;
    
    /**
     * Created by ASUS on 12/23/2016.
     */
    
    public class ExpandableListAdapter extends BaseExpandableListAdapter {
    
        private Context _context;
        private List<String> _listDataHeader;
        private HashMap<String, List<String>> _listdataChild;
    
        public ExpandableListAdapter (Context context, List<String> listDataHeader,
                                      HashMap<String, List<String>> listChildData) {
            this._context = context;
            this._listDataHeader = listDataHeader;
            this._listdataChild = listChildData;
        }
    
        @Override
        public Object getChild(int groupPosition, int childPosition) {
            return this._listdataChild.get(this._listDataHeader.get(groupPosition))
                    .get(childPosition);
        }
    
        @Override
        public long getChildId(int groupPosition, int childPosition) {
            return childPosition;
        }
    
        @Override
        public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
    
            final String childText = (String) getChild(groupPosition, childPosition);
    
            if (convertView == null) {
                LayoutInflater inflater = (LayoutInflater) this._context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                convertView = inflater.inflate(R.layout.list_item, null);
            }
    
            TextView tvListChild = (TextView) convertView.findViewById(R.id.ListItem);
            tvListChild.setText(childText);
            return convertView;
    
        }
    
        @Override
        public int getChildrenCount(int groupPosition) {
            return this._listdataChild.get(this._listDataHeader.get(groupPosition)).size();
        }
    
        @Override
        public Object getGroup(int groupPosition) {
            return this._listDataHeader.get(groupPosition);
        }
    
        @Override
        public int getGroupCount() {
            return this._listDataHeader.size();
        }
    
        @Override
        public long getGroupId(int groupPosition) {
            return groupPosition;
        }
    
        @Override
        public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
    
            String headerTitle = (String) getGroup(groupPosition);
            if (convertView == null) {
                LayoutInflater inflater = (LayoutInflater) this._context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                convertView = inflater.inflate(R.layout.list_group, null);
            }
    
            TextView ListHeader = (TextView) convertView.findViewById(R.id.ListHeader);
            ListHeader.setTypeface(null, Typeface.BOLD);
            ListHeader.setText(headerTitle);
    
            return convertView;
    
        }
    
        @Override
        public boolean hasStableIds() {
            return false;
        }
    
        @Override
        public boolean isChildSelectable(int groupPosition, int childPosition) {
            return false;
        }
    
    }

    10. Setelah Anda selesai dengan adapter, bukalah MainActivity.java.

    MainActivity.java
    package expandablelistview.tahukoding.com.expandablelistview;
    
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.ExpandableListView;
    import android.widget.Toast;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    
    public class MainActivity extends AppCompatActivity {
    
        ExpandableListAdapter listAdapter;
        ExpandableListView expListView;
        List<String> listDataHeader;
        HashMap<String, List<String>> listDataChild;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            expListView = (ExpandableListView) findViewById(R.id.ExpLV);
    
            prepareListData();
    
            listAdapter = new ExpandableListAdapter(this, listDataHeader, listDataChild);
    
            expListView.setAdapter(listAdapter);
    
    
            expListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
    
                @Override
                public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
                    return false;
                }
            });
    
            expListView.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() {
    
                @Override
                public void onGroupExpand(int groupPosition) {
                    Toast.makeText(getApplicationContext(),
                            listDataHeader.get(groupPosition) + " Expanded",
                            Toast.LENGTH_SHORT).show();
                }
            });
    
            expListView.setOnGroupCollapseListener(new ExpandableListView.OnGroupCollapseListener() {
    
                @Override
                public void onGroupCollapse(int groupPosition) {
                    Toast.makeText(getApplicationContext(),
                            listDataHeader.get(groupPosition) + " Collapsed",
                            Toast.LENGTH_SHORT).show();
    
                }
            });
    
            expListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
    
                @Override
                public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
                    Toast.makeText(
                            getApplicationContext(),
                            listDataHeader.get(groupPosition)
                                    + " : "
                                    + listDataChild.get(
                                    listDataHeader.get(groupPosition)).get(
                                    childPosition), Toast.LENGTH_SHORT)
                            .show();
                    return false;
                }
            });
        }
    
        private void prepareListData() {
            listDataHeader = new ArrayList<String>();
            listDataChild = new HashMap<String, List<String>>();
    
            listDataHeader.add("Design");
            listDataHeader.add("Programming");
            listDataHeader.add("Office");
    
            List<String> Design = new ArrayList<String>();
            Design.add("Photoshop");
            Design.add("Illustrator");
            Design.add("Corel Draw");
            Design.add("Flash");
    
            List<String> Programming = new ArrayList<String>();
            Programming.add("Java");
            Programming.add("Php");
            Programming.add("C");
            Programming.add("Visual Basic");
            Programming.add("C#");
            Programming.add("C++");
    
            List<String> Office = new ArrayList<String>();
            Office.add("Word");
            Office.add("Excel");
            Office.add("Power Point");
            Office.add("Acces");
    
            listDataChild.put(listDataHeader.get(0), Design);
            listDataChild.put(listDataHeader.get(1), Programming);
            listDataChild.put(listDataHeader.get(2), Office);
    
        }
    
    }

    Coba jalankan project Anda, maka hasilnya sebagai berikut. 


    [full-width]

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel