Hi guys Why this text is not in the center? When I set ```defaultMinSize``` to e.g. 40.dp it looks g...

# compose

[Ink]

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:

[Chris Johnson]

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

[Colton Idle]

@Ink can you edit your post to put the code in this thread please?

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

[Chris Sinco [G]]

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

[Ink]

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

                //get the current max dimension to assign width=height
                val currentHeight = placeable.height
                var heightCircle = currentHeight
                if (placeable.width > 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)
    )
}

[Ink]

@Chris Sinco [G] There is no reason, I am just looking for the simplest solution

[Ink]

@Colton Idle How Can I draw Text inside that circle?

Canvas(modifier = Modifier.size(100.dp), onDraw = {
    drawCircle(color = Color.Red)
})

[Chris Sinco [G]]

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

[Ink]

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

[Chris Sinco [G]]

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

[Chris Sinco [G]]

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

[Chris Sinco [G]]

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

[Ink]

Works fine. Thank you

[Chris Sinco [G]]

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

[Jeff]

Will this accommodate larger text like 99+

[Chris Sinco [G]]

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

[Tin Tran]

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