Android Expandable List example, Android example, Layout example, List Example, Expandable List

Home >> Miscellaneous
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 write to us @
usingframeworks @ gmail dot com
If anything missed out , please let me know at techienjoy at yahoo . com