7

How can I dynamically update the icon for an ActionBar MenuItem to show a 'red badge' with a number? (conceptually similar to "unread message count')

I'm using ActionBarSherlock in my Android application, targeting API level 10+. My application is for mobile data capture and, sometimes, the user cannot immediately submit new data but must save it locally on the phone (e.g. when connectivity is poor).

Whenever there are 'unsubmitted' items stored locally on the phone, I'd like to show the user a menu item (in the Action Bar) so that they can click over to the UnsubmittedItems activity and trigger an upload manually.

Ideally, this menu item will have some graphical representation of the number of unsubmitted items (similar to how an email or sms app shows the number of unread messages as a badge). Currently, I'm just doing:

unsubmittedMenuItem.setTitle( Integer.toString(numUnsubmitted) );

And this works, but two issues: I'd prefer to use the Icon and keep the Title as something intelligible ("Unsubmitted") and, also, I'd love to have some custom layout or design here, such as a red circle background behind the number.

Thoughts on how to accomplish this? So far my research suggest two possibilities:

  1. Use a level list drawable that is precreated for some range of numbers (e.g. 1, 2, 3... 10+) and then unsubmittedMenuItem.getIcon().setLevel( numUnsubmitted )
  2. Build the entire bitmap entirely dynamically, using the Bitmap and Canvas APIs

These are similar in the sense that I'm rendering the text into a bitmap (either offline like #1 or on the fly like #2) but it would be great to leverage the 'native' text rendering of the ActionBar if possible and simply insert a red circle behind it like in a TextView.

Is there some way to set a custom layout just for the icon drawable? (NOT a full actionLayout, just for the icon?)

Mike Repass
  • 6,825
  • 5
  • 38
  • 35

1 Answers1

6

There are a lot of ways to do this:

  1. Use LayerDrawable and stack badge images on top of your icon image.
  2. Write a custom class which extends from Drawable and draws the icon and badge manually.
  3. Use a custom action item view with your icon in an ImageView with a TextView overlay for the badge.
Jake Wharton
  • 75,598
  • 23
  • 223
  • 230
  • thank you Jake (I'm a huge fan of your work btw). Let me spend some time trying to tackle #3 - the literature is rather confusing as to what is a custom layout for the entire action bar vs. a specific menu item, but I'll dig deeper. – Mike Repass Oct 24 '12 at 21:59
  • 1
    Option #3 is definitely the way to go and is actually quite easy, once you successfully wade through all the Android concepts/abstractions. I mistakenly thought that a 'custom action view' took over the entire action bar (as in the expanding search box example frequently cited), but if you just do wrap_content you can author a custom 'icon' quite easily. Thanks! – Mike Repass Nov 07 '12 at 22:56
  • @MikeRepass I'm faced with similar issue, could you share your experience with us please? – Ali Apr 06 '13 at 20:05
  • 2
    @Jake : I had tried Option 3,but this results in a view in an actionbar which when click doesn't display the default background which gets displayed when an actionItem has been tapped. Moreover, the height and width of an actionItem doesn't include padding like for this customView. Option 2 : I tried to accomplish the same using my CustomDrawable but it is displaying at the bottom right corner of the actionItem.(But still I would like to go for CustomDrawable). Do you have any idea on how to display a customDrawable at the center of an actionItem. – AndoAiron May 19 '13 at 05:30