How to set gradient background in TopAppBar using Jetpack Compose

Issue

I want to set the gradient background of my TopAppBar:

My code:

TopAppBar(
    modifier = Modifier.background(
        Brush.horizontalGradient(
            colors = listOf(
                Color.Red,
                Color.Green
            )
        )
    ),
    title = { Text("UI Components") },
    backgroundColor = Color.Transparent
)

Result:

I found this post: Jetpack Compose Button with gradient background? for button – so I set backgroundColor transparent and custom background via a modifier. Sadly in my case, there is an additional shadow around text which I don’t know how to remove. What should I change or maybe TopAppBar is just not designed to be used using gradient and I should write something completely custom?

Solution

This shadow is caused by default elevation. Set it to zero:

TopAppBar(
    modifier = Modifier.background(
        Brush.horizontalGradient(
            colors = listOf(
                Color.Red,
                Color.Green
            )
        )
    ),
    title = { Text("UI Components") },
    backgroundColor = Color.Transparent,
    elevation = 0.dp
)

Answered By – Philip Dukhov

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0