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

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.

https://developer.android.com/training/basics/actionbar/styling.html — The Demz, Oct 06 '14 at 15:12

score 3 · Answer 1 · answered Aug 07 '12 at 09:38

3

Use custom view for your tabs

  ActionBar.Tab tab = getSupportActionBar().newTab();
  tab.setCustomView(R.layout.custom_tab_view);

Then you can get views on your custom layout and make blinking

answered Aug 07 '12 at 09:38

Georgy Gobozov

13,633
8
72
78

If I add a custom view the icon disappears... How I can get that working please help.. – Amit Aug 07 '12 at 09:44
thanks for the code... That will work I know, but I want to draw text on image i.e facebook notifications.. or something like SO notifications can also work... I have tried extending the ImageView and using it but the result not as expected. Looks like I will have to get dirty with Paint/ Canvas... Any suggestions ? – Amit Aug 07 '12 at 10:50
take a look here http://stackoverflow.com/questions/3404582/adding-text-to-imageview-in-android maybe it will be helpfull – Georgy Gobozov Aug 07 '12 at 10:54

score 1 · Accepted Answer · answered Aug 10 '12 at 07:26

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

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

2 Answers2

Linked