How to Create Expandable ListView in Android || How to add expandable ListView in Android Studio

Android Expandable ListView Tutorial

Hello Friends, Today we will teach you how to add Expandable ListView in Android.

Today we will create simple Expandable ListView and in our next tutorial we will teach you how to create a custom expandable listview.

Expandable list view is used to group list data by categories. It has the capability of expanding and collapsing the groups when user touches header.

If you are not aware of list view before please refer to this tutorial Android ListView Tutorial.

Step 1. Open your activity_main.xml and add ExpandableListView element.

activity_main.xml :-

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ExpandableListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listView"
        android:dividerHeight="1dp"
        android:listSelector="@android:color/holo_blue_light"
        android:childDivider="@android:color/holo_orange_dark"
        android:divider="@android:color/holo_blue_dark"/>

</RelativeLayout>

Step 2. Now we need to create new xml layout for list view group header.This will contain simple TextView element for showing heading of our Expandable listView.

list_header.xml :-

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/list_header"
        android:text="List Header"
        android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
        android:textSize="18sp"/>

</LinearLayout>

Step 3. We need one more xml layout for list view group item. This will contain simple TextView element for showing header item in our Expandable ListView.

list_item.xml :-

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/list_child"
        android:text="List Child" />

</LinearLayout>

Step 4. Now we need to create custom adapter class for list view. Create a new class file called CustomAdapter.java and extend this from BaseExpandableListAdapter. This class provides required methods to render listview.

getGroupView() - Returns view for the list group header
getChildView() - Returns view for list child item

CustomAdapter :-

package com.akshayarora.myapplication;

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;

public class CustomAdapter extends BaseExpandableListAdapter {

    private Context context;
    private List<String> headerData;
    private HashMap<String,List<String>> childData;

    public CustomAdapter(Context context, List<String> headerData, HashMap<String , List<String>> childData){
        this.context = context;
        this.headerData = headerData;
        this.childData = childData;
    }

    @Override
    public Object getChild(int i, int i1) {
        return this.childData.get(this.headerData.get(i)).get(i1);
    }

    @Override
    public long getChildId(int i, int i1) {
        return i1;
    }

    @Override
    public View getChildView(int i, int i1, boolean b, View view, ViewGroup viewGroup) {
        String childTxt = (String)getChild(i,i1);
        if (view == null){
            LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = inflater.inflate(R.layout.list_item,null);
        }
        TextView tvChild = view.findViewById(R.id.list_child);
        tvChild.setText(childTxt);
        return view;
    }

    @Override
    public int getChildrenCount(int i) {
        return this.childData.get(this.headerData.get(i)).size();
    }

    @Override
    public Object getGroup(int i) {
        return this.headerData.get(i);
    }

    @Override
    public int getGroupCount() {
        return this.headerData.size();
    }

    @Override
    public long getGroupId(int i) {
        return i;
    }

    @Override
    public View getGroupView(int i, boolean b, View view, ViewGroup viewGroup) {
        String headerTitle = (String) getGroup(i);
        if (view == null){
            LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = inflater.inflate(R.layout.list_header,null);
        }
        TextView tvHeader = view.findViewById(R.id.list_header);
        tvHeader.setTypeface(null, Typeface.BOLD);
        tvHeader.setText(headerTitle);
        return view;
    }

    @Override
    public boolean hasStableIds() {
        return false;
    }

    @Override
    public boolean isChildSelectable(int i, int i1) {
        return true;
    }
}

Step 5. After complete adapter code, open your MainActivity.java and do the following changes.

MainActivity.java :-

package com.akshayarora.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.graphics.Color;
import android.hardware.Camera;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ExpandableListView;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

public class MainActivity extends AppCompatActivity {

     private ExpandableListView expandableListView;
     private CustomAdapter adapter;
     private List<String> headerData;
     private HashMap<String,List<String>> childData;
     private String[] listTitle = new String[]{"Alcohol","Coffee","Pasta","Cold-Drinks"}; //It's create for showing list title
     private String[] Alcohol = new String[]{"Vodka","Rum","Whiskey","Gin","Tequila"}; //this is showing alcohol header's items
     private String[] Coffee = new String[]{"Espresso","Macchiato","Cappuccino","Cafe Latte","Ristretto"}; //this is showing coffee header's items
     private String[] Pasta = new String[]{"Carbonara","Capellini","Spaghetti","Gnocchi","Lasagnette"}; //this is showing pasta header's items
     private String[] ColdDrinks = {"Cola","Lemonade","Citrus soda","Juice","Sparkling Water"}; //this is showing colddrinks header's items

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        expandableListView = (ExpandableListView) findViewById(R.id.listView);
        headerData = new ArrayList<String>();
        childData = new HashMap<String,List<String>>();

        for (String item : listTitle){
            //this loop fetch header list data from String[] and set is on headerData
            headerData.add(item);
        }

        List<String> al = new ArrayList<>();
        for (String item : Alcohol){
            //this loop fetch alcohol string[] data
            al.add(item);
        }

        List<String> cof = new ArrayList<>();
        for (String item : Coffee){
            //this loop fetch coffee string[] data
            cof.add(item);
        }

        List<String> pas = new ArrayList<>();
        for (String item : Pasta){
            //this loop fetch pasta string[] data
            pas.add(item);
        }

        List<String> cold = new ArrayList<>();
        for (String item : ColdDrinks){
            //this loop fetch cold-drink string[] data
            cold.add(item);
        }

        //now we will add all our list<String> data in our childData
        //we put list<String> data in our childData with headerData
        //headerData will show our childData according to list<String>
        childData.put(headerData.get(0),al);
        childData.put(headerData.get(1),cof);
        childData.put(headerData.get(2),pas);
        childData.put(headerData.get(3),cold);

        adapter = new CustomAdapter(this,headerData,childData);
        expandableListView.setAdapter(adapter);

        expandableListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
            @Override
            public boolean onChildClick(ExpandableListView expandableListView, View view, int i, int i1, long l) {
                Toast.makeText(MainActivity.this, headerData.get(i)+":"+childData.get(headerData.get(i)).get(i1), Toast.LENGTH_SHORT).show();
                return false;
            }
        });

        expandableListView.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() {
            @Override
            public void onGroupExpand(int i) {
                Toast.makeText(MainActivity.this, headerData.get(i)+" Expand", Toast.LENGTH_SHORT).show();
            }
        });

        expandableListView.setOnGroupCollapseListener(new ExpandableListView.OnGroupCollapseListener() {
            @Override
            public void onGroupCollapse(int i) {
                Toast.makeText(MainActivity.this, headerData.get(i)+" collapsed", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Now Run your project and see the output

Output :-

Enjoy !