Badge on Android TabHost

Question

I want to implement the functionality same as was there in iPhone

I implemented the custom Tabhost same as in iPhone in the bottom bar. I can set two Icons for Normal/Selected state but I need the dynamic icon with number of notifications as given in Image.

Thanks

Tangy

Answer 1

Android ViewBadger may be the solution for you. (FYI, i haven't implemented it yet)

Here is the snap you can have as an output by this solution:

Sawmill

easy to use... BadgeViewer is the class that you will use.you can also copy instead of using it as library.. – Vladivostok

@Paresh Mayani i have used this BadgeViewer library and i am facing the problem here i have posted a question #26099624 – Syreetasyria

Answer 2

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

Delative