A modern programming language that makes developers happier.

kotlinlang

device-2021-09-22-231533.png

Hi guys
Why this text is not in the center? When I set
```defaultMinSize```
to e.g. 40.dp it looks good but I don't want that big
Code in thread:

I would honestly just draw this with a canvas. It'd be 100000x easier.

<@UNELR7NSX> can you edit your post to put the code in this thread please?

<https://kotlinlang.slack.com/archives/CJLTWPH7S/p1616265877303000>

Is there a reason you are using custom layout to place the number? This should just work with `contentAlignment = Alignment.Center` on the `Box` Composable

```Box(contentAlignment= Alignment.Center,
        modifier = Modifier
            .background(Color.Black, shape = CircleShape)
            .layout(){ measurable, constraints -&gt;
                val placeable = measurable.measure(constraints)

                //get the current max dimension to assign width=height
                val currentHeight = placeable.height
                var heightCircle = currentHeight
                if (placeable.width &gt; heightCircle)
                    heightCircle = placeable.width

                //assign the dimension and the center position
                layout(heightCircle, heightCircle) {
                    // Where the composable gets placed
                    placeable.placeRelative(0, (heightCircle-currentHeight)/2)
                }
            }) {

        Text(
            text = questionIndex.toString(),
            textAlign = TextAlign.Center,
            color = Color.White,
            modifier = Modifier.defaultMinSize(20.dp) //Use a min size for short text.
        )
    }

    Text(
        text = question.question,
        fontFamily = DefaultFont,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp,
        color = Color(0xFF1E1E1E),
        modifier = Modifier.padding(start = 10.dp)
    )
}```


<@UJJ1A3G1G> There is no reason, I am just looking for the simplest solution

<@UN85K2RQR> How Can I draw Text inside that circle?
```Canvas(modifier = Modifier.size(100.dp), onDraw = {
    drawCircle(color = Color.Red)
})```


I see - contentAlignment is the simplest solution. Is that not working?

It works when defaultMinSize is bigger than 30.dp but I don't want that big size

The Box is sized to content, unless you explicitly use a width/height/size modifier

So if you want a perfect circle, I’d set the size to something, e.g. 100.dp

image.png

This code
```@Preview
@Composable
fun SlackTest() {
    Box(
        contentAlignment= Alignment.Center,
        modifier = Modifier
            .background(Color.Black, shape = CircleShape)
            .size(20.dp)
    ) {
        Text(
            text = "1",
            textAlign = TextAlign.Center,
            color = Color.White,
        )
    }
}```
produces this

If you really want to use `Canvas` to do it, you can use `drawText`

Will this accommodate larger text like *99+*

Likely not so you'd have to either change the text size or circle size on that condition 

You can use padding on the text instead of setting fixed size on the box