Wednesday, September 26, 2012

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...


9 comments:

  1. thank you! :)

    i need it! it solve my problam ;-)

    ReplyDelete
  2. Hi Manish
    Your code worked just excellent for me. Thanks.

    I want to use this list to show images which I downloaded from my server.
    something like:

    imageArry.add(new Contact(image.downloaded.by.universal.image.loader, "Some string"));
    How can you do it?

    When this line being executed the image still not there....

    Thanks

    ReplyDelete
    Replies
    1. When you all data from server in json or xml add them into an ArrayList like-
      ArrayList imageArry = new ArrayList();
      imageArry.add(new Contact(title,image));

      And then add this arraylist into your adapter outside of for loop-
      adapterEvents = new ContactImageAdapter(HomePage.this,R.layout.screen_list, imageArry);
      listView.setAdapter(adapterEvents);

      That's all....
      Well you should use Async Task for getting data from server use doInBackground and after get all data onPostExcute add above arraylist into listview.
      You can find it on my blog also..

      Thanks,

      Delete
    2. And do you have use ImageLoder class for convert url into image? please check it properly in log or use debugger..

      Delete
  3. i want to make a listview in which (image with text) should appear in alternate
    means
    in first row image comes first then text
    in second row text comes first then image

    ReplyDelete
    Replies
    1. Means in same row image then text right?
      Just change in row.xml , put text below of imageview..

      Delete
  4. Manish your work is Awesome. Well I was looking for your help.

    I my App I have a custom list view and when clicking on particular list it takes u to next acticity where that list item Image and content is visible. User should be able to edit image in the next activity from camera or gallery. and when pressed back it should reflect it in the listview.

    I am able to get the image in the activity where single list item is shown after click, but how to reflect this change in the main list view. Mail me if u have code- indresh1989@gmail.com

    Regards !!

    ReplyDelete
    Replies
    1. Take the static arraylist and update on change image or use local database sqlite and make update query..

      Delete