0

Is Android Jetpack Compose shadow modifier supposed to look like this?

Screenshot of Text with a shadow modifier

I'm so confused. I've written a few components and I'm testing the shadow modifier that I believe was introduced in compose-1.2.0-alpha. I'm now using 1.2.1. My component is written as this.

fun Labels() {
    Label(
        modifier = Modifier.shadow(
            elevation = 1.dp, 
            shape = RoundedCornerShape(4.dp), 
            ambientColor = Color.Blue, 
            spotColor = Color.Blue
        ), 
        text = field.name, 
        style = typographies.tagDefault
    )
}

Label is a mirror copy of Text for my own reasons, but that means it boils down to::

fun Label(...) {
    BasicText(
        text,
        modifier,
        mergedStyle,
        onTextLayout,
        overflow,
        softWrap,
        maxLines,
    )
}

So in the grand scheme and to my understanding the shadow effect is ultimately being applied to the BasicText and nothing else. Which looks like the case in the image, but why is it so thick? Why isn't it more like a border the same as box-shadow in CSS? How can I make it look like it should with similarities to box-shadow in CSS? I've tried a few things like moving the modifier to higher component pieces and messing with the elevation. But all that has done is made the shadow a little hazy and maybe slightly thicker. Also if I change the shape to something like RoundedCornerShape(percent = 50) it nearly fills in the whole background with this blue color which is definitely not intended.

Cayce K
  • 2,288
  • 1
  • 22
  • 35
  • 2
    That's Android's material shadow artifact, which you're seeing because the background is transparent. It's been around since Lollipop. The simplest way to get rid of it is to use opaque backgrounds; e.g., by setting your `Label`'s background to a solid white. If you really need transparent backgrounds, just without that artifact, it'll take some sort of workaround, AFAIK. – Mike M. Oct 05 '22 at 16:18
  • @MikeM. I'm assuming you don't know the workaround right now?? Or if you do it is more complicated then it is worth maybe? I am about 89% sure I need transparent backgrounds for the purposes of my future work. But I thought about that being the issue for sure. :( – Cayce K Oct 05 '22 at 16:21
  • Here ya go: https://stackoverflow.com/q/71868520. Most users end up not really needing it, so I only link it if asked. – Mike M. Oct 05 '22 at 16:22
  • 1
    oof that's rough. thank you. – Cayce K Oct 05 '22 at 16:32

0 Answers0