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:
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
<a title="Reference - BaseAdapter" href="http://developer.android.com/reference/android/widget/BaseAdapter.html">BaseAdapter</a>
can be used.
public class TweetListAdapter extends BaseAdapter { private List tweetList; private Context context; public TweetListAdapter(List 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 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.
Phillip Steffensen
Latest posts by Phillip Steffensen (see all)
- Conquer REST using curl - September 13, 2010
- Android: Dealing with ListActivities, customized ListAdapters and custom-designed items - July 14, 2010
- Developing a simple SOAP-webservice using Spring 3.0.1 and Apache CXF 2.2.6 - February 27, 2010