I got a requirement to implement a background that I don't really know how to go about starting. I e...

# compose

[Colton Idle]

I got a requirement to implement a background that I don't really know how to go about starting. I essentially need a moving/living gradient. Similar to stripe.com's landing page. Does anyone know if this is doable in compose, or do I need to use some lower level stuff. Maybe someone made a library similar to this?

[eygraber]

I just did something like that very recently. There might be a better way to do it, but my design team just provided me with an mp4 to use 😅

[romainguy]

It's hard to answer without knowing your exact UX spec. You can go a long way by drawing paths using lienar and circular gradients. Alternatively you can write a custom shader starting in Android 13

[romainguy]

If on Android you can also grab the native canvas and use drawBitmapMesh or drawVertices (API 29+ or in software mode) to draw complex gradient

[romainguy]

This picture from our docs was drawn using drawVertices:

[romainguy]

Image from iOS.jpg

[Colton Idle]

I might try to just do some sort of animation of just a linear gradient and seeing how far that gets me. maybe something like this https://codepen.io/P1N2O/pen/pyBNzX

[romainguy]

You can also overlay gradients with blend modes to "fake" the effect

[ephemient]

that codepen slides a linear gradient around

[Kirill Grouchnikov]

The last few minutes of

https://youtu.be/xcfEQO0k_gU▾

from last year seem relevant

[ephemient]

you could do it without shaders,

var size by remember { mutableStateOf(IntSize.Zero) }
val t by rememberInfiniteTransition().animateFloat(
    initialValue = -1f,
    targetValue = 1f,
    animationSpec = infiniteRepeatable(
        animation = tween(durationMillis = 7_500, easing = EaseInOut),
        repeatMode = RepeatMode.Reverse,
    ),
)
Box(
    modifier = Modifier
        .onSizeChanged { size = it }
        .background(
            brush = Brush.linearGradient(
                0 / 3f to Color(0xffee7752),
                1 / 3f to Color(0xffe73c7e),
                2 / 3f to Color(0xff23a6d5),
                3 / 3f to Color(0xff23d5ab),
                start = Offset(size.width * t, 0f),
                end = Offset(size.width * (t + 1), Float.POSITIVE_INFINITY),
            )
        )
        .fillMaxSize()
)

[ephemient]

at least, to make something like the codepen. something like the Stripe one will require custom drawing or shaders

[Colton Idle]

Thank you everyone! I love the simple approach but also love the video linked by Kirill. Will try these out. Cheers!

[ste]

https://github.com/dokar3/amlv

[Colton Idle]

AWESOME

[romainguy]

This is using several overlaid gradients with different blend modes 🙂

[darkmoon_uk]

We needed almost the exact same look as this, and succeeded with a shader-based approach.
Ended up maintaining two variants of the shader code; one for GLSL and another for SkSL, but these were minor standards differences with 95% identical code, yielding the exact same output.
Using `expect`/`actual` we turned these into a single multiplatform @Composable working across Android, iOS and Desktop.