How do I draw an arc with gradient in Android?

Question

I need this picture

to be drawn in Android as a custom View (or something else). Additionally gradient should not be static, it should rotate depending on the input (imagine temperature from -10 to +40, it should be from full blue to full red with intermediate states).

I figured out that I need two bitmaps: a gradient rectangle and a masked arc. Then I could rotate the gradient rectangle and that's it. The point is I can't put a mask above (or under) the rectangle.

I was trying to reproduce this answer but didn't succeed. I only could achieve drawing an arc with gradient but obviously that's not enough. Also I know the following code is a mess but it was supposed to be a proof of concept.

class GradientArc(context: Context, attrs: AttributeSet) : View(context, attrs) {

    private val shader1: Shader = LinearGradient(375f,
        0f,
        425f,
        0f,
        Color.rgb(59, 242, 174),
        Color.rgb(101, 172, 242),
        Shader.TileMode.CLAMP)

    private val paint: Paint = Paint()

    val imagePaint = Paint().apply { setXfermode(PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        val conf: Bitmap.Config = Bitmap.Config.ARGB_8888
        val mImage: Bitmap = Bitmap.createBitmap(width, height, conf)
        val imageCanvas = Canvas(mImage)

        paint.setStrokeWidth(70f)
        paint.setStyle(Paint.Style.STROKE)
        paint.setStrokeCap(Paint.Cap.ROUND)
        paint.setAntiAlias(true)
        paint.setShader(shader1)

        val radius = 400
        val oval = RectF()
        val center_x = 500f
        val center_y = 500f

        oval[center_x - radius, center_y - radius, center_x + radius] = center_y + radius
        imageCanvas.drawArc(oval, 135f, 270f, false, paint)

        canvas.save()
        canvas.drawBitmap(mImage, 0f, 0f, imagePaint)
        canvas.restore()
    }
}

I guess nobody is going to write all this code to solve my problem but could you give me at least some examples? The examples should preferably contain gradient, mask and drawing some figure manually.

I found this article but I can't map it to my case because the author doesn't use custom figure and not all of the code examples work.

score 0 · Answer 1 · answered Mar 22 '21 at 07:55

0

I would suggest creating a bitmap (or any image resource) with the arch (i.e the colored region in your diagram) as transparent. Then put this bitmap on top of a square box where the gradient is applied onto the square box itself. This might be a simpler approach.

answered Mar 22 '21 at 07:55

Pradeep Mahato

41
2
11

Don't quite understand your approach. Do you recommend me to create a Bitmap from a picture? Does it mean that the area around the arc will always be of the same color? If you didn't mean this then how is it different from my original solution? I can't really get it without code. – Victor K. Mar 22 '21 at 08:21
Yes, I meant to create a static bitmap/png/svg from the picture. In this case, the color around the arc will always be static, i.e white in your case. This static image, with the arc cut out (i.e has transparency over the arc region) sit on top of a gradient box (rectangle) of same size. You can manipulate the gradient rectangle from code (based on the intensity of the readings). it would be a bit easier to manipulate a rectangle rather than an arc. [ This [link](https://stackoverflow.com/questions/24403002/how-can-i-create-a-custom-gradient-in-android) might help ] – Pradeep Mahato Mar 22 '21 at 22:05

How do I draw an arc with gradient in Android?

1 Answers1