How to create Custom ExpandableListView using BaseExpandableListAdapter || BaseExpandableListAdapter Example

Custom Expandable ListView Example in Android

Hello Friends, Today we will teach you how to add custom expandable listview in android.

Follow the steps

Step 1. :- open your project and add ExpandableListView element in your xml file 

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 2 xml layout file for our ExpandableListView. One for List header and second one for List item

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="horizontal"
    android:layout_margin="5dp"
    android:background="@android:color/darker_gray">

    <ImageView
        android:layout_width="110dp"
        android:layout_height="80dp"
        android:src="@drawable/ic_launcher_background"
        android:id="@+id/list_header_picture"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
        android:layout_marginLeft="5dp"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/list_header_name"
        android:text="List Header"
        android:textStyle="bold"
        android:layout_marginTop="5dp"
        android:padding="10dp"
        android:textColor="@android:color/white"
        android:textSize="18sp"/>

</LinearLayout>

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="horizontal"
    android:padding="5dp"
    android:background="@android:color/holo_orange_light">

    <ImageView
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:padding="5dp"
        android:src="@drawable/ic_launcher_background"
        android:id="@+id/list_item_picture"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/list_item_name"
        android:textColor="@android:color/white"
        android:textStyle="bold"
        android:textSize="16sp"
        android:padding="8dp"
        android:layout_marginTop="5dp"
        android:text="List Child" />

</LinearLayout>

Step 3. :- Now Create a Model class for List Header

Continent.java :-

package com.akshayarora.myapplication;

import androidx.annotation.NonNull;

import java.util.ArrayList;

public class Continent {
    private String name;
    private ArrayList<Country> countries;
    private int flag;

    public Continent(String name, ArrayList<Country> countries, int flag) {
        this.name = name;
        this.countries = countries;
        this.flag = flag;
    }

    @NonNull
    @Override
    public String toString() {
        return name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public ArrayList<Country> getCountries() {
        return countries;
    }

    public void setCountries(ArrayList<Country> countries) {
        this.countries = countries;
    }

    public int getFlag() {
        return flag;
    }

    public void setFlag(int flag) {
        this.flag = flag;
    }
}

Step 4. :- Now we need to create one more Model class of Expandable List View item.

Country.java :-

package com.akshayarora.myapplication;

import androidx.annotation.NonNull;

public class Country {
    private String name;
    private int id;
    private int flag;

    public Country(String name, int id, int flag) {
        this.name = name;
        this.id = id;
        this.flag = flag;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    @NonNull
    @Override
    public String toString() {
        return name;
    }

    public int getFlag() {
        return flag;
    }

    public void setFlag(int flag) {
        this.flag = flag;
    }
}

Step 5. :- Now Create Custom Adapter and extends BaseExpandableListAdapter for our Expandable Lis t View.

CustomAdapter.java :-

package com.akshayarora.myapplication;

import android.content.Context;
import android.database.DataSetObserver;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ExpandableListAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

public class CustomAdapter extends BaseExpandableListAdapter  {

    private Context context;
    private ArrayList<Continent> continents;
    private ArrayList<Continent> continentsList;

    public CustomAdapter(Context context, ArrayList<Continent> data) {
        this.context = context;
        this.continents = new ArrayList<Continent>();
        this.continents.addAll(data);

        this.continentsList = new ArrayList<Continent>();
        this.continentsList.addAll(data);
    }

    @Override
    public void registerDataSetObserver(DataSetObserver dataSetObserver) {

    }

    @Override
    public void unregisterDataSetObserver(DataSetObserver dataSetObserver) {

    }

    @Override
    public void onGroupExpanded(int i) {

    }

    @Override
    public void onGroupCollapsed(int i) {

    }

    @Override
    public boolean isEmpty() {
        if (continentsList.size() == 0){
            return true;
        }else {
            return false;
        }
    }

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

    @Override
    public int getChildrenCount(int i) {
        return continentsList.get(i).getCountries().size();
    }

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

    @Override
    public Object getChild(int i, int i1) {
        return continentsList.get(i).getCountries().get(i1);
    }

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

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

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

    @Override
    public View getGroupView(int i, boolean b, View view, ViewGroup viewGroup) {
        Continent country = continentsList.get(i);
        if (view == null){
            view = LayoutInflater.from(context).inflate(R.layout.list_header,viewGroup,false);
        }
        TextView tvChild = view.findViewById(R.id.list_header_name);
        ImageView imageView = (ImageView)view.findViewById(R.id.list_header_picture);
        imageView.setImageResource(country.getFlag());
        tvChild.setText(country.getName());
        return view;
    }

    @Override
    public View getChildView(int i, int i1, boolean b, View view, ViewGroup viewGroup) {
      Country states = continentsList.get(i).getCountries().get(i1);
      if (view == null){
          view = LayoutInflater.from(context).inflate(R.layout.list_item,viewGroup,false);
      }
      TextView txtStateName = (TextView)view.findViewById(R.id.list_item_name);
      ImageView imageView = (ImageView)view.findViewById(R.id.list_item_picture);
      imageView.setImageResource(states.getFlag());

      txtStateName.setText(states.getName());
      return view;
    }

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

    @Override
    public boolean areAllItemsEnabled() {
        return true;
    }

    @Override
    public long getCombinedGroupId(long l) {
        return l;
    }

    @Override
    public long getCombinedChildId(long l, long l1) {
        return l1;
    }
}

Step 6. :- Now open MainActivity.java file and make some changes in our MainActivity.java file.

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 ArrayList<Continent> continents;

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

        expandableListView = (ExpandableListView) findViewById(R.id.listView);
        continents = new ArrayList<>();
        continents = ContinentData(continents);
        adapter = new CustomAdapter(this,continents);
        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, ""+adapter.getChild(i,i1), Toast.LENGTH_SHORT).show();
                return false;
            }
        });
        expandableListView.setOnGroupCollapseListener(new ExpandableListView.OnGroupCollapseListener() {
            @Override
            public void onGroupCollapse(int i) {
                Toast.makeText(MainActivity.this, "Collapse "+adapter.getGroup(i), Toast.LENGTH_SHORT).show();
            }
        });
        expandableListView.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() {
            @Override
            public void onGroupExpand(int i) {
                Toast.makeText(MainActivity.this, "Expand "+adapter.getGroup(i), Toast.LENGTH_SHORT).show();
            }
        });
    }
    private ArrayList<Continent> ContinentData(ArrayList<Continent> continents){
        Continent asiaContinent = new Continent("Asia",null,R.drawable.asia);
        ArrayList<Country> countries = new ArrayList<>();
        countries.add(new Country("India",1,R.drawable.india));
        countries.add(new Country("Pakisthan",2,R.drawable.pakisthan));
        countries.add(new Country("Thailand",3,R.drawable.thailand));
        countries.add(new Country("China",4,R.drawable.china));
        asiaContinent.setCountries(countries);
        continents.add(asiaContinent);

        Continent europeContinent = new Continent("Europe",null,R.drawable.eruope);
        ArrayList<Country> europeCountries = new ArrayList<>();
        europeCountries.add(new Country("United kingdom",5,R.drawable.uk));
        europeCountries.add(new Country("France",6,R.drawable.francef));
        europeCountries.add(new Country("Germany",7,R.drawable.germany));
        europeCountries.add(new Country("Iceland",8,R.drawable.iceland));
        europeContinent.setCountries(europeCountries);
        continents.add(europeContinent);

        Continent africaContinent = new Continent("Africa",null,R.drawable.africa);
        ArrayList<Country> africanCountry = new ArrayList<>();
        africanCountry.add(new Country("South Africa",9,R.drawable.southafrica));
        africanCountry.add(new Country("Ethiopia",10,R.drawable.ethiopia));
        africanCountry.add(new Country("Kenya",11,R.drawable.kenya));
        africanCountry.add(new Country("Nigeria",12,R.drawable.nigeria));
        africaContinent.setCountries(africanCountry);
        continents.add(africaContinent);

        return continents;
    }
}

Now Run the project and see the output

Output :-

Enjoy !