CODEWITHSUNDEEP
androidandroid-tabhost
Darshan Prajapati
Darshan Prajapati

Reputation: 843

Drawing number badge like iPhone in Android

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.

Upvotes: 9

Views: 10061

Answers (3)

Yasitha Waduge
Yasitha Waduge

Reputation: 13540

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

Upvotes: 0

ccheneson
ccheneson

Reputation: 49410

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

Upvotes: 15

Egor
Egor

Reputation: 40228

You can achieve this by using FrameLayout: Common Layout Objects

Upvotes: 0

Related Questions