Steven Osborn
"I would love to change the world, but they won't give me the source code".

Android Iconified List

November 21, 2007 – 3:53 pm

Iconified List
I’ve had a lot of fun hacking on Android applications recently and I’m really looking forward to seeing the future of Android unfold. My first project was the the password safe I mentioned in my last post and while working on some features for it I was looking for an example of a composite view that allowed you have cute little icons next to each entry in a list, I found a few examples that did similar things, but nothing was quite what I was looking for so I threw together the view you see here last night. I’m sure someone is else is looking to do something similar so I thought I would post about it and make it available to everyone.

Most of the magic happens by in the BulletedText View class. I basically just extend LinearLayout and create a composite view that contains an ImageView and TextView object: (Sorry if the code is a little cramped, I need to figure out how to keep wordpress from eating blank lines)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
public class BulletedTextView extends LinearLayout {
 
    private TextView mText;
    private ImageView mBullet;
 
    public BulletedTextView(Context context, String text, Drawable bullet) {
            super(context);
 
            this.setOrientation(HORIZONTAL);
 
            mBullet = new ImageView(context);
            mBullet.setImageDrawable(bullet);
            // left, top, right, bottom
            mBullet.setPadding(0, 2, 5, 0);
            addView(mBullet,  new LinearLayout.LayoutParams(
                 LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
 
            mText = new TextView(context);
            mText.setText(text);
            addView(mText, new LinearLayout.LayoutParams(
                 LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
    }
 
    public void setText(String words) {
        mText.setText(words);
    }
 
    public void setBullet(Drawable bullet) {
        mBullet.setImageDrawable(bullet);
    }
}

Then I created a custom list adapter for my view.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
public class BulletedTextListAdapter extends BaseAdapter {
 
    /**
    * Remember our context so we can use it when constructing views.
    */
    private Context mContext;
 
    private List<BulletedText> mItems;
 
    public BulletedTextListAdapter(Context context) {
        mContext = context;
        mItems  = new ArrayList<BulletedText>();
    }
 
    public void addItem(BulletedText bt) {
        mItems.add(bt);
    }
 
    public void setListItems(List<BulletedText> bti) {
        mItems = bti;
    }
 
    public int getCount() {
        return mItems.size();
    }
 
    public Object getItem(int position) {
        return mItems.get(position);
    }
 
    public boolean areAllItemsSelectable() {
        return false;
    }
 
    public boolean isSelectable(int position) {
        return mItems.get(position).isSelectable();
    }
 
    public long getItemId(int position) {
        return position;
    }
 
    /**
    * Make a BulletedTextView to hold each row.
    */
    public View getView(int position, View convertView, ViewGroup parent) {
        BulletedTextView btv;
        if (convertView == null) {
            btv = new BulletedTextView(mContext, 
                mItems.get(position).getText(),
            mItems.get(position).getBullet());
        } else {
            btv = (BulletedTextView) convertView;
            btv.setText(mItems.get(position).getText());
            btv.setBullet(mItems.get(position).getBullet());
        }
 
        return btv;
    }
}

That’s pretty much all there is to it! The full source code is available if you would like to download it. It is licensed under the Apache 2 open source license. I welcome any ideas for improvements!