A modern programming language that makes developers happier.

kotlinlang

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?

I’ve done this <https://github.com/HedvigInsurance/android/blob/4a89b94a1c26b41b11ac6ecf39957605279edb55/app/app/src/main/kotlin/com/hedvig/android/app/ui/NavUtils.kt#L14-L28|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

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

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 :smile:

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

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.

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

> 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 <@UD5B40SMN>? Pretty sure a modifier is more than plenty to handle it

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.

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

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

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` .

I am not saying it will be suuuuper simple but its shouldnt be *that* complex :sweat_smile: