https://kotlinlang.org logo
Join Slack
Powered by
Is there any way, to align top of the text with my...
# compose
p
Is there any way, to align top of the text with my icon?
Copy code
@Composable
private fun Item(icon: ImageVector, title: String, date: String) {
    Row(
        modifier = Modifier.fillMaxWidth(),
    ) {
        Icon(imageVector = icon, contentDescription = null)

        Column(modifier = Modifier.padding(start = 8.dp)) {
            Text(
                text = title,
                style = typography.subTitle03,
            )
            Text(
                text = date,
                style = typography.body04,
                modifier = Modifier.padding(top = 4.dp),
            )
        }
    }
}

@Composable
@PreviewFontSizes
private fun PreviewItem() {
    Surface {
        Item(
            icon = Icons.Outlined.Person,
            title = "Some line\nthat breaks",
            date = "29th Jun - 11.20"
        )
    }
}
c
I think you could solve this by excluding font padding from your text
Copy code
Text(
 text = myText,
 style = TextStyle(
   lineHeight = 2.5.em,
   platformStyle = PlatformTextStyle(
     includeFontPadding = false
   )
   /* ... */
  )
👍 1
p
Hm, it makes it a bit better, but still not ideal, if you look at small font size
a
Add 
verticalAlignment = Alignment.CenterVertically
to your Row
Oh, you have other text too. Refactor it like this:
Copy code
Column {
	Row {
		Icon
		TopText
	}
	BottomText
}
p
vertically centering doesn't work for me, since I want to align icon to the top. The text can have multiple lines and become taller than the icon, and that would not make it aligned to the top anymore
I would kind of need to vertically center text and icon, but only first row of the text
a
Hmm you might be able to use the 
onTextLayout
callback of Text and use firstBaseline, getLineTop/Bottom etc, and position icon accordingly
But then you'll either end up delaying render by 1 frame or cause a layout shift, depending on how you do it In my opinion, keep icon and top text together, regardless of how many lines it has. The icon doesn't describe just the first line, yeah? It goes with the whole text.
p
Hm, maybe I can adjust top padding of text line, in 
onTextLayout
?
Sadly, I have a thorn (designer), that wants this top aligned. Will consider requesting design change 😄
a
Aha I was just about to say this:
Unless you have rigid constraints from designers (another team), you should do what's easier code-wise
This is a simple issue, but subjective. I've had users tell me they prefer it when the icon is aligned just with the top text (not just first line), and others who prefer it being centered respective to both texts.
p
Csaba Szugyiczki solution ends up looking very good, when testing on real device. I won't complicate for pixel perfect. Thank you for helping!
👍 1
z
Your icon looks like it has its own top padding, you either need to remove that or account for it in your layout
p
Yeah, it does. But dunno, icon padding kind of helps to align stuff. If you look at large and normal text, it kind of looks better. If I removed icon padding, small text would be better aligned. I wasn't able to completely remove top texr padding. Any better solutions for this?
z
I’m not saying you shouldn’t have padding above your icon, but that you need to account for it in someway. If you’re doing measurement to align the top of the icon and the text, then your icon itself shouldn’t have the padding, you should add it in your layout, because you can decide how much to add to each
444 Views
Open in Slack
PreviousNext
Powered by