7

I want to display a point and a text on top of an image. I have tried several tutorial on overlaying bitmap, but it doesn't seem to work. Here is the code which displays the background image.

mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.roomplan);
mIV = (ImageView)findViewById(R.id.ImageView01);
mIV.setImageBitmap(mBitmap); 
mIV.invalidate();

btnDraw = (Button)findViewById(R.id.Button01);
btnDraw.setOnClickListener(this);

Then on the OnClickListener, I define another bitmap and draw the point and the text.

Bitmap bmOverlay = Bitmap.createBitmap(mBitmap.getWidth(), mBitmap.getHeight(), 
    Bitmap.Config.ARGB_4444);
Canvas canvas = new Canvas(bmOverlay);
Paint paint = new Paint();
paint.setColor(Color.CYAN);
paint.setTextSize(20);
paint.setFlags(Paint.ANTI_ALIAS_FLAG);
canvas.drawText("You are here", 100, 100, paint);
canvas.drawPoint(30.0f, 50.0f, paint);
canvas.drawBitmap(bmOverlay, 0, 0, null);

Nothing is displayed on top of the background image, even when I remove the image. Any hint please?

Update: The working code

// get a reference to the background image
mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.raumplan_isst);

mIV = (ImageView)findViewById(R.id.ImageView01);

// create a mutable bitmap with the same size as the background image
Bitmap bmOverlay = Bitmap.createBitmap(mBitmap.getWidth(), mBitmap.getHeight(), 
    Bitmap.Config.ARGB_4444);
// create a canvas on which to draw
canvas = new Canvas(bmOverlay);

Paint paint = new Paint();
paint.setColor(Color.CYAN);
paint.setTextSize(20);
paint.setFlags(Paint.ANTI_ALIAS_FLAG);

// if the background image is defined in main.xml, omit this line
canvas.drawBitmap(mBitmap, 0, 0, null);
// draw the text and the point
canvas.drawPoint(fKoordX, fKoordY, paint);
canvas.drawText("You are here", fKoordX+3, fKoordY+3, paint);

// set the bitmap into the ImageView
mIV.setImageBitmap(bmOverlay);
springrolls
  • 1,331
  • 1
  • 14
  • 40
  • That's normal, you draw text and point BEFORE drawing the bitmap. Of course your bitmap will overlapped everything! – xandy Feb 15 '11 at 10:55
  • check out my answer [http://stackoverflow.com/questions/7320392/how-to-draw-text-on-image/10313272#10313272](http://stackoverflow.com/questions/7320392/how-to-draw-text-on-image/10313272#10313272) – Ashish Dwivedi Apr 25 '12 at 09:58

1 Answers1

5

What do you do with the canvas? Where is it used? (post some more code...)

Beside that the drawing order is wrong, you are overdrawing your text and point with the bitmap.

Edit:

I am a bit lost as I don't know which of your images should be the background and what image you already see... so i am guessing that mBitmap (the roomplan) is your background? Than add that to your layout as a background image and just use the ImageView to draw your overlay...

if your Overlay need a background image too, try that:

// overlay background
canvas.drawBitmap(myBmp, 0, 0, paint);
// draw the text and the point
canvas.drawText("You are here", 100, 100, paint);
canvas.drawPoint(30.0f, 50.0f, paint);

If your ImageView should have the roomplan as a background, try that:

// overlay background
canvas.drawBitmap(mBitmap, 0, 0, paint);
// draw the text and the point
canvas.drawText("You are here", 100, 100, paint);
canvas.drawPoint(30.0f, 50.0f, paint);
WarrenFaith
  • 57,492
  • 25
  • 134
  • 150
  • That's just it. The first code is in the `onCreate()` method and the second one is ìn the `OnClickListener`. Ok, since I got the same answer which is about drawing order, I'll try playing around a bit and get back to you ;) – springrolls Feb 15 '11 at 11:17
  • You need to apply the canvas somewhere. The canvas is where you draw on, but it must be used somewhere in the UI because when you don't use it, it will not be displayed... – WarrenFaith Feb 15 '11 at 11:19
  • @WarrenFaith Yes, got it. Now I can see the point and the text, but still no luck in overlaying. Could you give a hint? – springrolls Feb 15 '11 at 11:48
  • When you see the point and text, you it shouldn't be hard to draw the bitmap the same way you draw the point and text, but before it. If not, update the question with what you have, please – WarrenFaith Feb 15 '11 at 12:01
  • @WarrenFaith I've put the modified code. I can't see where I should set the background image. – springrolls Feb 15 '11 at 13:03
  • Ah sorry. But you're right, roomplan should be the background image. Anyway, it works now. I put the background image in main.xml as you suggested. Thanks!! – springrolls Feb 15 '11 at 13:30