1

I'm trying to create a OvalShape Drawable with border. To give it an elevated effect, I'm adding shadows around the border.

Relevant code:

class Badge extends ShapeDrawable{

void Badge(){
    borderPaint = new Paint();
    borderPaint.setColor(borderColor);
    borderPaint.setStyle(Paint.Style.STROKE);
    borderPaint.setStrokeWidth(borderThickness);
    borderPaint.setAntiAlias(true);
    borderPaint.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);
}

@Override
public void draw(Canvas canvas) {
    super.draw(canvas);
    Rect r = getBounds();


    // draw border if needed
    if (borderThickness > 0) {
        drawBorder(canvas);
    }

    int count = canvas.save();
    canvas.translate(r.left, r.top);

    // draw text inside badge
    int width = this.width < 0 ? r.width() : this.width;
    int height = this.height < 0 ? r.height() : this.height;
    int fontSize = this.fontSize < 0 ? (Math.min(width, height) / 2) : this.fontSize;
    textPaint.setTextSize(fontSize);
    Rect textBounds = new Rect();
    textPaint.getTextBounds(text, 0, text.length(), textBounds);
    canvas.drawText(text, width / 2, height / 2 - textBounds.exactCenterY(), textPaint);

    canvas.restoreToCount(count);

}

private void drawBorder(Canvas canvas) {
    RectF rect = new RectF(getBounds());
    rect.inset(borderThickness / 2, borderThickness / 2);
    canvas.drawOval(rect, borderPaint);
    }
}

However, the border drawn is clipped at the edges as you can see in the image. Also as the size of the drawable decreases, the edges gets clipped more.

Clipped Edges

What modification should I do in the code to achieve a perfect circle?

Onik
  • 19,396
  • 14
  • 68
  • 91
PsyGik
  • 3,535
  • 1
  • 27
  • 44
  • It doesn't seem to fit your canvas, have you tried to scale your oval little? – Orkun Kocyigit Nov 17 '15 at 06:33
  • @OrkunKoçyiğit: I tried fiddling with rect.inset(). How do I do the scaling? – PsyGik Nov 17 '15 at 06:55
  • I cannot try this right now, but can you add clipChildren="false" and android:clipToPadding="false" to the layout that contains your shape plus any other layout that contains your layout and has the same size. – Orkun Kocyigit Nov 17 '15 at 09:55
  • @OrkunKoçyiğit: I tried your suggestion. Unfortunately it had no effect. – PsyGik Nov 17 '15 at 12:19

0 Answers0