Drawing number badge like iPhone in Android

Question

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.

Emigrate

Answer 1

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

Remembrancer

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?? – Begonia

Finally i hacked into the sdk and got the tab_indicator.xml and other drawables.... – Begonia

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 – Begonia

Answer 2

You can achieve this by using FrameLayout: Common Layout Objects

Myriam

This doesn't answer the question at all – Silvereye

Answer 3

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

Limburg