How can I draw this in canvas android [on hold]

Question

I am trying to draw this figure but I am unable to draw it.

I don't want to use any library. Just want to draw in canvas android.

Consider - center of circle is center of screen ie canvas.translate(centerX, centerY)

update:

@Override
    protected void onDraw(Canvas canvas) {
        radius = dip2px(getContext(), 150);//252
        canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
        canvas.save();
        canvas.translate(getWidth() / 2, getHeight() / 2);
        for (int i = -35; i <= 215; i += 1) {
            drawOuterLine(i, canvas);
        }
        canvas.restore();
    }

    private void drawOuterLine(int i, Canvas canvas) {
        Paint paint2 = new Paint();
        paint2.setAntiAlias(true);
        paint2.setColor(getResources().getColor(R.color.ruler_white));
        paint2.setStrokeWidth(dip2px(getContext(), 1));

        Coordinate coordinate = getCoordinate(radius, i);
        Coordinate coordinate1;
        float x = coordinate.getX();
        float y = coordinate.getY();
        float r;
        if (i == -35 || i == -11 || i == 15 || i == 39 || i == 65 || i == 89 || i == 115 || i == 139 || i == 165 || i == 189 || i == 215) {
            r = radius - padding;
            coordinate1 = getCoordinate(r, i);
            float x1 = coordinate1.getX();
            float y1 = coordinate1.getY();
            canvas.drawLine(-x1, -y1, -x, -y, paint2);
            String text = String.valueOf(showDegree[showDegreeCounter]);
            if (showDegreeCounter<10) showDegreeCounter++;
            Path path = getTextPath(text, mOutDegreePaint, i, radius
                    - padding - fontSize * 5 / 4);
            canvas.drawTextOnPath(text, path, 0, 0, mOutDegreePaint);
        } else if (i % 2 != 0) {
            r = radius - padding * 3 / 5;
            coordinate1 = getCoordinate(r, i);
            float x1 = coordinate1.getX();
            float y1 = coordinate1.getY();
            canvas.drawLine(-x1, -y1, -x, -y, paint2);
        }
    }

Here is the snap I have achieved but the problem is those degrees are also being rotated and I don't want that. Please help me with this.

Answer 1

It is a comprehensive problem but I can explain how to achieve the meter markings.

Using a combination of Canvas.drawArc() and PathDashPathEffect , we can achieve the markings. We'll use an arc for the current speed and arc for the leftover speed.

We define a value for the total number of degrees in the circle representing the speedometer. In that drawing it looks like about 270 degrees total is available.

float totalDegrees = 270.0f

Compute the percentage of the total speed that the current speed represents and assign that to a float variable.

    float currentSpeed = 20;
    float maximumSpeed = 100;
    float currentSpeedPercent = currentSpeed/maximumSpeed;

Multiply this value by the total degrees available to get the sweep angle for the first arc. So the start angle for the first arc will be 0 and the sweep angle will be what we just calculated.

     float sweepAngleCurrentSpeed = currentSpeedPercent * totalDegrees;
    float startAngleCurrentSpeed = 235.0f; // 235 degrees is based on starting the // speedometer at the angle shown in the drawing.

Now that we know the first arc, we can easily create the arc for the remaining speed. The start angle for that arc will be equal to the sweep angle of the first arc, and the sweep angle will be equal to 270(total degrees available) - startAngle.

float startAngleRemainingSpeed = startAngleCurrentSpeed + sweepAngleCurrentSpeed;
    float sweepAngleRemainingSpeed = totalDegrees - sweepAngleCurrentSpeed;

Create a Paint object that will be used to paint the tick marks.

Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE); // style must be set to STROKE in order to do tick
// mark dashes
paint.setPathEffect(new DashPathEffect(new float[] {10,20}, 0)); // Represents the dashes

Define a bounds that we're going to draw the speedometer in. Let's use a 100 X 100 rectangle as an example.

RectF bounds = new RectF(0,0,100,100);

Set a color for the tick marks for the current speed.

paint.setColor(Color.YELLOW);

Draw the arc for the current speed:

canvas.drawArc(bounds, startAngleCurrentSpeed, sweepAngleCurrentSpeed, true, paint);

Set the color for the tick marks of the remaining speed.

paint.setColor(Color.GRAY);

Draw the arc for the remaining speed:

canvas.drawArc(bounds, startAngleRemainingSpeed, sweepAngleRemainingSpeed, true, paint);

This would draw a basic unlabeled speedometer. Using math based on the bounds of the rectangle. You can determine where to position the tick marks. Or you can use ``` canvas.rotate()/canvas.translate()

to assist in placing the speed labels.