I need to have a badge-like component that basical...

# compose

[orangy]

I need to have a badge-like component that basically shows a number inside a circle. I’m trying to center number vertically inside a circle, but it always slightly higher than needed. If I add black background to the Text it has some space below the number. The text rectangle is centered, but not the text itself. How do I fix it?

[orangy]

I mean I understand that’s likely space for letter going down below baseline 🙂 Like g , but the question is how to measure actual text size so I can properly center it.

[Javier]

if you change the font, that space is the same?

[Ali Albaali]

Maybe TextAlign parameter?

[orangy]

I think it’s smaller. It’s exactly the size to accommodate for below baseline characters

[Ali Albaali]

There's also letterSpacing property in TextStyle

[orangy]

TextAlign and letterSpacing are for horizontal placement

[Ali Albaali]

Found this and this

[orangy]

Thanks, will look into it…

[orangy]

I wonder if I can get a hand on font metrics, so I can at least compensate on descent…

[Javier]

I think it is the font space, and it can't be changed without changing the font

[orangy]

yeah, I understand, but still… would like to be able to measure exactly bounds of the string…

[Kai Zhu]

In Android, there're 2 ways of measuring texts:

1. Directly using the standard lines (ascent, descent, top, bottom) that come from the traditional printing / typing system. This way is font-related (not characters-related), so in fact it's rather reading from the standard data from font than measuring the characters.
2. Measuring the text (the very characters) and reading the bounds from the measuring result. This is truly a "measurement".

The second way is how we measure short and relatively static texts (like this case you gave). But I'm not sure if Compose can provide this as a cross-platform option, as it obviously requires platform support under the hood.

[Siyamed]

OnTextLayout callback should give you some info about line bottom etc. I am not sure about the descent, if it is not there please create a ticket, will be easy yo add.

[Siyamed]

Wgat you can fallback to is Paragraph interface which has a constructor function with the same name..

[orangy]

Paragraph is a nice idea, thanks. It gives bounds for the font size, not actual letter size. But it has baseline location, so I can subtract and compensate for the descent, it should work for my case. Let me try…

[orangy]

@Siyamed nope, doesn’t really work well… while I get Paragraph and baseLine and height, it still is not properly centered because numbers still have some weird paddings to left, right, top and bottom… any better ideas how to do proper number badges? Like you know, centered 🙂

[orangy]

Image above is from Figma. This one is from compose. You can see it is slightly off…

[Siyamed]

Currently not sure what exactly is causing that. It is possible that it is related to includeFontPadding attribute on Android which we do not expose right now.

[Siyamed]

We didnt expose it because it is very confusing. There are multiple such configurations that chamge the line height which ends up in a very confusing state when some languages/fonts are used (tall scripts)

[Siyamed]

I know that we will need to add some equivalent but it will require some time to investigate a possible right way of doing it

[Siyamed]

If the difference is acceptable i say ship it :)

[louiscad]

Is there an issue to follow for that problem?

[orangy]

Any progress with font metrics or better layouts?