Expandable ListView with Example in Android

Introduction:

Expandable ListView is a widget of Android “android.widget.ExpandableListView”.

It is different from simple ListView because here in this feature it shows the two levels of a list, which is easily expanded and collapsed.

ExpandableListView is a form of group and the child items. When I click on any group it is expanded and show the child items again click on group it will collapsed, we can also do different actions on child items to make it custom.

It uses the same feature of simple ListView i.e scrollable by default.

To Know about the ExpadableListView in brief, Let’s see How we can do it :

Methods & Classes :

Methods:

getGroupView() : This method is used to show the view of a group.

getChildView() : This method is used to show the view of a child item.

Classes:

In this Example it uses 3 classes:

MainActivity: It shows the Layout of ExpandableListView.

ExpandableListData : It shows your list data and by using HashMap we can map the child item data with their respective groups.

ExpandableListAdapter : It gives us the Mainactivity with the data i.e comes from ExpandableListData class.

To create the ExpandableListView we have to implement some interfaces also i.e :

• ExpandableListView.OnChildClickListener : onChildClick(…) method is invoked when we click on child item.
• ExpandableListView.OnGroupClickListener : onGroupClick(…) method is invoked when we click on any group.
• ExpandableListView.OnGroupCollapseListener : onGroupCollapse(…) method is invoked to notify that the group is collapsed.
• ExpandableListView.OnGroupExpandListener : onGroupExpand (…) method is invoked to notify that the group is expanded.

 

Example with Code:

In this example, we will learn how to implement ExpandableListView in Android.

STEPS:

1. Create a new application (File > New > Android Application Project). And name it ExpandableListViewAndroid.

2. To create ExpandableListView we need 3 xml layout files.

XML Layout files:

1. activity_main.xml

It contains ExpandableListView .

<ExpandableListView

android:id=“@+id/expandableListView”

android:layout_height=“match_parent”

android:layout_width=“match_parent”

android:indicatorLeft=“?android:attr/

expandableListPreferredItemIndicatorLeft”

android:divider=“#A4C739”

android:dividerHeight=“0.5dp” />

2. group.xml

It contains a TextView to display the title of group header.

<TextView

android:id=“@+id/listTitle”

android:layout_width=“fill_parent”

android:layout_height=“wrap_content”

android:paddingBottom=“10dp”

android:paddingLeft=“?android:attr/

expandableListPreferredItemPaddingLeft”

android:paddingTop=“10dp

android:textColor=“#A4C739” />

3. child.xml

It also contains a TextView to display the content of child items.

<TextView

android:id=“@+id/expandedListItem”

android:layout_width=“fill_parent”

android:layout_height=“wrap_content”

android:paddingBottom=“10dp”

android:paddingLeft=“?android:attr

/expandableListPreferredChildPaddingLeft”

android:paddingTop=“10dp” />

We have to create a custom adapter class i.e

ExpandableListAdapter.java

To show the view we have to extends BaseExpandableListAdapter and override its all methods.

Add the code in getChildView() and getGroupView():

@Override

public View getChildView(int listPosition, final int expandedListPosition,

boolean isLastChild, View convertView, ViewGroup parent) {

final String expandedListText = (String) getChild(listPosition, expandedListPosition);

if (convertView == null) {

LayoutInflater layoutInflater = (LayoutInflater) this.context

.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

convertView = layoutInflater.inflate(R.layout.child, null);

}

TextView expandedListTextView = (TextView) convertView

.findViewById(R.id.expandedListItem);

expandedListTextView.setText(expandedListText);

return convertView;

}

@Override

public View getGroupView(int listPosition, boolean isExpanded,

View convertView, ViewGroup parent) {

String listTitle = (String) getGroup(listPosition);

if (convertView == null) {

LayoutInflater layoutInflater = (LayoutInflater) this.context.

getSystemService(Context.LAYOUT_INFLATER_SERVICE);

convertView = layoutInflater.inflate(R.layout.parent, null);

}

TextView listTitleTextView = (TextView) convertView

.findViewById(R.id.listTitle);

listTitleTextView.setTypeface(null, Typeface.BOLD);

listTitleTextView.setText(listTitle);

return convertView;

}

Create ExpandableListData class:

ExpandableListData.java

As I discussed above, by using HashMap the object i.e “expandableListDetail” is used to map the child items with their group.

public static HashMap<String, List<String>> getData() {

HashMap<String, List<String>> expandableListDetail = new HashMap<String, List<String>>();

List<String> cricketPlayers = new ArrayList<String>();

cricketPlayers.add(“Sachin Tendulkar”);

cricketPlayers.add(“Virat Kohli”);

cricketPlayers.add(“AB De Villiers”);

cricketPlayers.add(“Chris Gayle”);

cricketPlayers.add(“Rohit Sharma”);

expandableListDetail.put(“CRICKET PLAYERS”, cricketPlayers);

return expandableListDetail;

}

MainActivity.java

Here we have to implement all the interface and callback methods that are discussed above.

Initialize ExpandableListView.

ExpandableListView expandableListView;

Add code in onCreate() {..} :

expandableListView = (ExpandableListView) findViewById(R.id.expandableListView);

expandableListView.setOnGroupExpandListener(this);

expandableListView.setOnGroupCollapseListener(this);

expandableListView.setOnChildClickListener(this);

Create some code in onGroupExpand(){…}

@Override

public void onGroupExpand(int groupPosition) {

Toast.makeText(getApplicationContext(),expandableListTitle.get(groupPosition) + ” List Expanded.”,Toast.LENGTH_SHORT).show();});

Create some code in onGroupCollapse (){…}

@Override

public void onGroupCollapse(int groupPosition) {

Toast.makeText(getApplicationContext(),

expandableListTitle.get(groupPosition) + ” List Collapsed.”,

Toast.LENGTH_SHORT).show();});

Create some code in onChildClick (){…}

@Override

public boolean onChildClick(ExpandableListView parent, View v,

int groupPosition, int childPosition, long id) {

Toast.makeText(getApplicationContext(),

expandableListTitle.get(groupPosition)

+ ” -> “

+ expandableListDetail.get(expandableListTitle.get(groupPosition)).get(

childPosition), Toast.LENGTH_SHORT).show();

return false;}});

Output:

 

Conclusion: This is the simple example of ExpandableListView. It is just used to show the list in a different format, we can perform many operations on a child item and we can customize it also according to the need of a application.This is the basic idea about the android widgets, which is very popular in Android development.