https://kotlinlang.org logo
Join Slack
Powered by
My designer is asking to center this vertically. I...
# compose
c
My designer is asking to center this vertically. It looks as though I am, but when she screenshots it and does measurements based off of the T, the T is closer to the bottom vs the top. On iOS that team was able to get them perfectly centered. (I have to admit the chips do look better on iOS) Code in thread. What am I doing wrong?
👀 1
😞 1
Copy code
@Composable
fun ColoredChip(text: String, primaryColor: Color, secondaryColor: Color) {
  Surface(
      elevation = 0.dp,
      color = secondaryColor,
      shape = RoundedCornerShape(16.dp),
      border = BorderStroke(width = 1.dp, color = primaryColor)) {
    Text(
        text = text,
        color = primaryColor,
        modifier = Modifier.padding(horizontal = 8.dp, vertical = 2.dp),
        fontWeight = FontWeight.W700,
        fontSize = 14.sp)
  }
}

@Preview
@Composable
fun ChipPreview() {
  ColoredChip(text = "Testing One", primaryColor = Color.Red, secondaryColor = Color.Green)
}
If I change the modifier to this, then it does look better.
Copy code
modifier = Modifier.padding(start = 8.dp, end = 8.dp, top = 1.dp, bottom = 2.dp),
d
Shouldn't you use one of the align modifiers?
c
Hm. Let me give it a go
Tried centering. No luck. On second look though. Seems like this has nothing to do with the container its in... but it seems like the uppercase T is not actually aligned in the center of the Text Bounding box...
Not exactly scientific, but you can see that the T which my designer wants centered is actually closer to the bottom vs the top.
z
Can you try using a Row inside the Surface, with 
verticalAlignment = CenterVertically
?
y
if your modifiers are centering it, maybe its just the font youre using.
Some fonts have extra space on top etc
✅ 2
c
Not setting any specific font. Just whatever is out of the box.
y
That still doesnt mean it is not caused by the font. Try with a custom font and check if that font has any extra space on top/bottom on a third party program.
Also try with all capital letters as well since the lowercase letters can deceive your eyes since the "weight" on the bottom would be more
c
I guess my point of saying its the default font is that im not doing anything custom. you would think out of the box id be able to center text in a pill like this
a
p
Giving up on surgical pixel perfectness has saved us so much engineering power which we allocate to sections now that the users actually care about 😉
c
yep. we do the same. these labels are everywhere though and we have people that complain that they're uncentered.
@Albert Chang thanks. I already starred that issue. I figured that font padding would be equal on top and bottom though? I mean, you can center text perfectly in a button... no? So you should be able to in this scenario?
z
@Colton Idle Did you try the center vertically solution I mentioned? I was having a similar problem, where the outer composable had different constraints than the inner one, basically resulting in the vertical padding only providing enough inset from the top, and there being additional space below it. Button also uses a row, although I'm not sure if it also has center vertically or not.
c
whoops. missed your message. will give it a whirl in a sec.
👍🏽 1
Swapped the box for a row and added the alignment like you said, but it's still off @Zoltan Demant
z
@Colton Idle That's strange, mine is completely centered. Or am I just blind to it?
You can also attach a background to each composable, it makes visualizing the differences way easier. That's how I debugged mine at least!
t
Have you tried using a box instead of a surface and use 
Modifier.align(Center)
?
a
No, you can't vertically center the text perfectly without 
includeFontPadding=false
and that's the point of that issue.
👍🏽 2
Top and bottom paddings are usually not equal.
c
FWIW things are not perfect in Figma (from the designer POV) either because height of text characters are not always aligned perfectly with the grid 🙂 Closer to be exactly centered, but never perfect.
🥲 1
c
Oof. Thanks @Chris Sinco [G]. I know text is crazy complicated. theres a figma blog post on text sizes has been amazingly useful, but yeah. in this case... I guess I will just add the extra dp of padding on the bottom and call it a day.
c
I think that bug should help resolve the issue in the long term 🤞 cc @Siyamed
c
Will do. @Chris Sinco [G] one last question (just out of curiosity) I use figma lightly for my own projects. If I wanted to design this in figma, how would you do that? Does it have a similar concept of font padding?
c
It doesn’t have font padding, but other attributes like line height, letter spacing, etc. The discrete font padding I don’t think can be controlled in Figma
c
So aligning it dead center wouldn't be possible in figma? edit: like would you have to add extra spacing in figma just like i have to in compose?
i understand that we're out of what #compose is about. lol. just curious how this seems like such a basic pattern (a "chip") and how hard it seems to be to translate the idea into a design
c
Alignment happens using the bounding box of the text element. As you can see here, the font padding is dependent on the font, and likely whatever is rendering things in Figma, e.g. Web GL.
So when you center/align something in Figma, it will use that bounding box. The dimensions of that box for Text can be altered by font size, line height, the font itself. But you can’t add more at the top or bottom within the text, if that makes sense.
👍 1
This is not any different from how Compose does it. The difference is Android adds more padding to the font than Figma, or other platforms like iOS. It seems some platforms get really close to how design tools do it. But I’d also argue there’s been discrepancies between design tools themselves (Sketch, Figma, Adobe XD, Adobe Illustrator). 🤷‍♂️
👍 1
👍🏼 1
s
This is about font padding as many mentioned in the thread. Font itself defines its padding, android has includefontpadding attribute to ignore that, we will work on a solution for compose too. I don't know how other OSs do it. Regarding the design tool mismatch; I wonder how much of this difference is because i personally dont see many designs that have another script (a tall script but not latin)
c
Yeah it’s hard to tell
But I ran into this fontPadding issue myself today. Had to offset by 
-1.dp
😅
c
@Chris Sinco [G] glad its not just me. something feels wrong about doing that sort of thing, but if it's good enough for you... its good enough for me!
c
For now - def should fix that bug long term
🎉 1
3 Views
Open in Slack
PreviousNext
Powered by