1

What is the best way to add a badge icon (Circle with a number in it) to a button's drawable?

The drawable is just an image. I was hoping there would be a way to change what I am using as the buttons drawable, and perhaps set it to another drawable that has my image in the middle with a shape on the top right. I will need to update the text of the shape programatically.

Here is my button now:

<Button
     android:id="@+id/SpecialsMenuButton"
     android:layout_width="wrap_content"
     android:layout_height="fill_parent"
     android:textColor="#FFFFFF"
     android:text="@string/specials_tab_title"
     android:background="@drawable/menu_button"
     android:padding="4dp"
     android:drawableBottom="@drawable/collections_labels"
     android:textAppearance="?android:attr/textAppearanceSmall"
     android:layout_weight="1" />

I also created a circle badge:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval">
  <solid
    android:color="#F00" />
  <stroke
    android:width="2dip"
    android:color="#FFF" />
  <padding
    android:left="5dip"
    android:right="5dip"
    android:top="5dip"
    android:bottom="5dip" />
</shape>

I want to as easily as possible replace the android:drawableBottom with something that will have my image with the shape in the top right corner of the image. Will I be able to do this as a drawable or will I have to do this outside of the button?

Thanks!

PFranchise
  • 6,642
  • 11
  • 56
  • 73
  • see my answer here http://stackoverflow.com/questions/19009810/android-small-counter-next-to-a-button/19010184#19010184 – pskink Oct 07 '13 at 20:54

1 Answers1

3

If you want it as a Drawable you have to create a Bitmap where you draw the circle and the number onto the image of the button.

But I would do it like this: Place the badge as an ImageView and a TextView above your button, so you can easily edit the text of the TextView

Day
  • 844
  • 1
  • 9
  • 21
  • I believe I follow what you are saying. But just to clarify, when you say "above your button", do you mean as in a layer above the button? – PFranchise Oct 07 '13 at 20:58
  • 1
    @PFranchise Yes, I mean that the button is followed by an ImageView (or the View which shows the shape) and a TextView in the layout file, so it get's shown on top of the button. This will work in a `RelativeLayout` with correct positioning – Day Oct 07 '13 at 21:01
  • creating two Views plus a Container that wraps them is just waste of time amd resources, see my comment above how to do it just by decorating original Drawable – pskink Oct 07 '13 at 21:05