Custom ListView in Android | List View Example in Android |ListView ArrayAdapter in Android

Hello Friends,
      It's a very simple demo for custom List-View in android. Important steps or given below, hope it will help you.

1-Print screen:

2-Create a new Project name e.g.- CustomListView.java

package com.example.customlistview;

import java.util.ArrayList;

import android.os.Bundle;
import android.widget.ListView;
import android.app.Activity;

public class CustomListView extends Activity {
ArrayList<Contact> imageArry = new ArrayList<Contact>();
ContactImageAdapter adapter;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// add image and text in arraylist
imageArry.add(new Contact(R.drawable.facebook, "FaceBook"));
imageArry.add(new Contact(R.drawable.google, "Google"));
imageArry.add(new Contact(R.drawable.ical, "Ical"));
imageArry.add(new Contact(R.drawable.outlook, "Outlook"));
imageArry.add(new Contact(R.drawable.twitter, "Twitter"));
// add data in contact image adapter
adapter = new ContactImageAdapter(this, R.layout.list, imageArry);
ListView dataList = (ListView) findViewById(R.id.list);
dataList.setAdapter(adapter);

}

}

2- Create class Contact.java for getters - setters.

package com.example.customlistview;

public class Contact {

int image;

String name;

public int getImage() {

return image;

}

public void setImage(int image) {

this.image = image;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public Contact(int image, String name) {

super();

this.image = image;

this.name = name;

}

}

3-Create ContactImageAdapter.java class for display custom list e.g. image and text in same List.

package com.example.customlistview;

import java.util.ArrayList;

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 ContactImageAdapter extends ArrayAdapter<Contact>{

Context context;

   int layoutResourceId;   

   ArrayList<Contact> data=new ArrayList<Contact>();

   public ContactImageAdapter(Context context, int layoutResourceId, ArrayList<Contact> data) {

       super(context, layoutResourceId, data);

       this.layoutResourceId = layoutResourceId;

       this.context = context;

       this.data = data;

   }

   @Override

   public View getView(int position, View convertView, ViewGroup parent) {

       View row = convertView;

       ImageHolder holder = null;

      

       if(row == null)

       {

           LayoutInflater inflater = ((Activity)context).getLayoutInflater();

           row = inflater.inflate(layoutResourceId, parent, false);

          

           holder = new ImageHolder();

           holder.txtTitle = (TextView)row.findViewById(R.id.txtTitle);

           holder.imgIcon = (ImageView)row.findViewById(R.id.imgIcon);

           row.setTag(holder);

       }

       else

       {

           holder = (ImageHolder)row.getTag();

       }

      

       Contact myImage = data.get(position);

       holder.txtTitle.setText(myImage.name);

          int outImage=myImage.image;

       holder.imgIcon.setImageResource(outImage);

      return row;

      

   }

  

   static class ImageHolder

   {

       ImageView imgIcon;

       TextView txtTitle;

   }

}

4-main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:orientation="horizontal">

    <ListView

        android:id="@+id/list"

        android:layout_width="0dp"

        android:layout_height="fill_parent"

        android:layout_weight="0.55" >

    </ListView>

</LinearLayout>

5-list.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="horizontal"

    android:padding="10dp" >

    <ImageView

        android:id="@+id/imgIcon"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_weight="0.71"

        android:gravity="center_vertical"/>

    

    <TextView

        android:id="@+id/txtTitle"

        android:layout_width="80dp"

        android:layout_height="fill_parent"

        android:gravity="center_vertical"

        android:textSize="14dp"

        android:layout_marginLeft="7dp" />

      

</LinearLayout>

Thanks...