Develop Reference

Android Drawable Marker with Bitmap Text Overlay too Small

I am creating a Marker with text but the text is showing only 3 characters and very small and it is right of the bit map image. I want the text to go across the middle of the icon and it big font. I manually increased setFontsize to larger size did not work and also drawText width and height still did not work.
private Drawable createMarkerIcon(Drawable backgroundImage, String text,
int width, int height) {
Bitmap canvasBitmap = Bitmap.createBitmap(width, height,
Bitmap.Config.ARGB_8888); //width, height,
// Create a canvas, that will draw on to canvasBitmap.
Canvas imageCanvas = new Canvas(canvasBitmap);
// Set up the paint for use with our Canvas
Paint imagePaint = new Paint();
imagePaint.setTextAlign(Align.CENTER);
imagePaint.setTextSize(26f); // 8f
// Draw the image to our canvas
backgroundImage.draw(imageCanvas);
// Draw the text on top of our image
imageCanvas.drawText(text, width /1, height / 1, imagePaint); //2 , 2
// Combine background and text to a LayerDrawable
LayerDrawable layerDrawable = new LayerDrawable(
new Drawable[]{backgroundImage, new BitmapDrawable(canvasBitmap)});
return layerDrawable;
}
I call this function:
d=createMarkerIcon(getResources().getDrawable(R.drawable.pointer_bubble_selected), markerTxt, 100, 100); //marker_green=23x37 29, 50

Here is the solution for the text overlay bound problem. Replace one line with all this lines:
// draw text to the Canvas center
Rect bounds = new Rect();
int x = (canvasBitmap.getWidth() - bounds.width())/2;
int y = (canvasBitmap.getHeight() + bounds.height())/2;
// Draw the text on top of our image
//imageCanvas.drawText(text, width /4, height / 4, imagePaint); //OLD
imageCanvas.drawText(text, x , y, imagePaint); //NEW

How to draw a bitmap on a canvas, respecting alpha values of the bitmap?

background
i have a master bitmap that i need to draw on it other bitmaps.
the master bitmap has some semi-transparent pixels (pixels with variant values for the alpha channel) , so that the other bitmaps that are drawn on it should be merged with it instead of overriding the colors completely.
the question
how can i set the canvas to draw the bitmaps on the master bitmap with respect to the semi-transparent pixels ?
note: the alpha is not for the whole bitmap/s . it's per pixel.

Canvas.setXfermode(Xfermode xfermode). There are a number of Xfermodes you can choose.

public void putOver(Bitmap master, Bitmap alphaBitmap){
Canvas canvas = new Canvas(matter);
Paint paint = new Paint();
paint.setXferMode(new PorterDuffXfermode(PorterDuff.Mode.DST_OVER));
canvas.drawBitmap(left, top, left+alphaBitmap.width, left+alphaBitmap.height, paint);
}

public Bitmap PutoverChange(Bitmap all, Bitmap scaledBorder) {
Paint paint = new Paint();
final int width = change.getWidth();
final int height = change.getHeight();
patt = Bitmap.createScaledBitmap(change, width, height, true);
Bitmap mutableBitmap = patt.copy(Bitmap.Config.ARGB_8888, true);
Canvas canvas = new Canvas(mutableBitmap);
scaledBorder = Bitmap.createScaledBitmap(border, width, height, true);
paint.setAlpha(100);
canvas.drawBitmap(scaledBorder, 0, 0, paint);
return mutableBitmap;
}
here the transparency is 100. you can modify it to 50 so it becomes semi transparent.

Android bitmap with border

I have this function, with this function I can show an image with a little rotation.
I'm trying to display a white border arround the bitmap.
Matrix m = new Matrix();
m.postRotate( rotation, center.x, center.y );
m.postTranslate( ( position.x - center.x ) - xOffset , position.y - ( center.x ) );
// set the current position to the updated position
positionMatrix.set( m );
renderAnimation();
c.drawBitmap( this.bitmap , positionMatrix, paint );
I'm trying to add the white border with this function: reference: stackoverflow border
RectF targetRect = new RectF(left+10, top+10, left + scaledWidth, top + scaledHeight);
Bitmap dest = Bitmap.createBitmap(this.bitmap.getWith() +20, this.bitmap.getHeight() +20, this.bitmap.getConfig());
Canvas canvas = new Canvas(dest);
canvas.drawColor(Color.WHITE);
canvas.drawBitmap(this.bitmap, null, targetRect, null);
c.drawBitmap( this.bitmap , positionMatrix, paint );
But, not works, can some help me

I think you should follow these steps:
Create a bitmap that width = yourImageWidth + boderThick and height= yourImageHeight + boderThick
Canvas draw a White rectangle (draw your background first)
Canvas draw your image (you need to center your image)
Maybe you made a mistake when calculating the side, or draw in a wrong order. Remember to use the same canvas when drawing. In your code i see you use c.draw and canvas.draw... That may cause the problem.
Refer to the code below:
Paint paint = new Paint();
paint.setColor(Color.WHITE);
paint.setStrokeWidth(3);
canvas.drawRect(0, 0, 200, 200, paint);//draw your bg
canvas.drawBitmap(bitmap, 20, 20, paint);//draw your image on bg
Sorry, i don't have much time to check your calculated size. I hope this can help.

How to draw text in a bitmap?

How can I draw text on a bitmap? I made this:
float width = Converter.convertDpToPixel(250, context);
float height = Converter.convertDpToPixel(40, context);
Bitmap myBitmap = Bitmap.createBitmap((int)width + 1, (int)height+1, Bitmap.Config.ARGB_8888);
Canvas myCanvas = new Canvas(myBitmap);
Paint paint = new Paint();
Typeface tanger = Typeface.createFromAsset(context.getAssets(),"fonts/Tangerine_Bold.ttf");
paint.setAntiAlias(true);
paint.setSubpixelText(true);
paint.setTypeface(tanger);
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.BLACK);
paint.setTextSize(55);
paint.setTextAlign(Align.CENTER);
myCanvas.drawText(quote, 16, 60, paint);
return myBitmap;
but only display a part of the text and I don´t know why.
Thank you

Your Bitmap is 40px in height, while your text is drawn starting from 60px below the top of your bitmap. Since your textSize is 55 part of it is still visible. You'll probably want to increase the height of your Bitmap.

Getting rendered text height, which is equivalent to rendered text width using paint.measureText

I have the following code to draw text.
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setTextSize(400);
paint.setColor(Color.WHITE);
paint.setAntiAlias(true);
paint.setTextAlign(Align.LEFT);
paint.setStyle(Style.FILL);
String text = "698";
Rect bounds = new Rect();
paint.getTextBounds(text, 0, text.length(), bounds);
int textWidth = bounds.width();
int textHeight = bounds.height();
Bitmap originalBitmap = Bitmap.createBitmap(textWidth,
textHeight, Bitmap.Config.ARGB_8888);
Canvas singleUseCanvas = new Canvas(originalBitmap);
singleUseCanvas.drawColor(Color.BLUE);
singleUseCanvas.drawText(text, 0, textHeight, paint);
canvas.drawBitmap(originalBitmap, 0, 0, null);
}
I am getting undesired outcome, which its right and bottom sides are being cropped.
I avoid right side cropping, by using
float textWidth = paint.measureText(text);
Bitmap originalBitmap = Bitmap.createBitmap((int)(textWidth + 0.5),
textHeight, Bitmap.Config.ARGB_8888);
I am getting the following improvement
Yet. My bottom still being cropped. May I know what is the correct way to obtained rendered text height, which is analogy to rendered text width using paint.measureText?

I think i would be helpful to have a look at this post:
Android Paint: .measureText() vs .getTextBounds()
It have a good survey about sizing of rendered text and also text height which is your concern.