How do I set a shadow color for Jetpack Compose?

user_10173883 0
Viewed 11499

Sorry, I can hardly speak English.

machine translation:

How do I set a shadow color for Jetpack Compose?

I can set shadows, but they're ugly.

Jetpack Compose code:

Surface(
    modifier = Modifier.width(160.dp).height(56.dp),
    shape = CircleShape,
    elevation = 2.dp,
) {
    ...
}

I want to create a shadow in the code below.

SwiftUI code:

ZStack {
    ...
}
.shadow(color: Color("button_shadow"), radius: 4, x: 0, y: 2)
.shadow(color: Color("button_shadow"), radius: 20, x: 0, y: 4)

Dark mode also requires a white shadow.

enter image description here

enter image description here

You want to be able to customize the color of the shadow.

android-jetpack-compose
5 Answers

In my case for cycle I use this workaround:

@Composable
fun MyButton(){
    Box(
        modifier = Modifier
            .size(64.dp)
            .background(
                brush = Brush.radialGradient(
                    colors = listOf(
                        Color.Yellow,
                        Color.Transparent
                    )
                )
            )
            .padding(bottom = 4.dp),
        contentAlignment = Alignment.Center
    ) {
        Surface(
            shape = CircleShape,
            modifier = Modifier
                .size(55.dp)
                .background(Color.Transparent)
                .clickable { }
        ) {
            Box(
                modifier = Modifier.padding()
                    .background(Color.Gray),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    modifier = Modifier.size(35.dp),
                    imageVector = Icons.Filled.Refresh,
                    contentDescription = "",
                    tint =  Color.Yellow
                )
            }
        }

    }
}

there is the preview:

enter image description here

user_105749130

Compose 1.2.0-alpha06 now supports shadow color attribute for the graphics layer modifier! ambientColor and spotColor can change the color of your shadow. It's only useful with shapes though (CircleShape, RectangleShape, RoundedCornerShape, or your custom shape)

fun Modifier.shadow(
    elevation: Dp,
    shape: Shape = RectangleShape,
    clip: Boolean = false,
    elevation: Dp = 0.dp,
    ambientColor: Color = DefaultShadowColor,
    spotColor: Color = DefaultShadowColor,
)

https://developer.android.com/jetpack/androidx/releases/compose-ui#1.2.0-alpha06

user_121964450

This is not possible at the moment but you can star the issue here: Link to Issue Tracker

The idea would be to have a modifier for the color, opacity, shape etc.

user_55137880

Well, this has recently changed and you can do it using Material 3 Jetpack Compose library. Just call shadow on modifier and set desired color.

Add dependency

implementation 'androidx.compose.material3:material3:1.0.0-alpha12'
implementation "androidx.compose.ui:1.2.0-beta02"

and add shadow modifier.

 .shadow(
         elevation = 8.dp,
         ambientColor = primaryBlue,
         spotColor = primaryBlue
        )

sample code.

    Image(
        painter = painterResource(id = R.drawable.ic_capture_icon),
        contentDescription = "capture",
        modifier = Modifier
            .padding(20.dp)
            .background(shape = RoundedCornerShape(15.dp), color = primaryBlue)
            .size(60.dp)
            .shadow(
                elevation = 8.dp,
                ambientColor = primaryBlue,
                spotColor = primaryBlue
            )
            .align(Alignment.BottomEnd)
            .padding(12.dp)
            .clickable {
                context.startActivity(Intent(context, GeoSpatialActivity::class.java))
            },
        colorFilter = ColorFilter.tint(color = Color.White)
    )
user_45174500
user_127415030
Related