I want to draw a rounded rectangle with drawRoundRect method in Android.
void drawRoundRect (RectF rect, float rx, float ry, Paint paint)
I'm using Android Studio, and my testing device use Android 6.0.1, API 23
This is part of my code. It works find when I put zeros in rx and ry.
public void draw(Canvas canvas){
canvas.drawColor(Color.WHITE);
canvas.drawRoundRect(rect, 0, 0, pnt);
}
This draws a black rectangle in my screen.
But when I try to make it rounded,
public void draw(Canvas canvas){
canvas.drawColor(Color.WHITE);
canvas.drawRoundRect(rect, 10, 10, pnt);
}
It draws nothing. This only draws white background....
I tried different numbers like 100, 3, 5, 0.03f etc in rx and ry,
but any numbers bigger than 0 make drawRoundRect() not working.
Is there anything wrong with my code...?
Make sure that coordinates in RectF that is used to draw rounded rectangle are correct. That means: rect.left < rect.right and rect.top < rect.bottom.
It seems that Android 7 corrects wrong coordinates itself and draws desired rounded rectangle, but Android 6 is drawing nothing if there is problem with coordinates.
you can try this we have a little calculation but it works awesomely
private void drawRoundedRect(Canvas canvas, float left, float top, float right, float bottom) {
float radius = getHeight() / 2;
canvas.drawCircle(radius, radius, radius, mainPaint);
canvas.drawCircle(right - radius, radius, radius, mainPaint);
canvas.drawRect(left + radius, top, right - radius, bottom, mainPaint);
}
or you can check this
RectF rect = new RectF(10,10,20,20);
canvas.drawRoundRect(rect , 0, 0, mPaint);
Try this,
Bitmap bitmap = Bitmap.createBitmap(
600, // Width
300, // Height
Bitmap.Config.ARGB_8888 // Config
);
Canvas canvas = new Canvas(bitmap);
canvas.drawColor(Color.WHITE);
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.RED);
paint.setAntiAlias(true);
int offset = 50;
RectF rectF = new RectF(
offset, // left
offset, // top
canvas.getWidth() - offset, // right
canvas.getHeight() - offset // bottom
);
int cornersRadius = 25;
canvas.drawRoundRect(
rectF, // rect
cornersRadius, // rx
cornersRadius, // ry
paint // Paint
);
mImageView.setImageBitmap(bitmap);
You could do this,
RectF rect = new RectF(0f, 0f, width, height);
canvas.drawRoundRect(rect , 0, 0, mPaint);
Related
I have this function that animate the image canvas from resource drawable with text on the front.
I want to rotate the a green "star" only so the text stay intact
The idea is to rotate only the image canvas but no the text.
How do I do that?
This code is for Android Java
private Bitmap writeTextOnDrawable(int drawableId, String text, ImageView imv_promo,boolean isAnim) {
Bitmap bm = BitmapFactory.decodeResource(ctx.getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true);
Typeface tf = Typeface.createFromAsset(ctx.getAssets(), "RobotoCondensed-Italic.ttf");
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(ctx.getResources().getColor(R.color.white));
paint.setTypeface(tf);
paint.setTextAlign(Paint.Align.CENTER);
paint.setTextSize(convertToPixels(mContext, 17));
Rect textRect = new Rect();
paint.getTextBounds(text, 0, text.length(), textRect);
Canvas canvas = new Canvas(bm);
//If the text is bigger than the canvas , reduce the font size
if (textRect.width() >= (canvas.getWidth() - 4)) //the padding on either sides is considered as 4, so as to appropriately fit in the text
paint.setTextSize(convertToPixels(mContext, 7)); //Scaling needs to be used for different dpi's
//Calculate the positions
int xPos = (canvas.getWidth() / 2) - 6; //-2 is for regulating the x position offset
int yPos = (int) ((canvas.getHeight() / 2) - ((paint.descent() + paint.ascent()) / 2));
canvas.save();
canvas.rotate((float) 25, xPos, yPos);
canvas.drawText(text, xPos, yPos, paint);
canvas.restore();
Animation animation;
if(isAnim) {
animation = new RotateAnimation(0, 360, canvas.getWidth() / 2, canvas.getHeight() / 2);
animation.setRepeatMode(Animation.RESTART);
animation.setRepeatCount(Animation.INFINITE);
animation.setDuration(20000L);
imv_promo.startAnimation(animation);
}
return bm;
}
I'm making a circle canvas and I want to add a border to it .
final int color = 0xffa19774;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawCircle(sbmp.getWidth() / 2+0.7f, sbmp.getHeight() / 2+0.7f,
sbmp.getWidth() / 2+0.1f, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(sbmp, rect, rect, paint);
How can I add a border around this canvas ?
You can draw a border using Paint.STYLE.STROKE. You need to do two separate calls to drawCircle():
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.parseColor("#BAB399")); // set fill color
canvas.drawCircle(sbmp.getWidth() / 2+0.7f, sbmp.getHeight() / 2+0.7f,
sbmp.getWidth() / 2+0.1f, paint);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10); // set stroke width
paint.setColor(Color.parseColor("#ffffff")); // set stroke color
canvas.drawCircle(sbmp.getWidth() / 2+0.7f, sbmp.getHeight() / 2+0.7f,
sbmp.getWidth() / 2+0.1f, paint);
To draw a border around a circle, you only need to draw two circles on to your canvas. Both circles have the same dimension however the circle below should have a stroke.
Also, to draw an image border, the circle below should be given a bigger radius than the one above.
public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
Bitmap finalBitmap;
if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
false);
else
finalBitmap = bitmap;
Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
finalBitmap.getHeight());
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f, finalBitmap.getHeight() / 2 + 0.7f, finalBitmap.getWidth() / 2 + 0.1f, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(finalBitmap, rect, rect, paint);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(20); // set stroke width
paint.setColor(Color.parseColor("#00ff00")); // set stroke color
canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f, finalBitmap.getHeight() / 2 + 0.7f, finalBitmap.getWidth() / 2 + 0.1f, paint);
return output;
}
The example above returns a bitmap circle image with a border.
This is the code to draw the stroke
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(20); // set stroke width
paint.setColor(Color.parseColor("#00ff00")); // set stroke color
canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f, finalBitmap.getHeight() / 2 + 0.7f, finalBitmap.getWidth() / 2 + 0.1f, paint);
I'm having problems while trying to rotate a picture with java android canvas.drawImage. I'm doing a little game, and I'm painting different pictures on the screen using my drawImage function. However now I want to rotate some little images, I have created a function called drawMirroredImage for this. However now this little images don't appear on the same place.
Here is my code:
public void drawImage(Image Image, int x, int y) {
canvas.drawBitmap(((AndroidImage) Image).bitmap, x, y, null);
}
public void drawMirroredImage(Image Image, int x, int y) {
canvas.save();
canvas.scale(-1.0f, 1.0f);
canvas.drawBitmap(((AndroidImage) Image).bitmap, x - canvas.getWidth(), y, null);
canvas.restore();
}
Anyone knows what I'm doing wrong?
Lot of thanks for helping
Following will work for you.
I found it somewhere on SO itself but don't remember where.
public static Bitmap getReflectionedBitmap(Context context,int resourceId,Bitmap originalImage,int reflectionGap) {
if(originalImage==null)
originalImage = BitmapFactory.decodeResource(context.getResources(),resourceId);
int width = originalImage.getWidth();
int height = originalImage.getHeight();
// This will not scale but will flip on the Y axis
Matrix matrix = new Matrix();
matrix.preScale(1, -1);
// Create a Bitmap with the flip matix applied to it.
// We only want the bottom half of the image
Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,
height / 2, width, height / 2, matrix, false);
// Create a new bitmap with same width but taller to fit reflection
Bitmap bitmapWithReflection = Bitmap.createBitmap(width,
(height + height / 2), Config.ARGB_8888);
// Create a new Canvas with the bitmap that's big enough for
// the image plus gap plus reflection
Canvas canvas = new Canvas(bitmapWithReflection);
// Draw in the original image
canvas.drawBitmap(originalImage, 0, 0, null);
// Draw in the gap
Paint deafaultPaint = new Paint();
deafaultPaint.setColor(0xffffffff);
canvas.drawRect(0, height, width, height + reflectionGap , deafaultPaint);
canvas.drawBitmap(reflectionImage, 0, height + reflectionGap, null);
Paint paint = new Paint();
LinearGradient shader = new LinearGradient(0,
originalImage.getHeight(), 0, bitmapWithReflection.getHeight()
+ reflectionGap, 0x70ffffff, 0x00ffffff, TileMode.CLAMP);
// Set the paint to use this shader (linear gradient)
paint.setShader(shader);
// Set the Transfer mode to be porter duff and destination in
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
canvas.drawRect(0, height, width, bitmapWithReflection.getHeight()
+ reflectionGap, paint);
return bitmapWithReflection;
}
I tweaked the snippet a little bit to use it with resource images as well.
Pass in null as parameter in place of Bitmap if you want to create reflection for images in resource.
I'm trying to clip the top-left and the top-right corners of Canvas in java. I understand you can just use addRoundRect for all the corners, but I'm unsure what to do for only the top corners.
This is what I currently have:
#Override
protected void onDraw(Canvas canvas) {
float radius = 12f;
Path clipPath = new Path();
RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
//uh...
//clipPath.addRoundRect(rect, radius, radius, Path.Direction.CW);
canvas.clipPath(clipPath);
super.onDraw(canvas);
}
You can use another overloading method addRoundRect() like this :
int width = view.getWidth();
int height = view.getHeight();
float[] radii = {0, 0, 0, 0, 0, 0, 0, 0};
if( mRadiusTop ) {
radii[0] = mRadius;
radii[1] = mRadius;
radii[2] = mRadius;
radii[3] = mRadius;
}
if( mRadiusBottom ) {
radii[4] = mRadius;
radii[5] = mRadius;
radii[6] = mRadius;
radii[7] = mRadius;
}
clipPath.addRoundRect(new RectF(0, 0, width, height), radii, Path.Direction.CW);
canvas.clipPath(clipPath);
I solved the problem by above code.
You can hack it. Just set the RectF larger by as many pixels as the radius of the rounded corners like this:
RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight() + 12.0f); // draw a larger rect
I guess that you would have to set the paint color to full transparency (0x00fffffff).
I need to draw a text using
canvas.drawText("1",x,y, paint);
But the problem is that the "text's center" doesn't match with the position I have given,Is there any way I can do the latter.I have done quite a lot of search on the topic,culdn't find any answer.Please help.
Thank You in advance
You'll want to set the alignment on your paint instance:
paint.setTextAlign(Paint.Align.CENTER);
prior to drawing.
See: http://developer.android.com/reference/android/graphics/Paint.html#setTextAlign(android.graphics.Paint.Align)
Edit:
Per your indication that you'd also like it centered vertically, I'd go with an approach similar to this:
paint.setColor(Color.WHITE);
paint.setTextAlign(Align.LEFT);
String text = "Hello";
Rect bounds = new Rect();
float x = 100, y = 100;
paint.getTextBounds(text, 0, text.length(), bounds); // Measure the text
canvas.drawLine(0, y, canvas.getWidth(), y, paint); // Included to show vertical alignment
canvas.drawLine(x, 0, x, canvas.getHeight(), paint); // Included to show horizsontal alignment
canvas.drawText(text, x - bounds.width() * 0.5f, y + bounds.height() * 0.5f, paint); // Draw the text
or, using the center align on the paint:
paint.setColor(Color.WHITE);
paint.setTextAlign(Align.CENTER);
String text = "Hello";
Rect bounds = new Rect();
float x = 100, y = 100;
paint.getTextBounds(text, 0, text.length(), bounds); // Measure the text
canvas.drawLine(0, y, canvas.getWidth(), y, paint); // Included to show vertical alignment
canvas.drawLine(x, 0, x, canvas.getHeight(), paint); // Included to show horizsontal alignment
canvas.drawText(text, x, y + bounds.height() * 0.5f, paint); // Draw the text