How to create a Custom ListView In Android Application uisng ArrayAdapter

In this example, you can get to know how to create a custom list view using ArryaAdapter in android application development. I will create a custom header row for the list view and custom row for displaying android version image and version name. Once the row is clicked selected version name will be displayed in a Toast message.

Here is my listview_item_row.xml file. Place this file into layout directory under res folder.

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

    <ImageView
        android:id="@+id/imgIcon"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_marginBottom="5dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="5dp"
        android:gravity="center_vertical"
        android:src="@drawable/ic_launcher" 
        android:contentDescription="topicIconDescription"/>

    <TextView
        android:id="@+id/txtTitle"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:gravity="center_vertical"
        android:textColor="#000000"
        android:textSize="22sp"
        android:textStyle="bold" />

</LinearLayout>

This is my custom listview_header_row.xml header row. Place this file also in same directory.

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

    <TextView
        android:id="@+id/txtHeader"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#336699"
        android:gravity="center_vertical"
        android:padding="10dp"
        android:text="Android Version History"
        android:textColor="#FFFFFF"
        android:textSize="22sp"
        android:textStyle="bold" />

</LinearLayout>

Now Create another xml file to hold the listview in same directory called main_activity.xml.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <ListView
        android:id="@+id/listView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>

Now let's start cording to build up the Custom ListView Application. Upto now we have created all the necessary layouts in res/layout folder. Make sure you add all android version icons to the res/drawable-mdpi folder.

I'm creating a AndroidVersionName class to have version name & related version icon.

public class AndroidVersionName {

 public String versionName;
 public int versionIcon;

 public AndroidVersionName() {
  super();
 }

 public AndroidVersionName(int img, String name) {
  super();
  this.versionIcon = img;
  this.versionName = name;
 }
}

Now create a class extending ArryaAdapter.

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

public class VersionNameAdapter extends ArrayAdapter {

 Context context;
 int layoutResourceId;
 AndroidVersionName data[] = null;

 public VersionNameAdapter(Context context, int layoutResourceId, AndroidVersionName[] data) {
  super(context, layoutResourceId, data);
  this.layoutResourceId = layoutResourceId;
  this.context = context;
  this.AndroidVersionName = data;
 }

 @Override
 public View getView(int position, View convertView, ViewGroup parent) {
  View row = convertView;
  VersionHolder holder = null;

  if (row == null) {
   LayoutInflater inflater = ((Activity) context).getLayoutInflater();
   row = inflater.inflate(layoutResourceId, parent, false);

   holder = new VersionHolder();
   holder.imgIcon = (ImageView) row.findViewById(R.id.imgIcon);
   holder.txtTitle = (TextView) row.findViewById(R.id.txtTitle);

   row.setTag(holder);
  }

                else {
   holder = (VersionHolder) row.getTag();
  }

  AndroidVersionName name = data[position];
  holder.txtTitle.setText(name.title);
  holder.imgIcon.setImageResource(name.icon);

  return row;
 }

 static class VersionHolder {
  ImageView imgIcon;
  TextView txtTitle;
 }
}

Now create MainActivity.java class to set your listview and perform Click events on row command.

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

public class MainActivity extends Activity {

 private ListView listView1;

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

  AndroidVersionName version_data[] = new AndroidVersionName [] { new AndroidVersionName (R.drawable.cupcake, "What is Android?"),
    new AndroidVersionName (R.drawable.donut, "Donut"),
    new AndroidVersionName (R.drawable.ecliar, "Ecliar"),
    new AndroidVersionName (R.drawable.froyo, "frozan youget"),
    new AndroidVersionName (R.drawable.gingerbread, "GingerBread"),
    new AndroidVersionName (R.drawable.honeycomb, "Honeycomb"),
    new AndroidVersionName (R.drawable.icecreamsandwich, "Icecreamsandwich"),
    new AndroidVersionName (R.drawable.jellybean, "Jellybean"), };

  VersionNameAdapter adapter = new VersionNameAdapter(this, R.layout.listview_item_row, Topic_data);

  listView1 = (ListView) findViewById(R.id.listView1);
  View header = getLayoutInflater().inflate(R.layout.listview_header_row, null);
  listView1.addHeaderView(header);
  listView1.setAdapter(adapter);
  listView1.setOnItemClickListener(new OnItemClickListener() {

   @Override
   public void onItemClick(AdapterView arg0, View view, int position, long id) {
    
    TextView textview = (TextView) view.findViewById(R.id.txtTitle);
    Toast.makeText(getApplicationContext(),
      "Title:" + textview.getText().toString() ,
Toast.LENGTH_LONG).show();
   }
  });
 }

Once you complete all necessary files, it's time to launch the application.