I tried to achieve an online green dot before text...

# compose

[Samir Basnet]

I tried to achieve an online green dot before text using drawWithContent but the text/content is overlapping . Can anyone guide me to solve this issue?

Text(
    text = "Online",
    style = MaterialTheme.typography.subtitle2,
    maxLines = 1,
    color = MaterialTheme.colors.onSurface,
    modifier = Modifier
        .drawWithContent {
            drawCircle(color = green, radius = 25f)
            drawContent()
        }
        .constrainAs(online) {
            start.linkTo(name.start)
            top.linkTo(verifiedLogo.bottom, 10.dp)
        }

)

[Albert Chang]

drawWithContent doesn't affect the size of the layout so you should reserve space for the circle first. Then you have to specify the position in drawCircle otherwise the circle will be placed in the center of the layout.

[Samir Basnet]

@Albert Chang Thanks Got it.

[Samir Basnet]

@Albert Chang I added padding(start=20.dp) after constrainAs modifier to reserve space and in drawCircle gave center=Offset(25f,height/2) and it works but that padding value of 20.dp i had to hit and trial to get that perfect number as the padding is in dp and that center was in Offet float values . is there any way to know proper paddiing needed ?

[Samir Basnet]

Anyways got it working . Thanks for that. Also @Albert Chang if you could help with one more thing, the mapview in the screen shot is croppped to that size when i place it inside a scrollable container but covers full height if the scrollable property is removed. Any idea how to solve it? I have copy pasted code from Crane sample app for the MapView

[Albert Chang]

I don't know and you may want to start a new thread.