All CategoriesAndroid App Development

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 the group it will collapse, 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 Main activity 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” />

  1. 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” />

  1. 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():Android Programming
@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.
Keep visiting our site www.acadgild.com for more updates on Bigdata and other technologies.

Related Popular Courses:

ANDROID COURSE

ONLINE HADOOP TRAINING

BLOCKCHAIN TECHNOLOGY APPLICATIONS

BUSINESS ANALYTICS COURSE

DATA SCIENCE CLASS

Android Programming

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close