androidandroid-jetpack-composeandroid-jetpack

Rendering text with a rounded shadow using Jetpack Compose


I want to create a shadow around the text, as in the example

In xml, I did it as indicated below:

<item name="android:shadowColor">@color/black</item>
<item name="android:shadowDx">3</item>
<item name="android:shadowDy">3</item
<item name="android:shadowRadius">2</item>

How can I do this in Jetpack Compose?

I used the shadow modifier, but it creates a shadow in the form of a square. It doesn't suit my needs.


Solution

  • In Jetpack Compose, you can add a shadow to each character in Text by using the shadow parameter within TextStyle. This will apply the shadow individually to each character, not as a box around your entire text.

    This will make the shadow similar to your XML properties:

    Text(
        text = "Your text",
        style = LocalTextStyle.current.copy(
            color = Color.Black,
            shadow = Shadow(
                color = Color.Black,
                offset = Offset(3f, 3f),
                blurRadius = 2f
            )
        )
    )