CODEWITHSUNDEEP
shadowalphaandroid-jetpack-compose
kudenz
kudenz

Reputation: 91

Shadow with transparent background in Jetpack Compose

Can anyone explain this? And how to make the center rectangle with the color of the background disappear?

the result here

I've tried many ways but still can't understand the logic here. (different from Flutter UI)

Box(
            modifier = Modifier
                .fillMaxWidth()
                .shadow(elevation = 3.dp, shape = RoundedCornerShape(28.dp))
                .background(
                    MaterialTheme.colors.primary.copy(alpha = 0.8f),
                    shape = RoundedCornerShape(28.dp)
                )
                .padding(16.dp)

        )

Upvotes: 9

Views: 4665

Answers (1)

kaustav07
kaustav07

Reputation: 314

use like this -

.background(
                MaterialTheme.colors.primary.copy(alpha = 0.8f).compositeOver(Color.White),
                shape = RoundedCornerShape(28.dp)
            )

the background basically shows for elevation and shadow, if you remove them then it will be gone, since you are using transparent color that's why you are seeing this. but make the color solid but light using compositeOver , then it will work fine.

Upvotes: 5

Related Questions