Tutorial details

Expandable List in Android | App Code for Sale | Preview

Expandable List in Android | Android Tutorial

How to use ExpandableListView in Android

Overview PAGE TOP

Today we are going to discuss ExpandableListView in Android. Here I’ve used Eclipse with ADT plugin to build this example. The example is straightforward. Create a new Android Application Project in your workspace. Extend your main Activity from ExpandableListActivity.

For your reference please find the following code :

001 package com.example.expandablelistviewdemo;
002 import android.app.ExpandableListActivity;
003 import android.content.Context;
004 import android.os.Bundle;
005 import android.view.LayoutInflater;
006 import android.view.View;
007 import android.view.ViewGroup;
008 import android.widget.BaseExpandableListAdapter;
009 import android.widget.TextView;
010 public class MainActivity extends ExpandableListActivity {
011 private static final String arrGroupElements[] = { "Item1", "Item2", "Item3",
012 "Item4", "Item5", "Item6", "Item7", "Item8", "Item9" };
013 /**
014 * strings for child elements
015 */
016 private static final String arrChildElements[][] = {
017 { "Details1 A","Details1 B", "Details1 C" },
018 { "Details2 A","Details2 B", "Details2 C" },
019 { "Details3 A","Details3 B", "Details3 C" },
020 { "Details4 A","Details4 B", "Details4 C" },
021 { "Details5 A","Details5 B", "Details5 C" },
022 { "Details6 A","Details6 B", "Details6 C" },
023 { "Details7" },
024 { "Details8" },
025 { "Details9" }
026 };
027 @Override
028 public void onCreate(Bundle savedInstanceState) {
029 super.onCreate(savedInstanceState);
030 setContentView(R.layout.article_screen);
031 setListAdapter(new ExpandableListAdapter(this));
032 }
033 public class ExpandableListAdapter extends BaseExpandableListAdapter {
034 private Context myContext;
035 public ExpandableListAdapter(Context context) {
036 myContext = context;
037 }
038 @Override
039 public Object getChild(int groupPosition, int childPosition) {
040 return null;
041 }
042 @Override
043 public long getChildId(int groupPosition, int childPosition) {
044 return 0;
045 }
046 @Override
047 public View getChildView(int groupPosition, int childPosition,
048 boolean isLastChild, View convertView, ViewGroup parent) {
049 if (convertView == null) {
050 LayoutInflater inflater = (LayoutInflater) myContext
051 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
052 convertView = inflater.inflate(
053 R.layout.article_list_child_item_layout, null);
054 }
055 TextView yourSelection = (TextView) convertView
056 .findViewById(R.id.articleContentTextView);
057 yourSelection
058 .setText(arrChildElements[groupPosition][childPosition]);
059 return convertView;
060 }
061 @Override
062 public int getChildrenCount(int groupPosition) {
063 return arrChildElements[groupPosition].length;
064 }
065 @Override
066 public Object getGroup(int groupPosition) {
067 return null;
068 }
069 @Override
070 public int getGroupCount() {
071 return arrGroupElements.length;
072 }
073 @Override
074 public long getGroupId(int groupPosition) {
075 return 0;
076 }
077 @Override
078 public View getGroupView(int groupPosition, boolean isExpanded,
079 View convertView, ViewGroup parent) {
080 if (convertView == null) {
081 LayoutInflater inflater = (LayoutInflater) myContext
082 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
083 convertView = inflater.inflate(
084 R.layout.article_list_item_layout, null);
085 }
086 TextView groupName = (TextView) convertView
087 .findViewById(R.id.articleHeaderTextView);
088 groupName.setText(arrGroupElements[groupPosition]);
089 return convertView;
090 }
091 @Override
092 public boolean hasStableIds() {
093 return false;
094 }
095 @Override
096 public boolean isChildSelectable(int groupPosition, int childPosition) {
097 return true;
098 }
099 }
100 }

Now we need to create the layout files. Here we’ll create 3 layout files. The first one for the main layout, the second one for the expandable list item and the third one for the expandable list sub item.

Please find the following codes :

Main Layout file (article_screen.xml)

01  <?xml version="1.0" encoding="utf-8"?>
02  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
03  android:layout_width="match_parent"
04  android:layout_height="match_parent"
05  android:padding="5dp">
06  <TextView android:id="@+id/articleListHeaderTextView"
07  android:layout_width="wrap_content"
08  android:layout_height="wrap_content"
09  android:layout_alignParentTop="true"
10  android:layout_centerHorizontal="true"
11  android:layout_marginTop="10dp"
12  android:text="List Header"
13  android:textAppearance="?android:attr/textAppearanceMedium"
14  android:textColor="#0585C4"
15  android:textSize="14dp"
16  android:textStyle="bold" />
17  <ExpandableListView
18  android:id="@android:id/list"
19  android:layout_width="match_parent"
20  android:layout_height="match_parent"
21  android:layout_below="@id/articleListHeaderTextView"
22  android:layout_margin="10dp"
23  android:divider="@android:color/darker_gray"
24  android:childDivider="@android:color/white"
25  android:dividerHeight="2dp"
26  android:fadingEdge="none">
27  </ExpandableListView>
28  </RelativeLayout>

Expandable list item layout file (articlelistitem_layout.xml)

01  <?xml version="1.0" encoding="utf-8"?>
02  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
03  android:layout_width="match_parent"
04  android:layout_height="wrap_content"
05  android:background="#FFFFFFFF"
06  android:paddingBottom="10dp"
07  android:paddingLeft="25dp"
08  android:paddingTop="10dp">
09  <TextView android:id="@+id/articleHeaderTextView"
10  android:layout_width="wrap_content"
11  android:layout_height="wrap_content"
12  android:layout_alignParentLeft="true"
13  android:layout_alignParentTop="false"
14  android:layout_centerHorizontal="false"
15  android:layout_centerVertical="true"
16  android:layout_margin="10dp"
17  android:textAppearance="?android:attr/textAppearanceMedium"
18  android:textColor="#0585C4"
19  android:textSize="12sp"
20  android:textStyle="bold" />
21  </RelativeLayout>

Expandable list item child layout file(articlelistchilditemlayout.xml)

01  <?xml version="1.0" encoding="utf-8"?>
02  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
03  android:layout_width="match_parent"
04  android:layout_height="wrap_content"
05  android:background="#FFE4DEDE"
06  android:padding="10dp">
07  <TextView android:id="@+id/articleContentTextView"
08  android:layout_width="wrap_content"
09  android:layout_height="wrap_content"
10  android:layout_alignParentLeft="true"
11  android:layout_alignParentTop="true"
12  android:layout_centerHorizontal="true"
13  android:textColor="#FF000000" />
14  </RelativeLayout>

That’s it. Now you can run this application either on emulator or on real device. It should look like the following images :

kas.JPG

Reference PAGE TOP

http://www.javacodegeeks.com/2013/06/expandable-list-in-android.html

0 Comments Leave a comment

Please login in order to leave a comment.

Newest first
!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.