I need to have a badge like component that basically shows a

Question

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 · Answer

I mean I understand that s likely space for letter going down below baseline slightly smiling face Like `g` but the question is how to measure actual text size so I can properly center it

Javier · Answer

if you change the font that space is the same

Ali Albaali · Answer

Maybe TextAlign parameter

orangy · Answer

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

Ali Albaali · Answer

There s also `letterSpacing` property in `TextStyle`

orangy · Answer

TextAlign and letterSpacing are for horizontal placement

Ali Albaali · Answer

Found <https github com JetBrains compose jb issues 89|this> and <https kotlinlang slack com archives C01D6HTPATV p1613916894024400 thread ts=1613916894 024400 amp cid=C01D6HTPATV|this>

orangy · Answer

Thanks will look into it

orangy · Answer

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

Javier · Answer

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

orangy · Answer

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

Kai Zhu · Answer

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 · Answer

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 · Answer

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

orangy · Answer

`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 · Answer

< 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 slightly smiling face

orangy · Answer

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

Siyamed · Answer

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 · Answer

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 · Answer

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 · Answer

If the difference is acceptable i say ship it

louiscad · Answer

Is there an issue to follow for that problem

orangy · Answer

Any progress with font metrics or better layouts