Android Image ListView With Custom Adapter

Android Listview with image and Text::

Here i populated Listview with one ImageView and Three TextView using below layout file.


here when we have listview  with images then we download image one by one asyncronously in android.Then create bitmap from url and set it to imageview .so when you work with image then first read data from url byte by byte  and image have more bites that text so its take time to load in listview.

So when you need display image in listview in each row .then you have to use custom adapter for that ,and using your row layout you can inflate row and fill it in listview.

So First of all you have to create Thread or AsyncTask for read rss feeds from server.Then you can get image Url from rss feeds.now using image url you can download each image in seperate thread or asynctask.after completion of download you can set image to imageview.



R.layout.row

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/list_bg" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerVertical="true"
        android:layout_margin="5dp"
        android:background="#444"
        android:padding="3dp" />

    <TextView
        android:id="@+id/tvtitle"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dip"
        android:layout_toLeftOf="@+id/tvdate"
        android:layout_toRightOf="@+id/image"
        android:maxLines="1"
        android:text="title"
        android:textColor="@android:color/black"
        android:textSize="15dip"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tvdesc"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvtitle"
        android:layout_toRightOf="@+id/image"
        android:ellipsize="end"
        android:maxLines="3"
        android:text="desc"
        android:textColor="@android:color/black"
        android:textSize="13dip" />

    <TextView
        android:id="@+id/tvdate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dip"
        android:text="date"
        android:textColor="@android:color/black"
        android:textSize="12dip" />

</RelativeLayout>


here we have row and there are three Textview and imageview.so in Adapter Class we inflate this row in getView() method.


LayoutInflater inflater = (LayoutInflater) activity
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(R.layout.row, null);

Now we use Viewholder for add row in listview for smooth listview in android.

public static class ViewHolder {
public TextView tvTitle, tvDesc, tvDate;
private ImageView imgView;
}


now create new object of ViewHolder for every row while view is null.otherwise set as a tag using setTag(ViewHolder).


ViewHolder holder;
if(view==null){
      holder = new ViewHolder();
      view.setTag(holder);
   }
else {
      holder = (ViewHolder) view.getTag();
  }


now using viewHolder object you can refrenced your view from row.xml.


holder.tvTitle = (TextView) view.findViewById(R.id.tvtitle);

holder.tvDesc = (TextView) view.findViewById(R.id.tvdesc);

holder.tvDate = (TextView) view.findViewById(R.id.tvdate);

holder.imgView = (ImageView) view.findViewById(R.id.image);

we can set here value of each view of row.


holder.tvTitle.setText("title");
holder.tvDesc.setText("title");
holder.tvDate.setText("title");
holder.imgView.setImageResource(R.drawable.icon);


then return statement of getView method is view.
return view;

Download Full Source Code From here


         Download Source Code.