Hi everyone, is there any references to build UI like following: My attempts see in :thread:

# compose

[miqbaldc]

Hi everyone, is there any references to build UI like following:

My attempts see in 🧵

[miqbaldc]

I’m using Row atm, with Arrangement.SpaceBetween and has a transparent Box to fill the right gap

But after checking the below component (Profile Picture Placeholder), the Profil text is not center aligned properly, due to I’m adding a padding to end of the icon Text Edit in the right of Profil text.

Any other alternatives or maybe because I’m not using the Row component properly?

Any suggestion would be great! Thanks!

[ascii]

You could offset text by half of icon size, e.g. Modifier.offset(12.dp) if it's a 24.dp icon

[ascii]

Also, you should use Spacer instead of Box there, to make your intentions more obvious (dummy view to take up space). Although I'd just get rid of it entirely, and remove horizontalArrangement in favour of Modifier.weight(1f) on Text.

[ascii]

One more thing: prefer Icon over Image if you're not doing any image-specific adjustments like content scale etc.

[miqbaldc]

gratitude thank you thanks for mentioning offset(12.dp), I use this approaches for now! for the weight(1f) I’m not sure to use it, as it keep the text to be left aligned instead

[ascii]

Use TextAlign.Center on the Text