Android Dynamic (no xml) Custom Adapter Listview

(Update Jan 2011 a new Listview article is available. It shows how to create a Header on top of all items.)

The standard controls in Android API are good, they do a decent job and are very configurable. For eg. the standard listview allows a collection of items, provides custom colors, and nice actions like the finger friendly scroll:

The left picture is a simple listview. The right image shows what we are planning to do in this tutorial.
Simple listview sample code here.

For various purposes, we might want to enrich the look and feel of a listview, to add pictures or other controls, or to better organize the items. There are a few samples available on the Internet, but they all require a static definition of an item, using the row.xml resource. I’m showing a different approach: build the items using only Java code, this is what is called a Dynamic Listview custom adapter, so no XMLs required here.

The idea is to use the standard Listview control, but build a different adapter to define the items.
First, let’s focus on the items. Let’s say we want each item to contain data regarding a network adapter. This means we’ll record the name, the address , a type (maybe for wired/ wireless) . To define these details a new class is needed: Device.java

public class Device {
		   
	    private String m_szDeviceName;
	    private String m_szDeviceAddress;
	    private int m_nDeviceType;
	    private int m_nDeviceStatus;
	    private int m_nDeviceID;

	    public Device( String deviceName, String deviceAddress, int deviceType, int deviceStatus, int deviceID ) {
	        this.m_szDeviceName = deviceName;
	        this.m_szDeviceAddress = deviceAddress;
	        this.m_nDeviceType = deviceType;
	        this.m_nDeviceStatus = deviceStatus;
	        this.m_nDeviceID = deviceID;
	      }


	    public String getDeviceName() { return m_szDeviceName; }
	    public void setDeviceName(String deviceName) { this.m_szDeviceName = deviceName;}
	    
	    public String getDeviceAddress() {return m_szDeviceAddress;}
	    public void setDeviceAddress(String deviceAddress) {this.m_szDeviceAddress = deviceAddress;}
	    
	    public int getDeviceType() { return m_nDeviceType; }
	    public void setDeviceType(int deviceType) { this.m_nDeviceType = deviceType;}
	    
	    public int getDeviceStatus() { return m_nDeviceStatus; }
	    public void setDeviceStatus(int deviceStatus) { this.m_nDeviceStatus = deviceStatus;}
	    
	    public int getDeviceID() { return m_nDeviceID; }
	    public void setDeviceID(int deviceID) { this.m_nDeviceID = deviceID;}
}

While Device.java defines the DATA for each listview item, we need another class to define the View of each item, meaning that we need to construct the items using standard interface components (imageviews, textviews, etc). For this, we’ll be using another class, CustomAdapterView:

class CustomAdapterView extends LinearLayout {        
	public CustomAdapterView(Context context, Device device) 
	{
		super( context );		
		/*setOnClickListener((OnClickListener) context);
		setClickable(true);
		setFocusable(false);*/
		setId(device.getDeviceID());
		    
		//container is a horizontal layer
		setOrientation(LinearLayout.HORIZONTAL);
		setPadding(0, 6, 0, 6);
		
		//image:params
		LinearLayout.LayoutParams Params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		Params.setMargins(6, 0, 6, 0);
		//image:itself
		ImageView ivLogo = new ImageView(context);
		// load image
		if (device.getDeviceType() == 0)
			ivLogo.setImageDrawable(context.getResources().getDrawable(R.drawable.logo1));
		else if (device.getDeviceType() == 1)
			ivLogo.setImageDrawable(context.getResources().getDrawable(R.drawable.logo2));
		//image:add
		addView(ivLogo, Params);
		
		//vertical layer for text
		Params = new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
		LinearLayout PanelV = new LinearLayout(context);
		PanelV.setOrientation(LinearLayout.VERTICAL);
		PanelV.setGravity(Gravity.BOTTOM);
		
		TextView textName = new TextView( context );
		textName.setTextSize(16);
		textName.setTypeface(Typeface.DEFAULT, Typeface.BOLD);
		textName.setText( device.getDeviceName());
		PanelV.addView(textName);       
		
		TextView textAddress = new TextView( context );
		textAddress.setTextSize(16);
		textAddress.setText( device.getDeviceAddress());
		PanelV.addView(textAddress);    
		
		addView(PanelV, Params);
	}
}

As you can see, this class builds a nice item made out of an imageview, and two lines of text:

Now we only need to build the Custom Adapter class, that will use the CustomAdapterView private class and implement the getView method:

public class CustomAdapter extends BaseAdapter /*implements OnClickListener*/ {
	
	/*private class OnItemClickListener implements OnClickListener{           
	    private int mPosition;
	    OnItemClickListener(int position){
	            mPosition = position;
	    }
	    public void onClick(View arg0) {
	            Log.v("ddd", "onItemClick at position" + mPosition);                      
	    }               
	}*/

	public static final String LOG_TAG = "BI::CA";
    private Context context;
    private List deviceList;

    public CustomAdapter(Context context, List deviceList ) { 
        this.context = context;
        this.deviceList = deviceList;
    }

    public int getCount() {                        
        return deviceList.size();
    }

    public Object getItem(int position) {     
        return deviceList.get(position);
    }

    public long getItemId(int position) {  
        return position;
    }

    public View getView(int position, View convertView, ViewGroup parent) 
    { 
        Device device = deviceList.get(position);
        View v = new CustomAdapterView(this.context, device );
        
        //v.setBackgroundColor((position % 2) == 1 ? Color.rgb(50,50,50) : Color.BLACK);
        
        /*v.setOnClickListener(new OnItemClickListener(position));*/
        return v;
    }

    /*public void onClick(View v) {
            Log.v(LOG_TAG, "Row button clicked");
    }*/

}

Using these resources it is trivial to build and use a listview. This code in our main example class:

ListView ls2 = new ListView(context);
// clear previous results in the LV
ls2.setAdapter(null);        
// populate
ArrayList m_Devices = new ArrayList();
Device device;
for (int i=0;i<10;i++) {
   device = new Device("Network Device "+i,"13:B4:5C:0D:AE:67", i%2,0, 100 + i);
   m_Devices.add(device);
}        
CustomAdapter lvAdapter =  new CustomAdapter(context, m_Devices);
ls2.setAdapter(lvAdapter);

Creates a simple but nice Listview:

Get click event on Custom Adapter Listview

Ok, there are a few ways of handling this.
Method 1
In CustomAdapterView constructor, you make each item clickable, set an id (that you can use later to identify the item), and set a click listener (in the main class, using the context):

public CustomAdapterView(Context context, Device device) 
	{
		super( context );		
		setOnClickListener((OnClickListener) context);
		setClickable(true);
		setFocusable(false);
		setId(device.getDeviceID());
		...     

Then in the main example class you catch the click event:

public void onClick(View v) {
	int cmdId = v.getId();
	if (cmdId >= 100) { //first listview id
		int nIndex = cmdId - idLV1FirstItem;
		Log.i(LOG_TAG, "LV2 click "+nIndex );
		}
	}

This method works good, but it has a major disadvantage: because you've used "setClickable", the items will not show any change when clicked: they won't be drawn as "clicked". But you receive the click event.
Another disadvantage is that the listview will not react to key presses (enter) on items.

Method 2
The correct way of doing this, is to use the setOnItemClickListener method, without setClickable.

        ...
        ls2.setAdapter(lvAdapter);
        ls2.setOnItemClickListener(new OnItemClickListener() 
        {
        	public void onItemClick(AdapterView arg0, View arg1,int arg2, long arg3) 
        	{
        		Toast.makeText(getBaseContext(), "You clicked on "+arg2, Toast.LENGTH_LONG).show();
    		}
    	});
        ...

This way you have the animation when an item is clicked, and you also get the click event. And it works with key presses as well. All in one, this is the method to use for getting click events on custom adapter listviews.

Change row colors

You can have one row of a color, and the next in another color to read the content easier.
In CustomAdapter, method getView, simply use v.setBackgroundColor based on position:

        v.setBackgroundColor((position % 2) == 1 ? Color.GRAY : Color.BLACK);

The result looks like this:

Here is the code for this tutorial:
Custom Adapter Listview Source code, 57KB

See how to create a Header complex Listview here.

Hope this helps,