Animating ActionBar's icon

Question

I have an ActionBar icon (the main one on the left, not an action item) that I would like to animate.

I am setting my ActionBar's icon in my Activity like this:

getSupportActionBar().setIcon(icon)

where icon is a Drawable produced by a library that converts a custom XML view into a bitmap. This XML view is a RelativeLayout with a background image and a TextView on top.

Today, when I have to update the TextView I simply re-generate the icon and call setIcon again. Instead, I would like to get a hold of my TextView and apply some animation effect on it, like fade-out and then fade-in after updating it (maybe never having to call setIcon, just re-use the same one).

Not sure how to go about this. Can someone recommend an approach?

EDIT: trying this approach:

In MyActivity:

Drawable myDrawable = new MyDrawable();
supportActionBar.setIcon(myDrawable);

and:

public class MyDrawable extends Drawable {
    private Paint paint;
    private RectF rect;

    public MyDrawable() {
        this.paint = new Paint();
        this.rect = new RectF();
    }

    @Override
    public void draw(Canvas canvas) {
        paint.setARGB(255, 0, 255, 0);
        paint.setStrokeWidth(2);
        paint.setStyle(Paint.Style.FILL);

        rect.right = 20f;
        rect.bottom = 20f;

        canvas.drawRoundRect(rect, 0.5f, 0.5f, paint);
    }

    @Override
    public void setAlpha(int alpha) {
        paint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(ColorFilter cf) {
        paint.setColorFilter(cf);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.OPAQUE;
    }
}

Nothing shows up. I verified that onDraw gets called. Something suspicious to me is that canvas has both height & width set to 1.

Answer 1

A proper approach for it would be to forget the XML layout and create a custom Drawable.

An instance of this custom drawable will be set to the icon on the ActionBar and call invalidateSelf() whenever necessary to redraw (due to animation, for example).

The drawable can hold reference to other drawables (e.g. BitmapDrawable to have something from the /res/ folder or a Color or Gradient drawable for a background shade) and call (for example) bgDraw.draw(canvas) during the onDraw callback.

It can also draw stuff directly on the canvas that is given to it during onDraw callback. With the canvas you can draw circle, lines, areas, path and text directly on it.

edit:

very simple animation example (didn't check the code, likely typos):

private long animationTime;
public void doAnimation(){
    animationTime = System.currentTimeMilis() + 3000; // 3 seconds
    invalidateSelf();
}

public void onDraw(Canvas canvas){
    // do your drawing.
    // You can use difference between
    // currentTimeMilis and animationTime for status/position
   ...

    // at the end
    if(animationTime > System.currentTimeMilis())
         invalidateSelf();
}