when i increment from 9 to 10, i don’t want the buttons to get displaced further away, so i use the ...

# compose

[Hassaan]

when i increment from 9 to 10, i don’t want the buttons to get displaced further away, so i use the width modifier Modifier.width(90.dp) and then another problem arose that i want my numbers in the centre , so i use _wrapContentWidth_()
Modifier._width_(90._dp_)._wrapContentWidth_()

Text(text = "${it}",
     fontSize = 64.sp,
     fontWeight = FontWeight(500),
     color = Black,
     modifier = Modifier.width(90.dp).wrapContentWidth()
)

how would you approach this? i think i am overcomplicating it

[Stylianos Gakis]

If you absolutely need this to not move, and want to support specifically up to X digits.
• Use a monospaced font, so that no matter the number combination it takes the exact same space
• Put another text in the middle there, and have it always have X digits, but make it's alpha be 0f aka invisible. Then put the visible text in front of it, aka in a box. This way you'll always take as much space as X letters need
• If you don't want to use monospaced font, try and see which number takes up the most width, probably 8? And put that in the invisible placeholder. But this is possible to make the buttons move a tiny bit if some specific number is wider than another in your specific font.

[Stylianos Gakis]

Same concept as what this article talks about https://medium.com/androiddevelopers/problem-solving-in-compose-text-d1dd1feafe4a

[Hassaan]

Hmm

[Hassaan]

That's a lot of work

[Stylianos Gakis]

What is a lot of work?

[Hassaan]

If i need 3 or 4 letters, using the wrapContent is lot easier than making it invisible

[Stylianos Gakis]

How does that solution look like if you bump the font size up?

[Stylianos Gakis]

If you want the buttons to never move as you said, you probably need to decide how many numbers you want to support there, otherwise they will have to either be super far away, or they'll have to move

[jamshedalamqaderi]

I think if you set the textAlign to center with fixed width then it should solve

[Stylianos Gakis]

I think if you set the textAlign to center with fixed width then it should solve

What number will that fixed width be?

[jamshedalamqaderi]

For Text widget you need to calculate or do some trial for best fit

[Stylianos Gakis]

Right, and what if the font size of the phone is set to max? And then what if it's set to minimum available? Will you use the same space between the buttons for both cases?

[jamshedalamqaderi]

for the situation you're telling it will be complex thing

[Stylianos Gakis]

Yes and this https://kotlinlang.slack.com/archives/CJLTWPH7S/p1691223579355279?thread_ts=1691220470.377699&cid=CJLTWPH7S should solve it 🫠

[jamshedalamqaderi]

your solution is looking good

[Hassaan]

You are right sir, if we bump up the font size, it would be a problem for sure.
But for 36.sp and 160 width, 4 digits would get accommodate

[Stylianos Gakis]

I mean sure, feel free to do it as you want, it doesn't have to be perfect if you don't want it to be. I'm just saying this solution really isn't that complicated, the article I linked even shows how to do it at the end there.

[Hassaan]

Your solution is looking good 😊, thanks