Android listView with icons

By | March 25, 2011

In this post, we will have a list whose rows are made up of image, Here we just supply data to the adapter and helping the adapter to create a View objects for each row

The output will be

For this first create a xml file to hold the listview

<?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"
    >
		<TextView
		    android:layout_width="fill_parent"
		    android:layout_height="wrap_content"
		    android:text="@string/hello"
	    />
	    <ListView
			android:id="@android:id/list"
			android:layout_width="fill_parent"
			android:layout_height="fill_parent"/>

</LinearLayout>

The next objective is to create the xml for listview row. Here i create 2 components a imageview and a a textview for displaying the selected row. Also the image for the imageView is put in the drawable folder and is referred in this xml file.

<?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:id="@+id/icon"
		android:layout_width="wrap_content"
		android:paddingLeft="4dip"
		android:paddingRight="4dip"
		android:layout_height="wrap_content"
		android:src="@drawable/icon"/>
	<TextView
		android:id="@+id/label"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:textSize="24sp"/>
</LinearLayout>

ok. Next create one main java file. Here instead of activity we extend the class ListActivity.That is shown below

package com.ImageListView.pack;
import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;

public class ImageListView extends ListActivity
{
    /** Called when the activity is first created. */
	TextView selection;
	String[] names;
	public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

       names = new String[] { "sunday", "monday", "tuesday", "wednesday",
					"thrusday", "friday", "saturday",};

       this.setListAdapter(new ArrayAdapter<String>(this, R.layout.custom, R.id.label,names));
		selection=(TextView)findViewById(R.id.label);

	}

	public void onListItemClick(ListView parent, View v,int position,long id)
	{
	 	selection.setText(names[position]);
	}

}

The names array contains the elements that is to be displayed. The second parameter in the setlistAdapter is the name of the xml file we create for the row, the third is the imageView in the custom xml file and the last is the name of the array

Important
ListActivity has a default layout that consists of a single, full-screen list in the center of the screen.

However, if you desire, you can customize the screen layout by setting your own view layout with setContentView() in onCreate(). To do this, your own view MUST contain a ListView object with the id “@android:id/list”

9 thoughts on “Android listView with icons

  1. Samdroid

    Hi there,
    I’m using your tutorial, and I’m getting stuck at the line;

    this.setListAdapter(new ArrayAdapter(this, R.layout.custom, R.id.label,names));

    My program is returning an error “The constructor ArrayAdapter is undefined”

    Maybe I’m just missing what I’m supposed to be replacing “custom” with, any way you can help?
    Thanks

    Reply
    1. Soorya

      frnd…..custom layout is the name of the xml file which contains the ImageView and TextView component……….

      Here when you copy the xml file..the xml tags are sometimes lowercase. So keep that in mind….

      Reply
  2. LamprosGk

    what do i have to change/add if i want a different icon in each row?

    Reply
    1. James

      LamprosGK:- Please check this post and add an image as icon in the xml for the list view and refer it in the getView() method and change the icon as you want

      Reply
  3. Pingback: ListView with Sections in android. | Coderz Heaven

    1. James

      Hi Jay :- Actually I didn’t get you, what are you trying to say?

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *