How to draw on ActionBar tab when using ActionBarSherlock in Android?

Question

I am using ActionBarSherlock to provide ActionBars for pre HoneyComb devices.

My Activity has four fragments namely 1. User 2. Chat 3. Video 4. Extra, see image

I have created actionBar using following code:-

            actionBar = getSupportActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        actionBar.setTitle("Meeting");
        actionBar.setDisplayShowHomeEnabled(false);
        actionBar.setDisplayShowCustomEnabled(false);
        actionBar.setDisplayShowTitleEnabled(false);

        /* Set Custom view */


        ActionBar.Tab tab = actionBar.newTab();
        // tab.setText("Meeting Users");
        tab.setIcon(R.drawable.users);
        tab.setTabListener(this);
        actionBar.addTab(tab);

        tab = actionBar.newTab();
        // tab.setText("Chat");
        tab.setIcon(R.drawable.chat);
        tab.setTabListener(this);
        actionBar.addTab(tab);

        tab = actionBar.newTab();
        // tab.setText("Video");
        tab.setIcon(R.drawable.video_call);
        tab.setTabListener(this);
        tab.select();
        actionBar.addTab(tab);

        tab = actionBar.newTab();
        // tab.setText("Extra");
        tab.setIcon(R.drawable.extra);
        tab.setTabListener(this);
        actionBar.addTab(tab);

I want to draw something on those tabs, for example draw and/OR blink on chat tab, whenever chat messages arrives and user is on some other tab.

How can I do this ? please help.

Answer 1

This is How I solved my problem, Hope it can be useful for someone else too....

First I created a CutomImageView by extending ImageView

package com.myexample.newsessionwindowsrbrdemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.renderscript.Font.Style;
import android.widget.ImageView;

public class CustomImageView extends ImageView {
    private int notificationCount;

    /**
     * @param context
     */
    public CustomImageView(Context context) {
        super(context);
        notificationCount = 0;
    }

    public synchronized void incrementNotification() {
        notificationCount--;
        this.invalidate();
    }

    public synchronized void decrementNotification() {
        notificationCount++;
        this.invalidate();
    }

    /**
     * @return the notificationCount
     */
    public synchronized int getNotificationCount() {
        return notificationCount;
    }

    /**
     * @param notificationCount
     *            the notificationCount to set
     */
    public synchronized void setNotificationCount(int notificationCount) {
        this.notificationCount = notificationCount;
        this.invalidate();
    }

    /*
     * (non-Javadoc)
     * 
     * @see android.widget.ImageView#onDraw(android.graphics.Canvas)
     */
    @Override
    protected void onDraw(Canvas canvas) {
        System.out.println("OnDraw is called");
        super.onDraw(canvas);
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.FILL);
        paint.setFakeBoldText(true);
        paint.setTextSize(15);
        canvas.drawText(String.valueOf(notificationCount), 15, 20, paint);
    }

}

Then While creating tabs, I used this image as

/* Set Custom view */

    mView = new CustomImageView(this);
    mView.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
            LayoutParams.FILL_PARENT));

    mView.setBackgroundResource(R.drawable.users);
    ActionBar.Tab tab = actionBar.newTab();
    tab.setCustomView(mView);
    tab.setTabListener(this);
    actionBar.addTab(tab);

Now whenever the notification changes I call increment/decrement or setter method of CustomImageView and new Notifications are displayed on the image..

Suggestions to improve this solution are really welcome...