1

I want to draw texts on the sides of a circle and another one below it. I edited the code in this answer but the problem is that the circle and arc are taking the whole space of the rect, which makes no space for the text to be drawn.

Here is my code

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // getHeight() is not reliable, use getMeasuredHeight() on first run:
    // Note: mRect will also be null after a configuration change,
    // so in this case the new measured height and width values will be used:
    if (mRect == null) {
        // take the minimum of width and height here to be on he safe side:
        centerX = getMeasuredWidth() / 2;
        centerY = getMeasuredHeight() / 2;
        radius = Math.min(centerX, centerY);

        // mRect will define the drawing space for drawArc()
        // We have to take into account the STROKE_WIDTH with drawArc() as well as drawCircle():
        // circles as well as arcs are drawn 50% outside of the bounds defined by the radius (radius for arcs is calculated from the rectangle mRect).
        // So if mRect is too large, the lines will not fit into the View
        int startTop = STROKE_WIDTH / 2;
        int startLeft = startTop;

        int endBottom = 2 * radius - startTop;
        int endRight = endBottom;

        mRect = new RectF(startTop, startLeft, endRight, endBottom);
    }


    // subtract half the stroke width from radius so the blue circle fits inside the View
    canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH / 2, mBasePaint);


    // Or draw arc from degree 192 to degree 90 like this ( 258 = (360 - 192) + 90:
    // canvas.drawArc(mRect, 192, 258, false, mBasePaint);

    // draw an arc from 90 degrees to 192 degrees (102 = 192 - 90)
    // Note that these degrees are not like mathematical degrees:
    // they are mirrored along the y-axis and so incremented clockwise (zero degrees is always on the right hand side of the x-axis)
    canvas.drawArc(mRect, 270, mTemp * 6, false, mDegreesPaint); // Each degree in the temp scale = 6 degrees on circle
    canvas.drawArc(mRect, 270 + mSeparator * 6, 3, false, mSeparatorPaint); // The separator size = 3 degrees

    // subtract stroke width from radius so the white circle does not cover the blue circle/ arc
    canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH, mCenterPaint);

    drawCenter(canvas, mTextPaint, mTemp + "°");

    canvas.drawText("Temp 1", mRect.centerX(), radius * 2, mTextPaint);
}

This code produces what I need as an arc and circles, but I'm not able to draw degrees on the circle sides and a text below it

Any help??

Community
  • 1
  • 1
Motassem Jalal
  • 1,254
  • 1
  • 22
  • 46
  • Reduce radius of the circle by getting [mTextPaint.measureText()](https://developer.android.com/reference/android/graphics/Paint.html#measureText%28java.lang.String%29). Something like `radius = (mWidth - mTextPaint.measureText()) / 2;` – Abbas Aug 31 '16 at 08:57
  • @Abbas what is the mWidth exactly? Is it the mRect.getWidth()? – Motassem Jalal Aug 31 '16 at 09:03
  • `mWidth` is the width of you custom view. that you pass on in `onMeasure()`. – Abbas Aug 31 '16 at 09:05
  • @Abbas That made the circle look very small and the arc disappeared. – Motassem Jalal Aug 31 '16 at 09:14
  • Well you'll have to play around a bit with sizes and ratios. The arcs probably moved to the left so you'll have to adjust position of the arc with circle too. I can only do so much without the entire code. – Abbas Aug 31 '16 at 09:21

0 Answers0