Gradiente de composición de Android Jetpack

2 minutos de lectura

¿Es posible dibujar un degradado sobre una imagen dibujable usando 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)
            }
        }
    }
}

Quiero dibujar un degradado translúcido encima de la imagen.

  • ¿Podría proporcionar una imagen de la salida requerida?

    – Rajnish suryavanshi

    19 de diciembre de 2019 a las 6:52

  • stackoverflow.com/a/65697832/14004870 Consulte esta respuesta, espero que le ayude.

    usuario14004870

    28 oct 2021 a las 15:19

Avatar de usuario de Luis Fer García
Luis Fer García

Prueba esto:

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

  • Esto resuelve el problema y cumple con los últimos cambios de API de Compose después de BETA

    – Aouled Issa

    29 oct 2021 a las 12:32

  • ¡Código perfecto en composición jetpack!

    – Hossein Badrnezhad

    27 de junio a las 14:13

Avatar de usuario de Vinay Gaba
Vinay Gabá

Este es un ejemplo de cómo se usa LinearGradientShader en Compose en un objeto de pintura. Me imagino que podrías usar algo similar para obtener lo que quieres.

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

Actualizar: Aquí hay otra forma de hacerlo con la que me topé en los canales de kotlin lang slack:

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()
            )
        )
)

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

  • No puedo encontrar la función toPx()

    –David Abraham

    29 de noviembre de 2020 a las 9:05

  • por toPx() método, consulte este stackoverflow.com/a/65921800/75579

    – Soy un dragón rana

    10 de marzo de 2021 a las 14:04

  • Desactualizada, la respuesta de Luis es más simple y funciona.

    – rockear ahora

    22 de julio de 2021 a las 9:05

Aquí hay una forma inspirada en el código de muestra de Jetsnack: Reemplace el chocolate transparente y oscuro por sus propios colores.

@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)
    }
}

¿Ha sido útil esta solución?