How to create Angular gradient in Jetpack compose?

Question

I want to create an angular gradient like this in Android Jetpack Compose.

The gradient is made in Figma and below is the android code in Figma Inspect.

I could only find resources for the linear gradient with only one angle.

How can I create this Angular gradient in Jetpack compose?

user_5457853 · Answer

What you need is Brush.sweepGradient with colorStops and setting center correctly. Gradient stops start from 3'o clock, right center, so you need to add 0.25 to each stop and move the ones that pass 1 to start, i moved 2 colors from bottom to top at 0.01, and 0.14

@Composable
private fun SweepGradientExample() {
    val colorStops = listOf(
        0.01f to Color(0x8C1339FF),
        0.14f to Color(0x8CFF13A1),
        0.31f to Color(0x8C1380FF),
        0.54f to Color(0x8CD013FF),
        0.81f to Color(0x8C7B13FF),
    ).toTypedArray()

    val density = LocalDensity.current
    val centerX: Float
    val centerY: Float
    with(density) {
        centerX = 161.dp.toPx() / 2
        centerY = 97.dp.toPx() / 2
    }
    val brush = Brush.sweepGradient(
        colorStops = colorStops,
        center = Offset(centerX, centerY)
    )
    Box(modifier = Modifier
        .size(width = 161.dp, height = 97.dp)
        .background(brush)
    )
}

Result

How to create Angular gradient in Jetpack compose?

1 Answers