https://kotlinlang.org logo
#compose
Title
# compose
m

miqbaldc

10/08/2023, 7:57 AM
Hi everyone, is there any references to build UI like following: My attempts see in 🧵
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!
a

ascii

10/08/2023, 8:50 AM
You could offset text by half of icon size, e.g. Modifier.offset(12.dp) if it's a 24.dp icon
✍️ 1
thank you color 1
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.
1
One more thing: prefer
Icon
over
Image
if you're not doing any image-specific adjustments like content scale etc.
m

miqbaldc

10/09/2023, 6:16 AM
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
a

ascii

10/09/2023, 6:54 AM
Use
TextAlign.Center
on the Text
✍️ 1