Android – ListView – 3 – Custom ListView

Problem: Android – ListView with Two TextViews and ImageView

Welcome to the part 3 of the ListView series.

So far this series:

1. Part 1 – Simple
2. Part 2 – ListView with Two TextView

In 2nd part, we discussed about defining custom adapter and defining a custom item xml layout file. As said in 2nd part, we can have as many as views we want in each items, to do this we just need to take views inside the item XML layout file. So as defined in the problem, we will take 2 TextView and 1 ImageView

We have already looked into defining custom adapter, so I will directly jumped into the example.

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/listView3"
    	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>

ListView3Activity.java:

package com.technotalkative.customlistview3;

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 ListView3Activity extends Activity implements OnItemClickListener
{
    /** Called when the activity is first created. */

	ListView lview3;
	ListViewCustomAdapter adapter;

	private static String month[] = {"January","February","March","April","May",
		"June","July","August","September",
		"October","November","December"};

	private static String desc[] = {"Month - 1","Month - 2","Month - 3",
		"Month - 4","Month - 5","Month - 6","Month - 7",
		"Month - 8","Month - 9","Month - 10","Month - 11","Month - 12"};

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

        lview3 = (ListView) findViewById(R.id.listView3);
        adapter = new ListViewCustomAdapter(this, month, desc);
        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.customlistview3;

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 Activity context;
	public LayoutInflater inflater;

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

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

	    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.xml, 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(R.drawable.icon);
		holder.txtViewTitle.setText(title[position]);
		holder.txtViewDescription.setText(description[position]);

		return convertView;
	}

}