Android Jetpack compose gradient

Question

Is it possible to draw a gradient over an image drawable using Jetpack Compose?

fun HeroCover() {
    Column {
        val image = +imageResource(R.drawable.edge_of_tomorrow_poster)
        Container(modifier = Height(440.dp) wraps Expanded) {
            Clip(shape = RoundedCornerShape(8.dp)) {
                DrawImage(image = image)
            }
        }
    }
}

I want to have a translucent gradient drawn on top of the image.

https://stackoverflow.com/a/65697832/14004870 Refer this answer I hope it helps you. — , Oct 28 '21 at 15:19

Luis Fer Garcia · Accepted Answer · 2022-07-19T15:51:19.977

119

Try this:

Box(
    modifier = Modifier
        .background(
            brush = Brush.verticalGradient(
                colors = listOf(
                    MaterialTheme.colors.primary,
                    MaterialTheme.colors.primaryVariant
                )
            )
        )
) {
    Content()
}

edited Jul 19 '22 at 15:51

answered Mar 13 '21 at 18:48

Luis Fer Garcia

3,168
3
15
13

1

This solves the issue and complies with Compose latest API changes after BETA – AouledIssa Oct 29 '21 at 12:32
Perfect code in jetpack compose! – Hossein Badrnezhad Jun 27 '22 at 14:13

Vinay Gaba · Answer 2 · 2020-05-25T21:42:34.210

16

Here is an example of how a LinearGradientShader is used in Compose on a paint object. I imagine you could use something similar to get what you want

https://gist.github.com/lelandrichardson/35b2743e1acd5d672f963f92aca57d4a#file-shimmer-kt-L83

Update: Here's another way to do it that I stumbled on in kotlin lang slack channels -

Box(
    modifier = Modifier
        .preferredSize(500.dp, 500.dp)
        .drawBackground(
            HorizontalGradient(
                0.0f to Color.Red,
                0.5f to Color.Green,
                1.0f to Color.Blue,
                startX = Px.Zero,
                endX = 500.dp.toPx()
            )
        )
)

Source: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1590430288092800

edited May 25 '20 at 21:42

answered May 24 '20 at 02:25

Vinay Gaba

1,156
3
12
26

1

I cannot find toPx() function – David Ibrahim Nov 29 '20 at 09:05
for `toPx()` method, refer to this https://stackoverflow.com/a/65921800/75579 – I'm a frog dragon Mar 10 '21 at 14:04
1

Outdated, the answer from Luis is simpler and just working. – Alex Zaitsev Jul 22 '21 at 09:05

score 2 · Answer 3 · answered Nov 06 '20 at 08:43

Here is a way inspired from the Jetsnack sample code: Replace transparent & darkChocolate by your own colors.

@Composable
fun GradientView(modifier: Modifier = Modifier) {
    Box(modifier = modifier.verticalGradientBackground(listOf(transparent, darkChocolate)))
}

fun Modifier.verticalGradientBackground(
        colors: List<Color>
) = drawWithCache {
    val gradient = VerticalGradient(startY = 0.0f, endY = size.width, colors = colors)
    onDraw {
        drawRect(brush = gradient)
    }
}

score 0 · Answer 4 · answered Jun 23 '23 at 12:01

You can use below code:

  @Composable
  fun GradientBackground() {
    val gradientBrush = Brush.verticalGradient(
        colors = listOf(Color.Blue, Color.Red), // Gradient colors
        startY = 0f, // Starting Y position of the gradient
        endY = 500f // Ending Y position of the gradient
    )

    Text(
        modifier = Modifier
            .fillMaxSize()
            .background(brush = gradientBrush),
        text = "Hello, Gradient Text",
        color = Color.White
    )
 }

Android Jetpack compose gradient

4 Answers4