Android Tutorials
Working With Android Contacts
Accessing Data With Android Cursors
Creating Lists Using The Android ListActivity
Android 9 Patch Scaled PNG Image Guide
Working With Images In Android
Exploring Android LinearLayout And RelativeLayout
Writing A Basic Android Application
Installing The Android SDK In Eclipse

Creating Lists Using The Android ListActivity

Iconifying the list

Pictures and other graphics can also be added to the list items. This takes even more work though. We will need to extend the SimpleCursorAdapter so that the getView method can be overridden. First though, create a new android xml file in res/layouts/ called image_list.xml with a root element of LinearLayout to hold the list item layout.

<?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="wrap_content"
  android:orientation="horizontal">
  
  <ImageView
     android:id="@+id/bimage"
     android:layout_height="22px"
     android:layout_width="22px"
     android:src="@drawable/icon"
     />
  <TextView
     android:id="@+id/btitle"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"/>
</LinearLayout>

This simple linear layout will be used to display each list element. The ImageView element will be used to display the favicon for the bookmark if one is stored. If one isn't stored the default application icon will be displayed. The src component was set to the icon. In the code below we'll change the image to the favicon if one exists. The TextView component will be used to hold the title of the bookmark.

Now we need to extend SimpleCursorAdapter. Create a new class called ImageCursorAdapter in the same source package as TestListActivities.java. The new class should extend android.widget.SimpleCursorAdapter.

package com.higherpass.android.widgets.test;

import android.content.Context;
import android.database.Cursor;
import android.graphics.BitmapFactory;
import android.provider.Browser;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.SimpleCursorAdapter;
import android.widget.TextView;

public class ImageCursorAdapter extends SimpleCursorAdapter {

        private Cursor c;
        private Context context;

	public ImageCursorAdapter(Context context, int layout, Cursor c,
			String[] from, int[] to) {
		super(context, layout, c, from, to);
		this.c = c;
		this.context = context;
	}

	public View getView(int pos, View inView, ViewGroup parent) {
	       View v = inView;
	       if (v == null) {
	            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
	            v = inflater.inflate(R.layout.image_list, null);
	       }
	       this.c.moveToPosition(pos);		
	       String bookmark = this.c.getString(this.c.getColumnIndex(Browser.BookmarkColumns.TITLE));
	       byte[] favicon = this.c.getBlob(this.c.getColumnIndex(Browser.BookmarkColumns.FAVICON));
	       if (favicon != null) {
		   ImageView iv = (ImageView) v.findViewById(R.id.bimage);
	           iv.setImageBitmap(BitmapFactory.decodeByteArray(favicon, 0, favicon.length));
	       }
               TextView bTitle = (TextView) v.findViewById(R.id.btitle);
               bTitle.setText(bookmark);
	       return(v);
	}

}

The ImageCursorAdapter class extends the SimpleCursorAdapter class so that we can override the getView() method. This will allow us to customize the ListView rows. First though we need to create the constructor. The constructor, public ImageCursorAdapter(), expects 5 paramters. They are the context, the layout resource to use, the cursor with the data, and field to view element mapping arrays respectively in 4 and 5. The cursor will then pass the parameters to the constructor for SimpleCursorAdapter with the super() method.

Now override the getView() method from SimpleCursorAdapter. The getView() method expects 3 parameters, the position in the list/cursor, the view, and the parent. If a view wasn't provided to the getView() method use the LayoutInflater to create the view from the layout. Next move the cursor pointer to the correct position. For more information about using cursors see Using Cursors In Android Tutorial.

Get the title of the bookmark and store it in the string bookmark. The favicon is stored as a blob in the SQLite database. The cursor function getBlob() will properly retrieve the data from the cursor and return it as a byte array. This is good because we can use the byte array to create our bitmap for the image. If the favicon value isn't null then there was an icon stored in the database. Extract the ImageView component from the view. Now use the BitmapFactory to create a bitmap from the byte array and set it as the ImageView image with setImageBitmap. For more information on images see the Android Image Tutorial. Finally set the title TextView and return the view.

Customizing List Appearance <<  1 2 3 4 5  >> Checkboxed Lists
New Content