'How to create a Radial Gradient with a glowing ring effect?

I am struggling with a custom view, I want it to have this effect.

enter image description here

But the problem is that the RadialGradient its very soft.

This is my class:

class CustomView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private var radius = 0f
    private var centerX = 0f
    private var centerY = 0f

    private val mainPaint: Paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color.RED
    }

    private val gradientPaint: Paint = Paint(Paint.ANTI_ALIAS_FLAG)


    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        radius = w.coerceAtMost(h) * 0.50f
        if (radius < 0) return
        centerX = w * 0.5f
        centerY = h * 0.5f
        gradientPaint.shader = RadialGradient(
            centerX,
            centerY,
            radius,
            Color.BLACK,
            Color.TRANSPARENT,
            Shader.TileMode.REPEAT
        )
    }

    override fun onDraw(canvas: Canvas) {
        canvas.drawCircle(centerX, centerY, radius, mainPaint)
        canvas.drawCircle(centerX, centerY, radius, gradientPaint)
    }
    
}

The only way I achieved this effect is by drawing a lot of circles (like 10 or more) in the canvas, but this way doesn't feel like the right approach and since I will be doing more stuff in this view, I don't want to have performance issues.

Hope you can help me to find a right way to achieve this. Thank you.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source