'How do I set a shadow color for Jetpack Compose?

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.

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

android-jetpack-compose

Solution 1:^[1]

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:

Solution 2:^[2]

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.

Solution 3:^[3]

the link in the comment of @EpicPandaForce uses converts color to int using android.graphics.Color.Argb(Long) which required Api Level >= 26. I found another link in that gist comment in which function argb is used and it is in API level 1 added.

https://gist.github.com/arthurgonzaga/598267f570e38425fc52f97b30e0619d

Solution 4:^[4]

Compose 1.2.0-alpha06 now supports shadow color attribute for the graphics layer modifier!

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

Solution 5:^[5]

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)
    )

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Evgenii Doikov
Solution 2	Code Poet
Solution 3	Zaki Shaikh
Solution 4	Nek.12
Solution 5

'How do I set a shadow color for Jetpack Compose?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]