Linear Gradient over image in Jetpack Compose

Question

I'm trying to display a linear gradient over a background image so it's easier to read the text on the image. But do to the lack of documentation it's not easy to do. I want to accomplish something like this.

Here is my component:

@Composable
override fun MakeComposable(screen: ScreenID?, onEvent: (ScreenEvent) -> Unit) {
    if (screen == null) return
    
    val gradient = Brush.linearGradient(
        colors = listOf(Color.Transparent, Color.Black),
        start = Offset.Zero,
        end = Offset.Infinite,
        tileMode = TileMode.Clamp
        )

    ComposeTestTheme {
        Box(modifier = Modifier.background(color = MaterialTheme.colors.surface))
        {
            screen.backgroundImage?.let { ui.Image(ImageData(url = it), onEvent = onEvent) }
            LazyColumn(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxSize()) {
                this.items(screen.modules) { module ->
                    ModuleComposable(ui, module, onEvent)
                }
            }
        }
        Box(modifier = Modifier.fillMaxSize().background(gradient))
    }
}

did you get solution for this? Can you please share? – Rucha Bhatt Joshi Oct 03 '22 at 15:42 — Rucha Bhatt Joshi, Oct 03 '22 at 15:42

score 1 · Answer 1 · answered Mar 11 '22 at 17:55

You can create a composable with a Box to pill each composables on top of each other. It would look like this (pseudo code):

@Composable
fun ShadowedImage(modifier = Modifier) {
  Box(modifier) {
    Image(modifier = Modifier.fillMaxSize())
    Surface(modifier = Modifier.fillMaxSize().background(brush = gradient))
    Text(text = "Your text")
  }
}

Linear Gradient over image in Jetpack Compose

1 Answers1