androidandroid-jetpack-composeandroid-jetpack-compose-text

Compose: Create Text with Circle Background


Coming from SwiftUI, I wanted to create a view of a Text where it has a background of a Circle, where the circle's width/height grow as the text inside Text gets longer.

Since there's no Circle() in Compose like there is in SwifUI, I created just a Spacer instead and clipped it. The code below is using ConstraintLayout because I don't know how I would get the width of the Text in order to set the size of my Circle composable to be the same:

@Composable
fun CircleDemo() {
    ConstraintLayout {
        val (circle, text) = createRefs()

        Spacer(
            modifier = Modifier
                .background(Color.Black)
                .constrainAs(circle) {
                    centerTo(text)
                }
        )

        Text(
            text = "Hello",
            color = Color.White,
            modifier = Modifier
                .constrainAs(text) {
                    centerTo(parent)
                }
        )
    }
}

I can use a mutableStateOf { 0 } where I update that in an onGloballyPositioned modifier attached to the Text and then set that as the requiredSize for the Spacer, but 1. that seems stupid and 2. the Spacer now draws outside the boundaries of the ConstraintLayout.

Visually I want to achieve this:

A black circle with the word Hello entered inside

How would I go about doing this? Thank you :)


Solution

  • It is also possible to use drawBehind from the modifier of the textView itself such as below:

    Text(
         modifier = Modifier
             .padding(16.dp)
             .drawBehind {
                   drawCircle(
                        color = red,
                        radius = this.size.maxDimension
                   )
              },
         text = "Hello",
    )
    

    of course, customize the radius and other properties as you wish!

    enter image description here