Adding badge to tab in android

Question

i want to add badge to tab in my app as in iPhone.

Screen shot of badge used in iPhone is in the following link:

Answer 1

I also looked for a solution for this in the android sdk and found none so i went and wrote a custom TabWidget for it.

The short version:

• Extend the TabWidget class and override the method: drawChild (Canvas canvas, View child, long drawingTime)
• In the painting you simply draw a Bitmap ontop of the canvas. You get the x location of the child with child.getRight() and subtract the width of your badge Bitmap. Also draw the text for the badge number ontop of that.
• To keep a state for each tab you could use a HashMap with keys for the index of each tab.
• To be able to update the tabs from anywhere i used a singleton class with the widget inside that i initialize from the main activity.

More info can be found here, including the source code for an example android project:

http://nilisoft.com/?p=622

Enjoy!

Answer 2

This is possible by using the Android ViewBadger. Check This

Answer 3

You want to re-draw image of tab have look on this answer Updating Android Tab Icons

Answer 4

This is an example of How to add a badge in tab

chat_tab.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip" 
    android:layout_height="64dip"
    android:layout_weight="1" 
    android:layout_marginLeft="-3dip" 
    android:layout_marginRight="-3dip" 
    android:orientation="vertical" 
    android:background="@drawable/tab_indicator" >

    <ImageView
        android:id="@+id/chat_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/chat_icon"
        android:layout_centerHorizontal="true"/>

    <TextView
        android:id="@+id/new_notifications" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/chat_icon"
        android:layout_toRightOf="@+id/chat_icon"
        android:layout_marginLeft="-8dp"
        android:layout_marginTop="0dp"
        android:paddingTop="2dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingBottom="2dp"
        android:textSize="8sp"
        android:textStyle="bold"
        android:textColor="@android:color/primary_text_dark"
        android:background="@drawable/badge"
        android:visibility="gone"/>

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chat"
        style="@android:attr/tabWidgetStyle"
        android:textColor="@android:color/tab_indicator_text"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"/>


</RelativeLayout>

This is badge.xml (red circle for notifications background),TextView id:new_notifications background

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval" >

    <stroke android:width="2dp" android:color="#FFFFFF" />

    <corners android:radius="10dp"/>

    <padding android:left="2dp" />

    <solid android:color="#ff2233"/>

</shape>

Then in the code you can simply do

LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View chatTab = inflater.inflate(R.layout.chat_tab, null);

        tvNewNotifications = (TextView) chatTab.findViewById(R.id.new_notifications);

        intent = new Intent().setClass(MainTab.this, Chat.class);
        tabSpec = tabHost
                .newTabSpec("chat")
                .setIndicator(chatTab)
                .setContent(intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP));

As you can see my Relative Layout has a background @drawable/tab_indicator the tab indicator.xml is the framework's standard drawable of the tab,which i got from the sdk,i suggest you should also get it from the folder of the api in sdk as you also need to copy some images from the drawable folders,you can find it your_sdk_drive:\sdk\platforms\android-8

Answer 5

After tweaking around with a few other solutions I came up with something simple and hope this would help someone.

create a custom tab layout tab_badge.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent">

<TextView
    android:id="@+id/tab_badge"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:background="@drawable/badge_background"
    android:gravity="center"
    android:layout_centerVertical="true"
    android:textColor="@color/colorWhite"
    android:textSize="20sp"
    android:textStyle="bold"/>

<TextView
    android:id="@+id/tab_text"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textSize="16sp"
    android:textColor="@color/colorWhite"
    android:text="test"
    android:textStyle="bold"
    android:gravity="center"
    android:textAppearance="@style/Widget.AppCompat.Light.ActionBar.TabText"
    android:layout_toRightOf="@+id/tab_badge"/>

</RelativeLayout>

badge_background.xml is an oval drawable filled with the color you want for the badge

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<solid android:color="@color/colormaterialred500" />
</shape>

Extend textview to get myBadgeView class:

public class myBadgeView extends TextView {

private View target;

public myBadgeView(Context context, View target) {
    super(context);
    init(context, target);
}

private void init(Context context, View target) {
    this.target = target;
}

public void updateTabBadge(int badgeNumber) {
    if (badgeNumber > 0) {
        target.setVisibility(View.VISIBLE);
        ((TextView) target).setText(Integer.toString(badgeNumber));
    }
    else {
        target.setVisibility(View.GONE);
    }
}
}

In your activity declare the tablayout as follows:

tabLayout = (TabLayout) findViewById(R.id.tab_layout);
TabLayout.Tab tab1 = tabLayout.newTab();
    tab1.setCustomView(R.layout.tab_badge);
    TextView tab_text_1 = (TextView) tab1.getCustomView().findViewById(R.id.tab_text);
    tab_text_1.setText("Tab1");
    tabLayout.addTab(tab1);
    badge1 = new myBadgeView(this, tab1.getCustomView().findViewById(R.id.tab_badge)); tab1.getCustomView().findViewById(R.id.tab_badge);

 //set the badge for the tab
    badge1.updateTabBadge(badge_value_1);