Android: Showing number of new items count on tabs

Question

I have an android application where the home screen is a tab view. One of the tab goes to an "Inbox" activity. I'd like to show a number that indicates the number new messages. This seem to be a standard feature on iPhone apps. Is there any sort of system support for this? If not, what's the easiest way to implement this effect for android tabviews?

Answer 1

From what I can read in the Android Sourcecode (TabHost.java) there is no way to do it with standard widgets in a similar fashion like iPhone.

What you could do is:

1. Whenever the inbox count was changed, delete all tabs using http://developer.android.com/reference/android/widget/TabHost.html#clearAllTabs()
2. Then, create the tabs again using http://developer.android.com/reference/android/widget/TabHost.html#addTab(android.widget.TabHost.TabSpec) but make sure the TabSpec is initialized with [http://developer.android.com/reference/android/widget/TabHost.TabSpec.html#setIndicator(java.lang.CharSequence, android.graphics.drawable.Drawable)][1] . You can pass your own drawable there and use it to paint the badge yourself.

It's no replacement for the iPhone Style badge though, as the iPhone badge is quite nicely in the topRight corners of the label. And so far there is no way to change it.

On the other hand, this being all Java someone could extend the TabHost class and add support for iPhone style badges.

[1]: http://developer.android.com/reference/android/widget/TabHost.TabSpec.html#setIndicator(java.lang.CharSequence, android.graphics.drawable.Drawable)

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

Answer 3

You can download the viewbadger.jar file from here and can use this example for reference https://github.com/jgilfelt/android-viewbadger

Here is a sample code

TabWidget tabs = (TabWidget) findViewById(android.R.id.tabs); BadgeView badge = new BadgeView(context, tabs, 3); badge.setTextSize(12); badge.setBadgePosition(BadgeView.POSITION_TOP_RIGHT); badge.setText("0")); badge.toggle();

Answer 4

I assume you have a list of your objects. You can create a property "read" for the object, and then count the number of objects with read = false in the moment of opening the tab.