How to programmatically create a round cornered border using ShapeDrawable in android?

Question

I need to create a border with rounded corners programatically by extending ShapeDrawable. I need to have a black border with rounded corners with the pixels on the outside being white and the inner pixels being transparent. The code I have at the moment has multiple problems, of which are that it does not create a smooth corner that is the same thickness as the border and that the outer pixels of the border are transparent and not white.

Here is a picture of the corners I am currently getting corner

Here is the code where I am passing Color.TRANSPARENT for 'fill' in the constructor:

public class CustomShape extends ShapeDrawable {
 private final Paint fillpaint, strokepaint;
public CustomShape(int fill, int strokeWidth,int radius) {

    super(new RoundRectShape(new float[] { radius, radius, radius, radius, radius, radius, radius, radius }, null, null));
    fillpaint = new Paint(this.getPaint());
    fillpaint.setColor(fill);
    strokepaint = new Paint(fillpaint);
    strokepaint.setStyle(Paint.Style.STROKE);
    strokepaint.setStrokeWidth(strokeWidth);
    strokepaint.setColor(Color.BLACK);
}



@Override
protected void onDraw(Shape shape, Canvas canvas, Paint paint) {
    shape.draw(canvas, fillpaint);
    shape.draw(canvas, strokepaint);
}

}

tried to extend Drawable (and do a custom dtaw) instead of ShapeDrawable? — pskink, Nov 24 '13 at 08:50

score 30 · Answer 1 · edited Jun 20 '20 at 09:12

30

If you need evenly rounded corners (and from your example it seems you do) you can simply use GradentDrawable with a solid color

GradientDrawable gd = new GradientDrawable();
gd.setColor(Color.RED);
gd.setCornerRadius(10);
gd.setStroke(2, Color.WHITE);

view.setBackground(gd);

GradientDrawable documentation can be found here.

Edit: For each corner separately

You can specify radius of each corner separately using setCornerRadii (float[] radii) method. "For each corner, the array contains 2 values, [X_radius, Y_radius]. The corners are ordered top-left, top-right, bottom-right, bottom-left. This property is honored only when the shape is of type RECTANGLE.

It is recommended to invoke mutate() before changing this property.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 16 '15 at 09:27

SGal

1,072
12
13

Is there possibility to specify leftCornerRadius and rightCornerRadius? – Chandru Oct 06 '15 at 06:52
additionally added a note how each corner can be rounded separately – SGal Dec 02 '15 at 18:16

score 1 · Answer 2 · answered Sep 13 '21 at 15:52

Instead of GradientDrawable, its better to use ShapeDrawable with RoundRectShape, here is an example of it:

// individualRoundedCorners
val roundCorners = floatArrayOf(
    topLeftRadius, topLeftRadius,
    topRightRadius, topRightRadius,
    bottomRightRadius, bottomRightRadius,
    bottomLeftRadius, bottomLeftRadius
)

or

// similarCornerRadius
val roundCorners = FloatArray(8) { cornerRadius }

then the drawable itself

val shapeDrawable = ShapeDrawable().apply {
        shape = RoundRectShape(roundCorners, null, null)
        paint.color = Color.RED
    }

more about RoundRectShape

score 0 · Answer 3 · edited May 23 '17 at 12:02

You can implement a custom drawable. Following is the example of the xml.

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <solid android:color="#ffffffff"/>    

    <stroke android:width="3dp"
            android:color="#ff000000"
            />

    <padding android:left="1dp"
             android:top="1dp"
             android:right="1dp"
             android:bottom="1dp"
             /> 

    <corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" 
     android:topLeftRadius="7dp" android:topRightRadius="7dp"/> 
</shape>

Save this xml in the drawable folder of your project. Now use it like a normal drawable for any widget. For example: android:background="R.drawable.round_shape"

This example is referenced following link.

enriquep92 · Answer 4 · 2017-06-15T15:27:26.407

0

In addition to specify the round corner dimens you can use GradientDrawable and the method setCornerRadii()

GradientDrawable d = new GradientDrawable();
d.setCornerRadii({5.0f,5.0f,5.0f,5.0f});
textViewExample.setBackgroundResource(d);

edited Jun 15 '17 at 15:27

answered Jun 13 '17 at 09:40

enriquep92

1
1

score 0 · Answer 5 · answered Jun 14 '17 at 05:51

0

GradientDrawable drawable = (GradientDrawable)image.getBackground();
drawable.setGradientRadius(radiuspx);

answered Jun 14 '17 at 05:51

inhogo

253
3
9

score 0 · Answer 6 · answered Jun 22 '20 at 08:33

 setCornerRadii(new float[] {
                    topLeftRadius, topLeftRadius,
                    topRightRadius, topRightRadius,
                    bottomRightRadius, bottomRightRadius,
                    bottomLeftRadius, bottomLeftRadius
            });

How to programmatically create a round cornered border using ShapeDrawable in android?

6 Answers6

Linked