Published on Feb 13,2014
2.1K Views
Email Post

ListView is one of the powerful Android widgets in Android. This widget is used very frequently in real-life applications. But the default look and feel of a ListView is not at all attractive. In the mobile app world, look and feel of your application matters a lot.

It is all about beauty. Beauty is in the eye of the beholder is not really true when you design and develop an application of the user. You as a developer should ensure that you develop your application with good aesthetics and attractive appearance. Android equips you with features and abilities to make your application look good and attractive for your users.

android widgets - listview

In case of ListViews, Android lets you build your own custom Adapter through which you can make your ListViews attractive to your users. In this blog, I will explain how you can build your own custom adapters.

If you are not clear with the basic concepts of Android, please attend this Android course.

So first things first. What are my pre-requisites to build a Custom Adapter with images?

  • Goes without saying you need android development environment which I assume you already have.
  • Images as per the requirement of your application. For my application, I have downloaded few images from http://www.unprofound.com/. This is an excellent site from where you can download images free of cost. You can use those images for commercial and non-commercial use.

That’s pretty much it, rest is coding, coding and coding.

Android Widget : Steps

Step 1

Create an android application project using Eclipse. For my case I have created an application and named it CustomList.

Step 2

Copy your images in your drawable folder (res/drawable-hdpi).

Step3

Code your main Layout as below. I have named the layout as activity_main.xml.

Not much to explain here. I have used a RelativeLayout and dragged and dropped a ListView. The ListView occupies the entire length and breadth of the parent view group (RelativeLayout). match_parent is the keyword which will do this trick and allow the ListView to occupy the entire real estate of the parent container.

activity_main.xml

</pre>

If you remember, I have mentioned in the class that each item in the ListView is a row within the ListView and we need a layout for each of these items(or rows). The same layout is applied to all the items in the ListView. So, next we will need a layout for the items in the ListView. I have coded that layout as below. It has an ImageView to hold image for a particular row and a TextView to hold the title of the image.

Android Widgets - Custom ListView

List_content_layout.xml


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

<span style="text-decoration: underline;"><</span><span style="text-decoration: underline;">LinearLayout</span><span style="text-decoration: underline;">xmlns:android</span><span style="text-decoration: underline;">=</span><i><span style="text-decoration: underline;">"http://schemas.android.com/apk/res/android"</span></i>

android:layout_width=<i>"match_parent"</i>

android:layout_height=<i>"match_parent"</i>

android:orientation=<i>"horizontal"</i> >

<span style="text-decoration: underline;"><</span><span style="text-decoration: underline;">ImageView</span>

android:id=<i>"@+id/imageView1"</i>

android:layout_width=<i>"wrap_content"</i>

android:layout_height=<i>"match_parent"</i>

android:layout_gravity=<i>"center_vertical"</i>

android:src=<i>"@drawable/ic_launcher"</i> />

<TextView

android:id=<i>"@+id/textView1"</i>

android:layout_width=<i>"wrap_content"</i>

android:layout_height=<i>"match_parent"</i>

android:layout_gravity=<i>"center_vertical"</i>

android:gravity=<i>"center_vertical"</i>

<span style="text-decoration: underline;">android:text=<i>"TextView"</i></span> />

Step 4

We are now done with the screen layouts, next we need to code a class which will have the ImageView and the TextView properties for a particular row (item) in the ListView, this class will be used in the Custom Adapter to bind a row object to the ListView.

Below is the code for that class:

Paintings.java


public class Paintings {
//Declare the variables that will hold the resource id for the image and the imagetitle Image will be bound to ImageView and imagetitle to the TextView for an item in the ListView
public int drawableresid;
public String imagetitle;

public Paintings() {
super();

}

//Constructor that will be used to create the row object for the ListView

public Paintings(int drawable, String imagetitle) {
super();
this.drawableresid = drawable;
this.imagetitle = imagetitle;
}

}

Step 5

Now we need to create the CustomAdapter that will stitch the two properties drawable-res-id and the image-title together and bind it to the ImageView and TextView for a particular item(row) in the ListView. The Custom Adapter inherits the Android Array Adapter class and overrides the getView method as shown below:

PaintingAdapter.java

package com.example.customlist;
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 PaintingAdapter extends ArrayAdapter {
Context c;
// create a reference of the Paintings class, this class when instantiated
// will hold the values for the image and text view elements for each item
// in the ListView

Paintings content[] = null;
public PaintingAdapter(Context c, Paintings[] content) {
super(c, R.layout.list_content_layout, content);
this.c = c;
this.content = content;
}

@Override
//This method will be called for creating the view for each item in the ListView. It takes the below input parameters itempos - position of the item in the ListView convertview - view of the
// item parent - this is the container/root of the generate view(ListView in our example)

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

// Creating an inflater object which will inflate the or parse the xml layout file for the listview items

LayoutInflater inflater = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View listrowView = inflater.inflate(R.layout.list_content_layout, parent, false);

TextView txtcontent = (TextView) listrowView.findViewById(R.id.textView1);
ImageView imgcontent = (ImageView) listrowView.findViewById(R.id.imageView1);

// storing the content object value for a particular item in the
// paintingcontent obj

Paintings paintingcontent = content[itempos];

// Setting the values for textview and imageview for each item in
// listview

txtcontent.setText(paintingcontent.imagetitle);
imgcontent.setImageResource(paintingcontent.drawableresid);

// return the view for a single item in the listview
return listrowView;
}
}

Thanks guys, if you have grasped the concepts and followed the flow of the code, you will see the below output once you run this code in your android emulator. Bye for now and happy androiding. See you soon in the class.

By – Rajib Deb

[dl url=”#” class=’eModal eModal-21′ title=”Download Code” desc=”” type=”” align=”” for=”download”]

Have a doubt in the discussed concepts? Ask our experts!

Stay tuned for more tutorials to learn how to create Android widgets! Happy Learning!

The following resources were used for creating this post: Edureka.in, Official Android Developers

You may also like these related posts:

About Author
Gaurav Shankhdhar
Published on Feb 13,2014

Share on

Browse Categories

Comments
2 Comments