Android ListView Example | Android ListView | Android example

Home >> Miscellaneous

In this tutorial we shall be covering Android's ListView API with the help
of an example.

Final screen of this Expandable listview example would look like the below image:

List of groups as initial view of this application showing two different
sections as different categories.











Following image shows screen after clicking both the items from the expandable 
ListView:


Expandable ListView initial screen layout as follows:

main.xml
<?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="wrap_content" 
              android:id="@android:id/list" 
              android:layout_width="fill_parent"/>

</LinearLayout>


list_group_1.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="#ee33ee">
  <TextView android:text="Cup Boards " android:layout_width="wrap_content" 
            android:textColor="#000000" android:layout_height="wrap_content"/>
  <ImageView android:src="@drawable/downarrow" 
             android:layout_width="wrap_content" 
             android:layout_height="wrap_content"/>
</LinearLayout>


list_group_2.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="#ee33ee">
  <TextView android:text="Cameras " android:layout_width="wrap_content" 
            android:textColor="#000000"  android:layout_height="wrap_content"/>
  <ImageView android:src="@drawable/downarrow" 
             android:layout_width="wrap_content" 
             android:layout_height="wrap_content"/>
</LinearLayout>


list_item_1.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">
  
  <ImageView android:src="@drawable/cupboards1"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:paddingRight="2px"/>
  <ImageView android:src="@drawable/cupboards2"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:paddingRight="2px"/>
  <ImageView android:src="@drawable/cupboards3"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:paddingRight="2px"/>
  <ImageView android:src="@drawable/cupboards4"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:paddingRight="2px"/>
</LinearLayout>


list_item_2.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">
  
  <TableLayout android:id="@+id/table" 
               android:layout_width="fill_parent"
               android:layout_height="fill_parent">
    <TableRow android:id="@+id/tabRow1" 
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">
       <LinearLayout android:layout_width="wrap_content"
                     android:layout_height="wrap_content">
          <ImageView android:src="@drawable/camera1"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:paddingRight="2px"
                     android:paddingBottom="2px"/>
          <ImageView android:src="@drawable/camera2"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:paddingRight="2px"
                     android:paddingBottom="2px"/>
       </LinearLayout>
    </TableRow>              
    <TableRow android:id="@+id/tabRow2" 
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">
       <LinearLayout android:layout_width="wrap_content"
                     android:layout_height="wrap_content">
          <ImageView android:src="@drawable/camera3"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:paddingRight="2px"
                     android:paddingBottom="2px"/>
          <ImageView android:src="@drawable/camera4"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:paddingRight="2px"
                     android:paddingBottom="2px"/>
       </LinearLayout>
    </TableRow>
  </TableLayout>
</LinearLayout>


Using Android API such as ExpandableListActivity and BaseExpandableListAdapter class 
files, those can be extended by example specific Java class files such as 
"PracticalListViewExample" extends ExpandableListActivity and "PracticalListViewAdapter"
extends BaseExpandableListAdapter class file.

PracticalListViewExample.java
package com.techienjoy.example.listview;

import android.app.ExpandableListActivity;
import android.app.ListActivity;
import android.os.Bundle;
import android.widget.BaseAdapter;
import android.widget.ExpandableListAdapter;
import android.widget.ListAdapter;

public class PracticalListViewExample extends ExpandableListActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ExpandableListAdapter adapter = new PracticalListViewAdapter(this);
        
        setListAdapter(adapter);
        
    }
}


and PracticalListViewExample.java
package com.techienjoy.example.listview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.LinearLayout;
import android.widget.TextView;

public class PracticalListViewAdapter extends BaseExpandableListAdapter {

	private LayoutInflater infLayout;
	private Context context;
	public PracticalListViewAdapter(Context context) {
		
		this.context = context;
	}
	
	@Override
	public Object getChild(int groupPosition, int childPosition) {
		return null;
	}

	@Override
	public long getChildId(int groupPosition, int childPosition) {
		return 0;
	}
    
	  /**
	   * 
	   * Following method is overridden and it returns the view for the child view
	   * as shown in this image 
	   */
	

	@Override
	public View getChildView(int groupPosition, int childPosition,
			boolean isLastChild, View convertView, ViewGroup parent) {
		LinearLayout view = null;
		if(infLayout == null)
		infLayout = (LayoutInflater) context
		                     .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		if(groupPosition == 0) {
			view = (LinearLayout) infLayout.inflate(R.layout.list_item_1, null);
		}
		if(groupPosition == 1) {
			view = (LinearLayout) infLayout.inflate(R.layout.list_item_2, null);
		}
		return view;
	}

	@Override
	public int getChildrenCount(int groupPosition) {
		return 1;
	}

	@Override
	public Object getGroup(int groupPosition) {
		return null;
	}

	@Override
	public int getGroupCount() {
		return 2;
	}

	@Override
	public long getGroupId(int groupPosition) {
		return 0;
	}
    
	  /**
	   * 
	   * Following method is overridden and it returns the view for the group
	   * as shown in this image 
	   */
	
	@Override
	public View getGroupView(int groupPosition, boolean isExpanded,
			View convertView, ViewGroup parent) {
		LinearLayout linear = new LinearLayout(context);
		if(infLayout == null)
			infLayout = (LayoutInflater) context
			                  .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		if(groupPosition == 0){
          linear = (LinearLayout) infLayout.inflate(R.layout.list_group_1, null);
		}
		if(groupPosition == 1){
	      linear = (LinearLayout) infLayout.inflate(R.layout.list_group_2, null);
		}
		return linear;
	}

	@Override
	public boolean hasStableIds() {
		return false;
	}

	@Override
	public boolean isChildSelectable(int groupPosition, int childPosition) {
		return false;
	}
}


Once all these files are placed in folders as appropriate within Eclipse 
Workspace and Android Project, Java files compiled and *.apk file created. 
Then this APK file can be published to Android Emulator for displaying 
application at runtime.


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