aProgrammer aProgrammer - 2 months ago 13
Android Question

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

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

enter image description here

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

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..

enter image description here

Suggestions to improve this solution are really welcome...