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.















20 comments:

  1. Samir nice post, but i also want whenever user will click on listview item then selected row will be appear in another activity with Image and text, if you will add this functionality also, then this post will be most useful for developers.

    ReplyDelete
    Replies
    1. Hello Amit,

      May be it comes in Sometimes, I will try ASAP.

      Delete
    2. This comment has been removed by the author.

      Delete
  2. Samir excellent post,
    You have done this for xml response from server, can we do this for JSON response also? It would be very help full.

    ReplyDelete
  3. Hello Surya sun,

    See Json Parsing here ,

    http://samir-mangroliya.blogspot.in/p/android-json-parsing-tutorial.html


    ReplyDelete
  4. Yes samir, i saw this link http://samir-mangroliya.blogspot.in/p/android-json-parsing-tutorial.html it displays only text in listview, no custom image+text in listview in JSON parser. Any way you have done a good job.

    ReplyDelete
  5. hi samir, very good tutorial, u had done it for xml, how can we add image and text in listview for json response in android?

    ReplyDelete
  6. Sir Can You help me Search function using this rssfeed?
    mail:naguchennai@gmail.com

    ReplyDelete
  7. hi mohana,

    you just add editText for search in listview.and add textwatcher for listing edittext value.

    see here :: http://samir-mangroliya.blogspot.in/2012/05/android-sectioned-listview-with-search_6865.html

    ReplyDelete
  8. Hi,Recently I gonethrough a topic called as Sherlock fragments.I need to parse an image from xml and save it in cache.how to do tat in view pager or tab page indicator.Usual Tabs been changed and been replaced by sherlock tabs.it wl b nice if you guide for tat also..

    ReplyDelete
  9. sir can you intigrate Sections with this code ??? please...

    ReplyDelete
    Replies
    1. yes you can integrate sections with this code...

      Delete
  10. How can i Implement Scroll Down to Load more data?
    My xml is very big
    Any help

    ReplyDelete
  11. How can i Add Never Ending List? Pls help me.. Pls check this ...i want like that http://p-xr.com/android-tutorial-dynamicaly-load-more-items-to-the-listview-never-ending-list/

    ReplyDelete
  12. hii
    samir

    can you show image with text in the list view using json parser .

    Thanks in advance

    ReplyDelete
  13. Hi Samir,nice post.i am searching same this types article.Thanks lot.

    ReplyDelete

Android Testing App