Drawing number badge like iPhone in Android

Question

a busy cat

I want to draw the number badge as shown in the above image on the Chats tab. That number badge shows number of new unread messages in chat. So how can I draw this kind of custom number badge. Is there any inbuilt API in Android SDK? Thanks in advance.

score 15 · Accepted Answer · edited May 23 '17 at 12:25

Look at my answer here for widgets/app.

You can use shapecount.xml

res/layout/tabicon.xml

<RelativeLayout
    android:orientation="vertical"
    android:background="@null"
    android:id="@+id/rlayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
    <ImageView 
            android:id="@+id/icon"
            android:src="@android:drawable/ic_menu_mylocation" <!-- Just for test -->
            android:layout_margin="0dp"
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content"/>

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="50" android:textSize="12dp" android:textStyle="bold"  
        android:background="@drawable/shapecount"
        android:textColor="#FFFFFF"
        android:paddingLeft="3dp" android:paddingRight="3dp"
            android:layout_margin="0dp"
        android:layout_alignBottom="@+id/rlayout"
        android:id="@+id/txtCount" />

</RelativeLayout>

When creating your tab:

LayoutInflater inflater = LayoutInflater.from(this);
View view = inflater.inflate(R.layout.tabicon, null);
final TextView txtCount = (TextView) view.findViewById(R.id.txtCount);

spec = tabHost.newTabSpec("artists").setIndicator(view).setContent(intent);

Now you can use txtCount to update the number in the tab's icon. See the post I pointed out above for an example of TimerTask to test this.

You will have to arrange the layout as you wish also

hi such a nice way of implementing badge,but i got a problem,when using custom view for tab indicator,the background of the view should be matching others tabs background,how can i access the default tab indicator drawable?? — Muhammad Babar, May 02 '13 at 11:41
Finally i hacked into the sdk and got the tab_indicator.xml and other drawables.... — Muhammad Babar, May 02 '13 at 12:06
Badge like iphone is really simple to make in android...credit goes to your idea,,,i didn't even knew that we can set a view in indicator of tab :P — Muhammad Babar, May 02 '13 at 13:20

score 0 · Answer 2 · answered Oct 08 '14 at 14:33

0

There is a convenient library to achieve this easily. Just a single jar file which can be added to your project.

answered Oct 08 '14 at 14:33

Yasitha Waduge

13,180
5
35
42

score 0 · Answer 3 · answered May 18 '11 at 12:50

0

You can achieve this by using FrameLayout: Common Layout Objects

answered May 18 '11 at 12:50

Egor

39,695
10
113
130

This doesn't answer the question at all – Crake Jun 13 '13 at 15:28

Drawing number badge like iPhone in Android

3 Answers3

Linked