I want to create a Modifier `fun Modifier.badge(text: String): Modifier` so you could add a "Badge" ...

# compose

[Brais Gabin]

I want to create a Modifier fun Modifier.badge(text: String): Modifier so you could add a "Badge" to any Composable without the need of a BadgeBox (that's the material's solution). I tried with drawWithContent but the badge is kind of complex to use such a low level api. And with Modifier.layout I can just layout the "Composable" I can't add the Badge composable to measure it and layout it. Is there any way to do this?

[Stylianos Gakis]

I’ve done this https://github.com/HedvigInsurance/android/blob/4a89b94a1c26b41b11ac6ecf3995760527[…]5/app/app/src/main/kotlin/com/hedvig/android/app/ui/NavUtils.kt
to paint a red dot.
You can probably use the canvas given there to paint the text too, give it a shot

[myanmarking]

doing it with modifier you are limited to paint API. You could create a wrapper composable, that way, you can do whatever you want

[Stylianos Gakis]

They said at the top that they do not want the wrapper solution like BadgeBox which material does for whatever reason that may be, and asked for a fun Modifier..() : Modifire solution, which is why I suggested this 😄

[myanmarking]

I dont think you can do that with a modifier. Might be a way tho

[Stylianos Gakis]

What do you mean by “that” here? Painting some text? I am pretty sure canvas has APIs to paint text on the space it’s given.

[myanmarking]

I mean adding a badge slot composable while only using a modifier

[efemoney]

> is kind of complex to use such a low level api
Haven’t ever met a complex “badge” in my life (they are usually just a background & text), what does it look like @Brais Gabin? Pretty sure a modifier is more than plenty to handle it

[Brais Gabin]

Two main problems: 1) draw text in the correct position requires maths. I'm not scare of them but maintain them is way more complex than use Composables. 2) Accesibility. If the text is drawn using the drawWitnContent that text is not pick up by TalkBack so you need to implement it yourself and that's kind of difficult. Specially because I don't know how to write an accesibility test to ensure that it doesn't break.

[efemoney]

Accessibility is just semantics (my limited opn). Your custom modifier can add semantics modifer while you are adding the draw modifier.

[efemoney]

For the text, I strongly believe the using the compose types (Offset | IntOffset, Size, etc) makes it easier to do those calculations

[efemoney]

For instance to center child: Size within parent: Size ,
just place child at offset: Offset = parent.center - child.center

To pin it to the topLeft or topRight, the code is similar, the offset you should draw/place from should be something like parent.topRight - child.topRight.

Infact you can use the alignment (horizontal, vertical etc) values you are familiar with to handle these.

You will just need to know what are the bounds you are working with.

For measuring the text, there is a handy TextMeasurer .

[efemoney]

I am not saying it will be suuuuper simple but its shouldnt be that complex 😅