https://kotlinlang.org logo
#compose
Title
# compose
b

Brais Gabin

11/22/2023, 2:23 PM
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?
s

Stylianos Gakis

11/22/2023, 2:29 PM
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
m

myanmarking

11/22/2023, 4:11 PM
doing it with modifier you are limited to paint API. You could create a wrapper composable, that way, you can do whatever you want
s

Stylianos Gakis

11/22/2023, 4:24 PM
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 😄
m

myanmarking

11/22/2023, 4:26 PM
I dont think you can do that with a modifier. Might be a way tho
s

Stylianos Gakis

11/22/2023, 4:33 PM
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.
m

myanmarking

11/22/2023, 4:35 PM
I mean adding a badge slot composable while only using a modifier
👍 1
e

efemoney

11/29/2023, 1:50 PM
> 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
same 1
b

Brais Gabin

11/29/2023, 2:16 PM
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.
e

efemoney

11/29/2023, 2:18 PM
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 😅
2 Views