Android: Dealing with ListActivities, customized ListAdapters and custom-designed items

by Phillip Steffensen on Wed, 07/14/2010 - 20:31

Due to its ListActivity class the Android SDK helps developers to create List-GUIs easily. Therefore the ListActivity uses a ListView. But what about customized lists? What about own list-designs? In this post I'll try to show how to extend a standard ListView to create a custom list-design. To create your own list-design, you should define how an item in your list should look like. As an example I'll use a list of Twitter-updates (also called „tweets“).

To define how a tweet should be displayed you can create a new layout-file (e.g. tweet.xml) in res/layout/. Its content could look like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/TweetLayout" android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <TableLayout android:id="@+id/TableLayout" android:layout_width="wrap_content" android:layout_height="wrap_content">
        <TableRow>
            <TextView android:text="" android:id="@+id/TweetUserName" android:layout_width="wrap_content"
                android:layout_height="wrap_content" android:layout_marginLeft="10px" android:textSize="5pt"></TextView>
        </TableRow>
        <TableRow>
            <TextView android:text="" android:id="@+id/TweetText" android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:textStyle="bold" android:textSize="8pt" android:layout_marginLeft="10px"></TextView>
        </TableRow>
    </TableLayout>
</LinearLayout>

This simple layout definition declares how a single tweet should be structured and displayed as an item in the list. To let the ListView use this layout a customized ListAdapter must be set. To create such an adapter the class BaseAdapter can be used.

public class TweetListAdapter extends BaseAdapter {
 
    private List<Tweet> tweetList;
 
    private Context context;
 
    public TweetListAdapter(List<Tweet> tweetList, Context context) {
        this.tweetList = tweetList;
        this.context = context;
    }
 
    public int getCount() {
        return tweetList.size();
    }
 
    public Tweet getItem(int position) {
        return tweetList.get(position);
    }
 
    public long getItemId(int position) {
        return tweetList.get(position).getId();
    }
 
    public View getView(int position, View convertView, ViewGroup parent) {
        LinearLayout itemLayout;
        Tweet tweet = tweets.get(position);
 
        itemLayout= (LinearLayout) LayoutInflater.from(context).inflate(R.layout.tweet, parent, false);
 
        TextView tvUser = (TextView) itemLayout.findViewById(R.id.TweetUserName);
        tvUser.setText(tweet.getUsername());
 
        TextView tvText = (TextView) itemLayout.findViewById(R.id.TweetText);
        tvText.setText(tweet.getText());
 
        return itemLayout;
    }
 
}

The method getView now returns a custom design for each list-item based on the tweet.xml. To use this new TweetListAdapter within your ListActivity you should set it to ListActivity's ListView. Therefore the onCreate-method is recommended.

public class TweetListActivity extends ListActivity {
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        List<Tweet> tweetList = loadTweets();
 
        ListAdapter adapter = new TweetListAdapter(tweetList, this);
        getListView().setAdapter(adapter);
    }
 
}

That's all. If you now run your Activity within the SDKs emulator every item should look like defined in tweet.xml. If you like to you can extend the tweet.xml on your own and add things like an image and/or the tweet's posting-time. If you do so the getView-method of TweetListAdapter should be extended too to fill all nested fields.

Comments

Pingback
Twitter Trackbacks for Android: Dealing with ListActivities (not verified) - Sat, 07/17/2010 - 08:32

[...] Android: Dealing with ListActivities, customized ListAdapters and custom-designed items | united-cod... united-coders.com/phillip-steffensen/android-deal...es-customized-listadapters-and-custom-designed-0 – view page – cached Android: Dealing with ListActivities, customized ListAdapters and custom-designed items Tweets about this link [...]