How to use custom views in ListViews or ListActivities in our Android Programming Environment

I have been working with listviews and ListActivities from the beginning (Aabout using listview or ListActivities...Whats the difference? Is one better than other? I have to write about this). First of all, I created simple lists, using Arrays (in a very similar way to how we create Spinners), a list with just a text. Then I needed more complex rows in my applications, rows with images, rows with a complex composition of texts, images, backgrounds...So how can this be accomplished?

First of all lets understand how a list is created using a custom BaseAdapter.

In the Android developers page, we can find the following definition of BaseAdapter:

Common base class of common implementation for an Adapter that can be used in both ListView (by implementing the specialized ListAdapter interface} and Spinner (by implementing the specialized SpinnerAdapter interface.

So, using a Base Adapter we can implement ListViews and Spinners. Lets focus in on ListViews.

One of the most interesting things using this Base Adapter is that you can implement a list of everything you need. Le'ts use an example. Imagine that we are working in a Twitter application. Our application has a list of tweets, with the avatar, the name of the user, the tweet itself etc... so, lets suppose we have a class “Tweet”, this class “Tweet” then has the following fields:

String tweet

String userName

Date tweetSend

Bitmap imageAvatar

So, this is the information we want to show in every row in the list.

Lets compose our main Activity.

Here we have:

List<Tweet> tweetList;

(We fill this list from a database we have, from information in the Internet, etc...)

In our Activity (We are using a Activity not a ListActivity!!) we get the “listview” element we should have in our XML. (Remember, every Activity has an XML file associated with it)

Then, we have to call this method:

TweetRowAdapter adapter = new TweetRowAdapter(this, tweetList);

(The list must be fill with data!!)

The TweeetRowAdapter class is a class created by ourselves, this class extends BaseAdapter:

public class TweeetRowAdapter extends BaseAdapter {

This class have some methods that have to be implemented:

public int getCount()

public Object getItem(int position)

public long getItemId(int position)

And the MOST important:

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

The way to implement the 3 first methods is almost the same in all BaseAdapters:

public int getCount() {

return elements.size();

}

public Object getItem(int position) {

return elements.get(position);

}

public long getItemId(int position) {

return position;

}

Not very complex.

We need to create a constructor to call it from outside, passing a List of Tweets as parameters.

private List<Tweets> elements;

public TweeetRowAdapter(Context mContext, List<Tweet> elements) {

this.mContext = mContext;

this.elements = elements;

}

Now we have the list of tweets inside the Base Adapter. Now let's continue creating a custom View.

This part is easy. Just create a xml view, with the structure, elements (Images, TextViews, Buttons...) you want.

Once we have our xml (our is called, for example, “row_tweet.xml”) we can go to the next step.

And this final part is the most interesting!

Remember what I said about the getView method in the TweetRowAdapter? I said that this method is the most important. Let's see why.

We start the method as follows:

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

RelativeLayout rowLayout;

final Tweet tweet = elements.get(position);

if (convertView == null) {

rowLayout = (RelativeLayout) LayoutInflater.from(mContext).inflate(R.layout.row_tweet, parent, false);

} else {

rowLayout = (RelativeLayout) convertView;

}

The most important part is the LayoutInflater method. Its like “use the layout you have in the xml file to create a row”.

I have put a “RelativeLayout” as rowLayout, but this depends on what you have in your custom view as root element. Do you have a linearLayout? Then put LinearLayout instead of Relativelayout in the code above.

Then, in the rowLayout we have a full layout... now we can get and edit its elements:

TextView nameUser = (TextView) rowLayout.findViewById(R.id.tweet_user_name);

(Imagine that you have a TextView in the row_tweet.xml file that have the "id" as "twee_user_name")

editing!

nameUser.setText(tweet.getUserName())

tweet is every row in the list. (Remember Tweet class? We have it here)

And don't forget to return the view!

return rowLayout