Android – ListView – 2 – Custom ListView

Problem: “ListView with 2 TextViews for one ListItems” .

As said in Part one: ListView, I have decided to write a series of articles on ListView. If you haven’t checked 1st Article of ListView article series then you should check it, if you really don’t know about ListView, Ignore it if you already know.

In this part, we will look into how we can display two TextViews in each list items.

Now, to display two views (or any number of views) inside each items, you need to do two things:

1. You need to define a XML file with whatever views you want in each items, this XML file would act as a customized list item layout.
2. Define an adapter and inflate that item XML layout.

Example:

Main.xml:
Where we just need to take 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">

    <ListView
    	android:layout_height="wrap_content"
    	android:id="@+id/listView2"
    	android:layout_width="match_parent">
    </ListView>
</LinearLayout>

listitem_row.xml:
This is our custom item layout file, which we will inflate for each items in the ListView. As defined in the problem, we will take two TextView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

    <TextView
    	android:id="@+id/textView1"
    	android:text="TextView"
    	android:layout_height="wrap_content"
    	android:layout_width="fill_parent"
    	android:textAppearance="?android:attr/textAppearanceLarge">
    </TextView>

    <TextView
    	android:text="TextView"
    	android:id="@+id/textView2"
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content">
    </TextView>

</LinearLayout>

ListView2Activity.java:
This is the main class file where we just need to create an adapter with passing required data, so that adapter can display the same into the ListView.

package com.technotalkative.listview2;

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

	ListView lview;
	ListViewAdapter lviewAdapter;

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

	private final static String number[] = {"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);

        lview = (ListView) findViewById(R.id.listView2);
        lviewAdapter = new ListViewAdapter(this, month, number);

        System.out.println("adapter => "+lviewAdapter.getCount());

        lview.setAdapter(lviewAdapter);

        lview.setOnItemClickListener(this);
    }

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

ListViewAdapter.java:
Our custom adapter class, to inflate the item xml layout file for the each items. getView is the actual method which deals with operations on each items, and in the same method we can inflate whatever xml layout we want to inflate for whichever item. You can decide the position of the particular item using the position value inside getView() method.

package com.technotalkative.listview2;

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

public class ListViewAdapter extends BaseAdapter
{
	Activity context;
	String title[];
	String description[];

	public ListViewAdapter(Activity context, String[] title, String[] description) {
		super();
		this.context = context;
		this.title = title;
		this.description = description;
	}

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

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

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

	private class ViewHolder {
        TextView txtViewTitle;
        TextView txtViewDescription;
	}

	public View getView(int position, View convertView, ViewGroup parent)
	{
		// TODO Auto-generated method stub
		ViewHolder holder;
		LayoutInflater inflater =  context.getLayoutInflater();

		if (convertView == null)
		{
			convertView = inflater.inflate(R.layout.listitem_row, null);
			holder = new ViewHolder();
			holder.txtViewTitle = (TextView) convertView.findViewById(R.id.textView1);
			holder.txtViewDescription = (TextView) convertView.findViewById(R.id.textView2);
			convertView.setTag(holder);
		}
		else
		{
			holder = (ViewHolder) convertView.getTag();
		}

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

	return convertView;
	}

}