Android Expandable listView example
This Android Expandable Listview is tutorial is very basic and simple . We’ll create an expandable list view populated with groups of data. If you are not familiar with listviews yet, check Working with Listviews tutorial as a basic introduction to listviews and adapters and the other set of listview’s tutorial .
The following is a screenshot of the final result :
Start by creating your android project as usual. You’ll need 3 layout files: the activity_main.xml is for our listView, and two other layout files, one for the listview child item (the “title” for each expandable data group), and another for the data group itself.
• activity_main.xml:
<?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="fill_parent"
android:orientation="vertical">
<ExpandableListView
android:id="@+id/expandableLvw"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
</LinearLayout>
• list_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="55dip"
android:gravity="center_vertical">
<TextView
android:id="@+id/listItem_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="17dip"
android:textColor="#000000"
android:padding="5dp"/>
</LinearLayout>
• list_group.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp"
android:background="#000000">
<TextView
android:id="@+id/listTitle_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="17dp"
android:textColor="#FFFFFF" />
</LinearLayout>
Then, we need to code the ExpandableListAdapter.java class, which extends from the BaseExpandableListAdapter . This code is readable and easy to understand if you’re not familiar with adapters and lists: the getGroupView() method returns view for the listView header, and the getChildView() method returns view for the list child item.
public class ExpandableListAdapter extends BaseExpandableListAdapter {
private Context context;
private List listTitles;
private HashMap<String, List> listData;
public ExpandableListAdapter(Context context, List listTitles, HashMap<String, List>listData) {
this.context = context;
this.listTitles = listTitles;
this.listData= listData;
}
@Override
public Object getChild(int groupPosition, int childPosititon) {
return this.listData.get(this.listTitles.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)
convertView = ((LayoutInflater) this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.list_item, null);
((TextView) convertView.findViewById(R.id.listItem_text)).setText(childText);
return convertView;
}
@Override
public int getChildrenCount(int groupPosition) {
return this.listData.get(this.listTitles.get(groupPosition))
.size();
}
@Override
public Object getGroup(int groupPosition) {
return this.listTitles.get(groupPosition);
}
@Override
public int getGroupCount() {
return this.listTitles.size();
}
@Override
public long getGroupId(int groupPosition) {
return groupPosition;
}
@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
String title = (String) getGroup(groupPosition);
if (convertView == null)
convertView = ((LayoutInflater) this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.list_group, null);
((TextView) convertView.findViewById(R.id.listTitle_text)).setTypeface(null, Typeface.BOLD);
((TextView) convertView.findViewById(R.id.listTitle_text)).setText(title);
return convertView;
}
@Override
public boolean hasStableIds() {
return false;
}
@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}
}
What left now is to prepare all the data needed and pass it to the adapter. We’ll have static data ofcourse, and we’ll code that in our MainActivity.java
:
public class MainActivity extends Activity {
ExpandableListAdapter listAdapter;
ExpandableListView expListView;
List listDataTitles;
HashMap<String, List> listDataChild;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
expListView = (ExpandableListView) findViewById(R.id.expandableLvw);
prepareListData();
listAdapter = new ExpandableListAdapter(this, listDataTitles, listDataChild);
expListView.setAdapter(listAdapter);
}
private void prepareListData() {
listDataTitles = new ArrayList();
listDataChild = new HashMap<String, List>();
listDataTitles.add("Account settings");
listDataTitles.add("Profile Settings");
listDataTitles.add("Apps");
List accountSettings = new ArrayList();
accountSettings.add("Enable notifications");
accountSettings.add("Change Language");
accountSettings.add("Ads");
accountSettings.add("Delete account");
List profileSettings = new ArrayList();
profileSettings.add("Show my contact info");
profileSettings.add("Send me private notes");
profileSettings.add("Share my personal info");
List apps = new ArrayList();
apps.add("Facebook");
apps.add("Pinterest");
apps.add("Twitter");
apps.add("LinkedIn");
listDataChild.put(listDataTitles.get(0), accountSettings);
listDataChild.put(listDataTitles.get(1), profileSettings);
listDataChild.put(listDataTitles.get(2), apps);
}
}
Now if you run your project, you should see the output in the screenshot above.
You can detect the child item click by implementing setOnChildClickListener(). And you can perform actions when the listview group is expanded by implementing setOnGroupExpandListener(), or when it’s collapsed, by implementing setOnGroupCollapseListener().
Here is the complete code of MainActivity.java with the three listeners implemented:
public class MainActivity extends Activity {
ExpandableListAdapter listAdapter;
ExpandableListView expListView;
List listDataTitles;
HashMap<String, List> listDataChild;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
expListView = (ExpandableListView) findViewById(R.id.expandableLvw);
prepareListData();
listAdapter = new ExpandableListAdapter(this, listDataTitles, listDataChild);
expListView.setAdapter(listAdapter);
// Listview Group click listener
expListView.setOnGroupClickListener(new OnGroupClickListener() {
@Override
public boolean onGroupClick(ExpandableListView parent, View v,
int groupPosition, long id) {
Toast.makeText(getApplicationContext(), "Group Clicked " + listDataTitles.get(groupPosition), Toast.LENGTH_SHORT)
.show();
return false;
}
});
// Listview Group expanded listener
expListView.setOnGroupExpandListener(new OnGroupExpandListener() {
@Override
public void onGroupExpand(int groupPosition) {
Toast.makeText(getApplicationContext(), listDataTitles.get(groupPosition) + " Expanded", Toast.LENGTH_SHORT)
.show();
}
});
// Listview Group collasped listener
expListView.setOnGroupCollapseListener(new OnGroupCollapseListener() {
@Override
public void onGroupCollapse(int groupPosition) {
Toast.makeText(getApplicationContext(), listDataTitles.get(groupPosition) + " Collapsed", Toast.LENGTH_SHORT)
.show();
}
});
// Listview on child click listener
expListView.setOnChildClickListener(new OnChildClickListener() {
@Override
public boolean onChildClick(ExpandableListView parent, View v,
int groupPosition, int childPosition, long id) {
Toast.makeText(getApplicationContext(), listDataTitles.get(groupPosition) + " : "
+ listDataChild.get(listDataTitles.get(groupPosition)).get(childPosition), Toast.LENGTH_SHORT)
.show();
return false;
}
});
}
private void prepareListData() {
listDataTitles = new ArrayList();
listDataChild = new HashMap<String, List>();
listDataTitles.add("Account settings");
listDataTitles.add("Profile Settings");
listDataTitles.add("Apps");
List accountSettings = new ArrayList();
accountSettings.add("Enable notifications");
accountSettings.add("Change Language");
accountSettings.add("Ads");
accountSettings.add("Delete account");
List profileSettings = new ArrayList();
profileSettings.add("Show my contact info");
profileSettings.add("Send me private notes");
profileSettings.add("Share my personal info");
List apps = new ArrayList();
apps.add("Facebook");
apps.add("Pinterest");
apps.add("Twitter");
apps.add("LinkedIn");
listDataChild.put(listDataTitles.get(0), accountSettings);
listDataChild.put(listDataTitles.get(1), profileSettings);
listDataChild.put(listDataTitles.get(2), apps);
}
}
You can download this sample’s code here.
Recent Comments