[Android] ExpandableListView for collapse ListView

[Android] ExpandableListView for collapse ListView

Although we can see ExpandableListView be implemented in many apps, this is my first time to implement this widget in my app.

ExpandableListView

ExpandableListView differs from the ListView by allowing two levels: groups which can individually be expanded to show its children. The items come from the ExpandableListAdapter associated with this view.


You can follow below codes to implement ExpandableListView.

First, create “main.xml”, “group.xml”, and “child.xml”:

main.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="fill_parent">

    <ExpandableListView android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/mExpandableListView"/>
</LinearLayout>

child.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation = "horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <TextView
        android:id = "@+id/group_tv"
        android:layout_width = "match_parent"
        android:layout_height = "match_parent"
        android:paddingLeft = "60px"
        android:paddingTop = "10px"
        android:paddingBottom = "10px"
        android:textSize = "26sp"/>
</LinearLayout>

group.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation = "horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_gravity = "center_vertical"
        android:id = "@+id/child_iv"
        android:layout_width = "70px"
        android:layout_height = "70px"
        android:paddingLeft = "30px"
        android:paddingTop = "2px"
        android:paddingBottom = "5px"
        android:src = "@drawable/icon"/>

    <TextView
        android:layout_gravity = "center_vertical"
        android:id = "@+id/child_tv"
        android:layout_width = "fill_parent"
        android:layout_height = "fill_parent"
        android:paddingLeft = "22px"
        android:paddingTop = "10px"
        android:paddingBottom = "5px"
        android:textSize = "30sp"/>
</LinearLayout>

Second, create a class extends to Activity:

public class TestExpandableListView extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ExpandableListView  myListView = (ExpandableListView) findViewById(R.id. mExpandableListView);
        List<HashMap<String, String>> groupList = new ArrayList<>();

        Map<String, String> group1 = new HashMap<>();
        group1.put("group", "TEST");
        Map<String, String> group2 = new HashMap<>();
        group2.put("group","TES2");
        Map<String, String> group3 = new HashMap<>();
        group3.put("group","Others");

        Map<String, String> child1Data1 = new HashMap<>();
        childData1.put("child", "childData1");
        Map<String, String> child1Data2 = new HashMap<>();
        childData2.put("child", "childData2");
        Map<String, String> child1Data3 = new HashMap<>();
        childData3.put("child", "childData3");

        List<Map<String, String>> childList1 = new ArrayList<>();
        childList1.add(child1Data1);
        childList1.add(child1Data2);
        childList1.add(child1Data3);
        Map<String, String> child2Data1 = new HashMap<>();
        childData1.put("child", "childData1");
        Map<String, String> child2Data2 = new HashMap<>();
        childData2.put("child", "childData2");
        Map<String, String> child2Data3 = new HashMap<>();
        childData3.put("child", "childData3");

        List<Map<String, String> childList2 = new ArrayList<>();
        childList2.add(child2Data1);
        childList2.add(child2Data2);
        childList2.add(child2Data3);

        List<List<Map<String, String>>> childGroupList = new ArrayList<>();
        childGroupList.add(childList1);
        childGroupList.add(childList2);

        ExpandableAdapter viewAdapter = new ExpandableAdapter(this, groupList, childGroupList);
        myListView.setAdapter(viewAdapter);
    }

    public class ExpandableAdapter extends BaseExpandableListAdapter {
        private Context context;
        List<Map<String, String>> groups;
        List<List<Map<String, String>>> children;

        public ExpandableAdapter(Context context, List<Map<String, String>> groups, List<List<Map<String, String>>> childs) {
            this.groups = groups;
            this.children = children;
            this.context = context;
        }
        public Object getChild(int groupPosition, int childPosition) {
            return children.get(groupPosition).get(childPosition);
        }
        public long getChildId(int groupPosition, int childPosition) {
            return childPosition;
        }
        public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
            @SuppressWarnings("unchecked")
            String text = ((Map<String, String>) getChild(groupPosition, childPosition)).get("child");
            LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            LinearLayout linearLayout = (LinearLayout) layoutInflater.inflate(R.layout.child, null);
            TextView tv = (TextView) linearLayout.findViewById(R.id.child_tv);
            tv.setText(text);
            return linearLayout;
        }
        public int getChildrenCount(int groupPosition) {
            return children.get(groupPosition).size();
        }
        public Object getGroup(int groupPosition) {
            return groups.get(groupPosition);
        }
        public int getGroupCount() {
            return groups.size();
        }

        public long getGroupId(int groupPosition) {
            return groupPosition;
        }

        public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
            String text = groups.get(groupPosition).get("group");
            LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            LinearLayout linearLayout = (LinearLayout) layoutInflater.inflate(R.layout.group, null);
            TextView textView = (TextView) linearLayout.findViewById(R.id.group_tv);
            textView.setText(text);
            return linearLayout;
        }
        public boolean hasStableIds() {
            return false;
        }
        public boolean isChildSelectable(int groupPosition, int childPosition) {
            return false;
        }
    }
}
(Visited 107 time, 1 visit today)
Facebooktwittergoogle_plusredditpinterestlinkedinmail

One thought on “[Android] ExpandableListView for collapse ListView

Comments are closed.

Comments are closed.