Actionbar custom drawable menuIcon not centered

Issue

I'm trying to add a custom Drawable which extends Drawable to my actionBar. This needs to be a custom drawable, since I want to draw on top of a supplied icon (but that's not the issue).

I've added the icon to the menu in my activity like so:

BadgedIconDrawable drawable = new BadgedIconDrawable(getContext())
    .setIcon(icon);
mMenu.add(0, menuItemId, 0, "")
    .setIcon(drawable)
    .setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);

In the BadgedIconDrawable I take a bitmap for the Icon which I then draw on the canvas:

@Override
public void draw(@NonNull Canvas canvas) {
    canvas.drawBitmap(mIcon.getBitmap(), null, new Rect(0, 0, mWidth, mHeight), mIconPaint);
}

Where the width and height are 24dp, which seems to be the right size for the icon.

The problem is that unlike a regular drawable that's passed to the setIcon for the mMenu, it doesn't seem to align correctly. I can't find how to get it aligned to the center. Image below illustrates the issue. The middle Icon is set through the BadgedIconDrawable.

Solution

EDIT

While the below snippet worked, I soon figured this would only work for the toolbar. Not anymore when used in a regular ImageView. So the trick is to use a Rect as to where the bitmap should be drawn. This would have the regular bounds, but when it should be translated, tell the custom Drawable to do so, by modifying the Rect like so:

// On the fragment/activity create the Drawable, translate it and add to the menu.

public void addBadgedActionBarButton(Drawable icon, int color, String badgeLabel, int menuItemId) {
    if (mMenu == null) {
        throw new IllegalStateException("mMenu = null, Are you sure you are calling addActionBarButton from initMenu()?");
    } else {
        BadgedIconDrawable drawable = new BadgedIconDrawable(getContext());
        drawable.translate(-drawable.getWidth() / 2, -drawable.getHeight() / 2, drawable.getWidth() / 2, drawable.getHeight() / 2)
                .setIcon(icon);

        mMenu.add(Menu.NONE, menuItemId, Menu.NONE, "")
                .setIcon(drawable)
                .setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
    }
}

// In the BadgedIconDrawable have a function that sets the mDstRect to the translated Rect.

public BadgedIconDrawable translate(int left, int top, int right, int bottom) {
    mDstRect = new Rect(left, top, right, bottom);
    return this;
}

// In the BadgedIconDrawable draw function use the mDstRect to draw on the correct position.

@Override
public void draw(@NonNull Canvas canvas) {
    canvas.drawBitmap(mIcon.getBitmap(), null, mDstRect, mIconPaint);
}

---

With some wild guessing I managed to try to add a negative top and left, which seems to place it in the correct spot. This seems to do the trick.

@Override
public void draw(@NonNull Canvas canvas) {
    int halfWidth = mWidth / 2;
    int halfHeight = mHeight / 2;
    canvas.drawBitmap(mIcon.getBitmap(), null, new Rect(-halfWidth, -halfHeight, halfWidth, halfHeight), mIconPaint);
}

Answered By - Raymond