Android

Android Expandable List Example with source code
Author : Ishtek

Setup Eclipse with Android ADT Plugin for test/code environment (by using Android API Level 7 and Emulator).
P.S- Above page is having around 14 images, download size could be around 700KB.

This Page and/or example code is using Android API Level 7 and tested using corresponding Emulator only.
For latest information please refer Android Official website.

Using Android API Level : 7 In this Web Page I shall try to walk you through an example that I think pretty simple and straigh-forward steps on how to use Exapandable List View from Android Platform API. For this example to work we need appropriate environment, both Hardware and Software. For using Android Platform, you can refer Google's Official web site for Android and on how to set up approrpiate design-time and runtime environment for compiling and running this example. In this example I shall show a Menu/List with a single item on screen on application start-up, as shown below: On click of the Menu item, the child item associated with this would open-up, as shown below: For this example/screen to show up, we require following different pieces/files as listed below:
-> List of XML files specific to Android XML File format: ->res/layout/main.xml ->res/layout/grouplayout_collapsed.xml ->res/layout/childlayout.xml -> List of Java files: ->src/com/tie/example/SampleExpandableListView.java
main.xml file is having the ExpandableListView tag with a LinearLayout.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ExpandableListView android:layout_height="fill_parent" android:id="@android:id/list" android:layout_width="fill_parent"> </ExpandableListView> </LinearLayout>
grouplayout_collapsed.xml file is the layout for initial menu screen.
<?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:background="#aabb88"> <TableLayout android:id="@+id/tableLayout1" android:layout_height="fill_parent" android:layout_width="wrap_content"> <TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:id="@+id/text1" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab One"></TextView> </TableRow> <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:id="@+id/text2" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Two"></TextView> </TableRow> </TableLayout> </LinearLayout>
childlayout.xml file is having TextViews for showing on the expanded view for the Expandable List View.
<?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:background="#bb00ff"> <TextView android:id="@+id/text5" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Five"></TextView> <TextView android:id="@+id/text6" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Six"></TextView> </LinearLayout>
After designing layout related XML files, we can take a look at the Activity code for this example. SampleExpandableListView.java
package com.tie.example; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import android.app.ExpandableListActivity; import android.os.Bundle; import android.view.View; import android.widget.ExpandableListAdapter; import android.widget.ExpandableListView; import android.widget.SimpleExpandableListAdapter; public class SampleExpandableListView extends ExpandableListActivity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); List groupList = new ArrayList(); Map groupData = new HashMap(); groupData.put("text1", " Test1 "); groupData.put("text2", " Test2 "); groupList.add(groupData); List childList = new ArrayList(); List childList1 = new ArrayList(); Map childMap = new HashMap(); childMap.put("text5", " Test5 "); childMap.put("text6", " Test6 "); childList1.add(childMap); childList.add(childList1); SimpleExpandableListAdapter listAdapter = new SimpleExpandableListAdapter (this, groupList, R.layout.grouplayout_collapsed, new String[] {"text1","text2"}, new int[] {R.id.text1,R.id.text2}, childList, R.layout.childlayout, new String[] {"text5","text6"}, new int[] {R.id.text5,R.id.text6}); setListAdapter(listAdapter); } }
This Java class extends ExpandableListActivity class file from the Android API. onCreate method is choosen for preparing data for the SimpleExpandableListAdapter instance creation. This class constructor requires ids and static values for all the TextViews. Once adapter is instantiated, it can be used by super class to substitute for the ListAdapter instance. In order to add another menu item to the expandable list I have modified onCreate method from the above class file, to look something like as follows:
. . . . . . . . . . public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); List groupList = new ArrayList(); Map groupData = new HashMap(); groupData.put("text1", " Test1 "); groupData.put("text2", " Test2 "); groupList.add(groupData); Map groupData1 = new HashMap(); groupData1.put("text1", " Test1 "); groupData1.put("text2", " Test2 "); groupList.add(groupData1); List childList = new ArrayList(); List childList1 = new ArrayList(); Map childMap = new HashMap(); childMap.put("text5", " Test5 "); childMap.put("text6", " Test6 "); childList1.add(childMap); childList.add(childList1); List childList2 = new ArrayList(); Map childMap1 = new HashMap(); childMap1.put("text3", " Test3 "); childMap1.put("text4", " Test4 "); childList2.add(childMap1); childList.add(childList2); SimpleExpandableListAdapter listAdapter = new SimpleExpandableListAdapter (this, groupList, R.layout.grouplayout_collapsed, new String[] {"text1","text2"}, new int[] {R.id.text1,R.id.text2}, childList, R.layout.childlayout, new String[] {"text3","text4","text5","text6"}, new int[] {R.id.text3,R.id.text4,R.id.text5,R.id.text6}); setListAdapter(listAdapter); } . . . . . . . . . .
The above change/modification will result in the final screen as shown below: Again I wanted to change the way child layout is aligned in this example, by using TableLayout, I have modified childlayout.xml file to achive screen that is shown as follows: childlayout.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:background="#bb00ff"> <TableLayout android:id="@+id/tableLayout1" android:layout_height="fill_parent" android:layout_width="wrap_content"> <TableRow android:layout_height="fill_parent" android:layout_width="wrap_content" android:id="@+id/tableRow1" android:background="#ff0000"> <TextView android:id="@+id/text3" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Three"></TextView> </TableRow> <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00ff00"> <TextView android:id="@+id/text4" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Four"></TextView> </TableRow> </TableLayout> <TableLayout android:id="@+id/tableLayout2" android:layout_height="fill_parent" android:layout_width="wrap_content"> <TableRow android:layout_height="fill_parent" android:layout_width="wrap_content" android:id="@+id/tableRow3" android:background="#ff0000"> <TextView android:id="@+id/text5" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Five"></TextView> </TableRow> <TableRow android:id="@+id/tableRow4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00ff00"> <TextView android:id="@+id/text6" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Six"></TextView> </TableRow> </TableLayout> </LinearLayout>
Let us take this example one step further with addition of an image inside the expandable list item. The image is this , and the change/modification done to accomodate this image within the TableRow tag is as follows:
<TableRow android:layout_height="fill_parent" android:layout_width="wrap_content" android:id="@+id/tableRow1" android:background="#ff0000"> <TextView android:id="@+id/text3" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Three"></TextView> <ImageView android:id="@+id/image1" android:src="@drawable/multicolor"/> </TableRow>
The image used by this ImageView should be placed in the res/drawable/ folder within the Android Project in Eclipse example workspace. At run-time this example would look something like as follows: If you would like to share your thoughts on this, please use following form.
If interested in commenting related to Android ExpandableList Example
Click Here

Name (To be shown on this Page:*

Email (Not to be shown):*

Website (To be shown on this Page)

Your Comments here (To be shown on this Page):*

(You can use <a> Tag in your comments)

Please enter same number as shown here 296


Android Expandable List Example with source code
Author : Ishtek

Setup Eclipse with Android ADT Plugin for test/code environment (by using Android API Level 7 and Emulator).
P.S- Above page is having around 14 images, download size could be around 700KB.

This Page and/or example code is using Android API Level 7 and tested using corresponding Emulator only.
For latest information please refer Android Official website.

Using Android API Level : 7 In this Web Page I shall try to walk you through an example that I think pretty simple and straigh-forward steps on how to use Exapandable List View from Android Platform API. For this example to work we need appropriate environment, both Hardware and Software. For using Android Platform, you can refer Google's Official web site for Android and on how to set up approrpiate design-time and runtime environment for compiling and running this example. In this example I shall show a Menu/List with a single item on screen on application start-up, as shown below: On click of the Menu item, the child item associated with this would open-up, as shown below: For this example/screen to show up, we require following different pieces/files as listed below:
-> List of XML files specific to Android XML File format: ->res/layout/main.xml ->res/layout/grouplayout_collapsed.xml ->res/layout/childlayout.xml -> List of Java files: ->src/com/tie/example/SampleExpandableListView.java
main.xml file is having the ExpandableListView tag with a LinearLayout.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ExpandableListView android:layout_height="fill_parent" android:id="@android:id/list" android:layout_width="fill_parent"> </ExpandableListView> </LinearLayout>
grouplayout_collapsed.xml file is the layout for initial menu screen.
<?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:background="#aabb88"> <TableLayout android:id="@+id/tableLayout1" android:layout_height="fill_parent" android:layout_width="wrap_content"> <TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:id="@+id/text1" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab One"></TextView> </TableRow> <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:id="@+id/text2" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Two"></TextView> </TableRow> </TableLayout> </LinearLayout>
childlayout.xml file is having TextViews for showing on the expanded view for the Expandable List View.
<?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:background="#bb00ff"> <TextView android:id="@+id/text5" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Five"></TextView> <TextView android:id="@+id/text6" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Six"></TextView> </LinearLayout>
After designing layout related XML files, we can take a look at the Activity code for this example. SampleExpandableListView.java
package com.tie.example; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import android.app.ExpandableListActivity; import android.os.Bundle; import android.view.View; import android.widget.ExpandableListAdapter; import android.widget.ExpandableListView; import android.widget.SimpleExpandableListAdapter; public class SampleExpandableListView extends ExpandableListActivity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); List groupList = new ArrayList(); Map groupData = new HashMap(); groupData.put("text1", " Test1 "); groupData.put("text2", " Test2 "); groupList.add(groupData); List childList = new ArrayList(); List childList1 = new ArrayList(); Map childMap = new HashMap(); childMap.put("text5", " Test5 "); childMap.put("text6", " Test6 "); childList1.add(childMap); childList.add(childList1); SimpleExpandableListAdapter listAdapter = new SimpleExpandableListAdapter (this, groupList, R.layout.grouplayout_collapsed, new String[] {"text1","text2"}, new int[] {R.id.text1,R.id.text2}, childList, R.layout.childlayout, new String[] {"text5","text6"}, new int[] {R.id.text5,R.id.text6}); setListAdapter(listAdapter); } }
This Java class extends ExpandableListActivity class file from the Android API. onCreate method is choosen for preparing data for the SimpleExpandableListAdapter instance creation. This class constructor requires ids and static values for all the TextViews. Once adapter is instantiated, it can be used by super class to substitute for the ListAdapter instance. In order to add another menu item to the expandable list I have modified onCreate method from the above class file, to look something like as follows:
. . . . . . . . . . public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); List groupList = new ArrayList(); Map groupData = new HashMap(); groupData.put("text1", " Test1 "); groupData.put("text2", " Test2 "); groupList.add(groupData); Map groupData1 = new HashMap(); groupData1.put("text1", " Test1 "); groupData1.put("text2", " Test2 "); groupList.add(groupData1); List childList = new ArrayList(); List childList1 = new ArrayList(); Map childMap = new HashMap(); childMap.put("text5", " Test5 "); childMap.put("text6", " Test6 "); childList1.add(childMap); childList.add(childList1); List childList2 = new ArrayList(); Map childMap1 = new HashMap(); childMap1.put("text3", " Test3 "); childMap1.put("text4", " Test4 "); childList2.add(childMap1); childList.add(childList2); SimpleExpandableListAdapter listAdapter = new SimpleExpandableListAdapter (this, groupList, R.layout.grouplayout_collapsed, new String[] {"text1","text2"}, new int[] {R.id.text1,R.id.text2}, childList, R.layout.childlayout, new String[] {"text3","text4","text5","text6"}, new int[] {R.id.text3,R.id.text4,R.id.text5,R.id.text6}); setListAdapter(listAdapter); } . . . . . . . . . .
The above change/modification will result in the final screen as shown below: Again I wanted to change the way child layout is aligned in this example, by using TableLayout, I have modified childlayout.xml file to achive screen that is shown as follows: childlayout.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:background="#bb00ff"> <TableLayout android:id="@+id/tableLayout1" android:layout_height="fill_parent" android:layout_width="wrap_content"> <TableRow android:layout_height="fill_parent" android:layout_width="wrap_content" android:id="@+id/tableRow1" android:background="#ff0000"> <TextView android:id="@+id/text3" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Three"></TextView> </TableRow> <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00ff00"> <TextView android:id="@+id/text4" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Four"></TextView> </TableRow> </TableLayout> <TableLayout android:id="@+id/tableLayout2" android:layout_height="fill_parent" android:layout_width="wrap_content"> <TableRow android:layout_height="fill_parent" android:layout_width="wrap_content" android:id="@+id/tableRow3" android:background="#ff0000"> <TextView android:id="@+id/text5" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Five"></TextView> </TableRow> <TableRow android:id="@+id/tableRow4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00ff00"> <TextView android:id="@+id/text6" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Six"></TextView> </TableRow> </TableLayout> </LinearLayout>
Let us take this example one step further with addition of an image inside the expandable list item. The image is this , and the change/modification done to accomodate this image within the TableRow tag is as follows:
<TableRow android:layout_height="fill_parent" android:layout_width="wrap_content" android:id="@+id/tableRow1" android:background="#ff0000"> <TextView android:id="@+id/text3" android:textColor="#000000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tab Three"></TextView> <ImageView android:id="@+id/image1" android:src="@drawable/multicolor"/> </TableRow>
The image used by this ImageView should be placed in the res/drawable/ folder within the Android Project in Eclipse example workspace. At run-time this example would look something like as follows: If you would like to share your thoughts on this, please use following form.