Android Expandable List View Example

Posted by

Hello everyone and welcome to easytechsolutions.info , So in today’s post we are going to learn about how can we implement Expandable List View in Android app.

So let’s get started without further due below are the steps you need to follow:-

Step 1:- Open up your Android Studio and make a new project and select Empty Activity.

Step 2:- To implement Expandable List View we need to  make 3 layout inside our res folder.

activity_main.xml ( copy and paste below code ):-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.expandablelistexample.MainActivity">

    <ExpandableListView
        android:id="@+id/lvExp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </ExpandableListView>

</LinearLayout>

So in above steps we included Expandable List View in our layout .

list_item.xml (copy and paste below code):-

<?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="55dip"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/lblListItem"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="17dip"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:paddingLeft="?android:attr/expandableListPreferredChildPaddingLeft" />

</LinearLayout>

In above xml file we included layout view for our each child items.

list_group.xml (copy and paste below code ):-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="8dp"
    android:background="#f90202">


    <TextView
        android:id="@+id/lblListHeader"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
        android:textSize="17dp"
        android:textColor="#f9f93d" />

</LinearLayout>

Now we are done with the layout part Now its time to add Activity files in order to implement functionality:-

Step 3:- Open MainActivity.java and copy paste below code in it:-

MainActivity.java

package com.expandablelistexample;

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;

import static android.icu.lang.UCharacter.GraphemeClusterBreak.T;

public class MainActivity extends AppCompatActivity {

    //Defining Variables to use:-
    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);

        // Getting ListView By FindViewById:-
        expListView = (ExpandableListView) findViewById(R.id.lvExp);

        // Method call which define below in this activity:-
        prepareListData();

        //Making Adapter instance and passing 3 params in it(Context, List , HashMAp):-
        listAdapter = new ExpandableListAdapter(this, listDataHeader, listDataChild);

        // Setting List Adapter to Expandable ListView:-
        expListView.setAdapter(listAdapter);

        //Setting OnChildClick Listener in Expandable ListView:-
        expListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
            @Override
            public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
//               int h=groupPosition;
//                int ch=childPosition;

//                Toast.makeText(MainActivity.this, "Clicked header @"+h+"and child @"+ch+, Toast.LENGTH_SHORT).show();

                if (groupPosition == 0) {
                    if (childPosition == 0) {
                        Toast.makeText(MainActivity.this, "First Item is Clicked", Toast.LENGTH_SHORT).show();
                    } else if (childPosition == 1) {
                        Toast.makeText(MainActivity.this, "Second Item is Clicked", Toast.LENGTH_SHORT).show();
                    } else if (childPosition == 2) {
                        Toast.makeText(MainActivity.this, "Third Item is Clicked", Toast.LENGTH_SHORT).show();
                    } else if (childPosition == 3) {
                        Toast.makeText(MainActivity.this, "Fourth Item is Clicked", Toast.LENGTH_SHORT).show();
                    } else if (childPosition == 4){
                        Toast.makeText(MainActivity.this, "Fifth Item is Clicked", Toast.LENGTH_SHORT).show();
                    } else if (childPosition == 5){
                        Toast.makeText(MainActivity.this, "Sixth Item is Clicked", Toast.LENGTH_SHORT).show();
                    } else if (childPosition == 6){
                        Toast.makeText(MainActivity.this, "Seventh Item is Clicked", Toast.LENGTH_SHORT).show();
                    }
                }

               if (groupPosition == 1){
                    if (childPosition == 0){
                        Toast.makeText(MainActivity.this, "Group Second Item one Clicked", Toast.LENGTH_SHORT).show();
                    } else if (childPosition == 1){
                        Toast.makeText(MainActivity.this, "Group Second Item second Clicked", Toast.LENGTH_SHORT).show();
                    } else if (childPosition == 2){
                        Toast.makeText(MainActivity.this, "Group Second Item third Clicked", Toast.LENGTH_SHORT).show();
                    } else if (childPosition == 3){
                        Toast.makeText(MainActivity.this, "Group Second Item fourth Clicked", Toast.LENGTH_SHORT).show();
                    } else if (childPosition == 4){
                        Toast.makeText(MainActivity.this, "Group Second Item fifth Clicked", Toast.LENGTH_SHORT).show();
                    } else if (childPosition == 5){
                        Toast.makeText(MainActivity.this, "Group Second Item Sixth Clicked", Toast.LENGTH_SHORT).show();
                    }
                }

                if (groupPosition == 2){
                    if (childPosition == 0){
                        Toast.makeText(MainActivity.this, "Group Three Item one Clicked", Toast.LENGTH_SHORT).show();
                    } else if (childPosition == 1){
                        Toast.makeText(MainActivity.this, "Group Three Item Two Clicked", Toast.LENGTH_SHORT).show();
                    } else if (childPosition == 2){
                        Toast.makeText(MainActivity.this, "Group Three Item Three Clicked", Toast.LENGTH_SHORT).show();
                    } else if (childPosition == 3){
                        Toast.makeText(MainActivity.this, "Group Three Item Fourth Clicked", Toast.LENGTH_SHORT).show();
                    } else if (childPosition == 4){
                        Toast.makeText(MainActivity.this, "Group Three Item Fifth Clicked", Toast.LENGTH_SHORT).show();
                    }
                }
                return false;
            }
        });
    }

    /*
     * Making a prepareListData Method to call it in OnCreate method:-
     */
    private void prepareListData() {
        listDataHeader = new ArrayList<String>();
        listDataChild = new HashMap<String, List<String>>();

        // Adding child data Heading:-
        listDataHeader.add("Top 250");
        listDataHeader.add("Now Showing");
        listDataHeader.add("Coming Soon..");

        // Adding child inner data in category Top 250:-
        List<String> top250 = new ArrayList<String>();
        top250.add("The Shawshank Redemption");
        top250.add("The Godfather");
        top250.add("The Godfather: Part II");
        top250.add("Pulp Fiction");
        top250.add("The Good, the Bad and the Ugly");
        top250.add("The Dark Knight");
        top250.add("12 Angry Men");

        //Adding child inner data in category Now Showing:-
        List<String> nowShowing = new ArrayList<String>();
        nowShowing.add("The Conjuring");
        nowShowing.add("Despicable Me 2");
        nowShowing.add("Turbo");
        nowShowing.add("Grown Ups 2");
        nowShowing.add("Red 2");
        nowShowing.add("The Wolverine");

        //Adding child inner data in category Coming Soon:-
        List<String> comingSoon = new ArrayList<String>();
        comingSoon.add("2 Guns");
        comingSoon.add("The Smurfs 2");
        comingSoon.add("The Spectacular Now");
        comingSoon.add("The Canyons");
        comingSoon.add("Europa Report");

        //Linking all child inner data with heading child through arraylist position:-
        listDataChild.put(listDataHeader.get(0), top250); // Header, Child data
        listDataChild.put(listDataHeader.get(1), nowShowing);
        listDataChild.put(listDataHeader.get(2), comingSoon);
    }
}

Step 4:- Now make a Adapter class inside package folder and copy paste below code in it:-

ExpandableListAdapter.java

package com.expandablelistexample;

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 AJAY THAKUR on 9/15/2017.
 */

public class ExpandableListAdapter extends BaseExpandableListAdapter {

    private Context _context;
    private List<String> _listDataHeader; // header titles
    // child data in format of header title, child title
    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 childPosititon) {
        return this._listDataChild.get(this._listDataHeader.get(groupPosition))
                .get(childPosititon);
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

    @Override
    public View getChildView(int groupPosition, final int childPosition,
                             boolean isLastChild, View convertView, ViewGroup parent) {

        final String childText = (String) getChild(groupPosition, childPosition);

        if (convertView == null) {
            LayoutInflater infalInflater = (LayoutInflater) this._context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = infalInflater.inflate(R.layout.list_item, null);
        }

        TextView txtListChild = (TextView) convertView
                .findViewById(R.id.lblListItem);

        txtListChild.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 infalInflater = (LayoutInflater) this._context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = infalInflater.inflate(R.layout.list_group, null);
        }

        TextView lblListHeader = (TextView) convertView
                .findViewById(R.id.lblListHeader);
        lblListHeader.setTypeface(null, Typeface.BOLD);
        lblListHeader.setText(headerTitle);

        return convertView;
    }

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

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }
}

Now we are done with coding part just save all and run you will get to see a nice Expandable List View implementation inside your Android App.

That’s it for now hope you grab some useful information regarding the implementation of Expandable List View.

Leave a Reply

Your email address will not be published. Required fields are marked *