How to create ChatHead style ImageView?

Question

I've created an ImageView subclass which utilizes a BitmapShader , Paint , and the Canvas to draw the image into a circle creating a circular ImageView feel and look. One thing Facebook's ChatHeads do is put a notification box on top of their ImageView stating how many new messages there are. I would like to mimic this look and be able to apply a notification box on top of my CircularImageView . Here is an example of what I'm talking about:

Notice the red box with the number one in the photo? I would like to place something like that above my ImageView but am unsure how I would go about this. Perhaps I could override the onDraw method and use the drawText method on the canvas object but how would I provide the correct coordinates for the text? Are the coordinates relative to the ImageView ?

So, to sum it all up, what would be the best approach to placing a notifcation box over an ImageView ?

Answer 1

The solution to my problem was precisely what I thought. I had to override the onDraw method and after drawing the Bitmap to the Canvas in a circle (already done before my question), I just had to call the drawText method on the Canvas instance which draws over whatever was previously drawn.

Here's the code:

BitmapDrawable bitDraw = (BitmapDrawable) this.getDrawable();
Bitmap bitmap = bitDraw.getBitmap();

//paint for the text
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.WHITE);
paint.setTextSize((int) getTextSize() * scale);
paint.setShadowLayer(1f, 0f, 1f, Color.BLACK);

//draw the text to specific position
Rect bounds = new Rect();
paint.getTextBounds(String.valueOf(getNotificationAmount()), 0, String.valueOf(getNotificationAmount()).length(), bounds);
int x = bitmap.getWidth() - bounds.width();
int y = bitmap.getHeight() - bounds.height();
canvas.drawText(String.valueOf(getNotificationAmount()), x, y, paint);

Note, the bitmap object was already drawn to the canvas as a circle and was not the emphasis of this question, therefore I did not post that code. All that's left is playing around with the x and y values to get the appropriate positioning. Oh and if you want to put the red rectangle behind the text I assume you'd have to do something similar just with a rectangle. I hope this helps anyone stuck with a similar problem!