Android – ListView – 4 – Custom ListView

Problem: Android – ListView with Two TextViews and ImageView

Welcome to the Part 4 of ListView series. So far this series:

1. Part 1 – Simple ListView
2. Part 2 – ListView with Two TextView
3. Part 3 – ListView with Two TextView and One ImageView

This part is just an extended part of Part 3, where we discussed about taking ImageView into each items. In this part, we will see how we can display different images into the ImageView in every items.

For example:

main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
	android:id="@+id/relativeLayout1"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	xmlns:android="http://schemas.android.com/apk/res/android">

    <ListView
    	android:layout_height="wrap_content"
    	android:layout_width="match_parent"
    	android:id="@+id/listView4"
    	android:layout_alignParentLeft="true">
    </ListView>

</RelativeLayout>

listitem_row.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
	android:id="@+id/relativeLayout1"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:padding="5dip">

    <ImageView
    	android:layout_width="50dip"
    	android:layout_height="50dip"
    	android:id="@+id/imgViewLogo"
    	android:src="@drawable/icon"
    	android:layout_alignParentLeft="true"
    	android:layout_centerInParent="true"
    	android:scaleType="center">
    </ImageView>

    <TextView
    	android:textAppearance="?android:attr/textAppearanceLarge"
    	android:layout_height="wrap_content"
    	android:text="TextView"
    	android:layout_width="wrap_content"
    	android:id="@+id/txtViewTitle"
    	android:layout_toRightOf="@+id/imgViewLogo"
    	android:layout_marginLeft="2dip">
    </TextView>

    <TextView
    	android:layout_height="wrap_content"
    	android:text="TextView"
    	android:layout_width="wrap_content"
    	android:id="@+id/txtViewDescription"
    	android:layout_toRightOf="@+id/imgViewLogo"
    	android:layout_below="@+id/txtViewTitle"
    	android:layout_marginLeft="2dip">
    </TextView>

</RelativeLayout>

ListView4Activity.java

package com.technotalkative.customlistview4;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;

public class ListView4Activity extends Activity implements OnItemClickListener
{
    /** Called when the activity is first created. */

	ListView lview3;
	ListViewCustomAdapter adapter;

	private static String month[] = {"Add","Delete","Down","Information","Help",
		"Download","Mail","Search","Settings"};

	private static String desc[] = {"Add desc","Delete desc","Down desc",
		"Information desc","Help desc","Download desc","Mail desc",
		"Search desc","Settings desc"};

	private static int icons[] = {R.drawable.ic_add, R.drawable.ic_delete,
		R.drawable.ic_down, R.drawable.ic_info, R.drawable.ic_help,
		R.drawable.ic_download, R.drawable.ic_mail,
		R.drawable.ic_search, R.drawable.ic_settings};

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        lview3 = (ListView) findViewById(R.id.listView4);
        adapter = new ListViewCustomAdapter(this, month, desc, icons);
        lview3.setAdapter(adapter);

        lview3.setOnItemClickListener(this);
    }

	@Override
	public void onItemClick(AdapterView<?> arg0, View arg1, int position, long id) {
		// TODO Auto-generated method stub
		Toast.makeText(this, "Title => "+month[position]+" n Description => "+desc[position], Toast.LENGTH_SHORT).show();
	}
}

ListViewCustomAdapter.java

package com.technotalkative.customlistview4;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class ListViewCustomAdapter extends BaseAdapter
{
	public String title[];
	public String description[];
	public int images[];

	public Activity context;
	public LayoutInflater inflater;

	public ListViewCustomAdapter(Activity context,String[] title, String[] description, int[] images) {
		super();

		this.context = context;
		this.title = title;
		this.description = description;
		this.images = images;

	    this.inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return title.length;
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return 0;
	}

	public static class ViewHolder
	{
		ImageView imgViewLogo;
		TextView txtViewTitle;
		TextView txtViewDescription;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub

		ViewHolder holder;
		if(convertView==null)
		{
			holder = new ViewHolder();
			convertView = inflater.inflate(R.layout.listitem_row, null);

			holder.imgViewLogo = (ImageView) convertView.findViewById(R.id.imgViewLogo);
			holder.txtViewTitle = (TextView) convertView.findViewById(R.id.txtViewTitle);
			holder.txtViewDescription = (TextView) convertView.findViewById(R.id.txtViewDescription);

			convertView.setTag(holder);
		}
		else
			holder=(ViewHolder)convertView.getTag();

		holder.imgViewLogo.setImageResource(images[position]);
		holder.txtViewTitle.setText(title[position]);
		holder.txtViewDescription.setText(description[position]);

		return convertView;
	}

}

Note: Create “drawable” folder inside the android application, store the same images inside it.