Shadow with transparent background in Jetpack Compose

user_16530139 0
Viewed 2287

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)

        )
android-jetpack-compose alpha shadow
1 Answers

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.

user_66455630
Related