How to set gradient background in TopAppBar using Jetpack Compose

user_5796683 0
Viewed 1240

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:

rendered TopAppBar

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?

android-jetpack-compose kotlin android
1 Answers

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
)

user_35857960
Related