CODEWITHSUNDEEP
androidandroid-jetpack-compose
Solvek
Solvek

Reputation: 5360

How can I align an Icon to top of Text?

enter image description here

This is how I want this to look like

enter image description here Notice that the text is always a number.

How can I align the top of the Heart to the red line (top of text)?

If I can remove the font padding (over the red line and below the number) this also could work for me fine but I do not know how to do this.

This is my code

Row {
            Text(
                pulse.toString(),
                modifier = Modifier
                    .background(Color.Gray),
                fontSize = 60.sp,
                color = vitalModifier.color)
            Spacer(modifier = Modifier.width(10.dp))
            Icon(
                modifier = Modifier
                    .background(Color.Green)
                    .alignBy(LastBaseline),
                painter = painterResource(R.drawable.ic_heart),
                contentDescription = null,
                tint = vitalModifier.color)
        }

Upvotes: 4

Views: 2562

Answers (2)

Tony Barajas
Tony Barajas

Reputation: 124

You can use BadgedBox component and also adjust with property offset, check this example

@Composable
fun MyBadgeBox() {
BadgedBox(
    badge = {
        Badge(containerColor = Color.Red, contentColor = Color.White, modifier = Modifier.offset(x = 6.dp,y = 6.dp)) {
            Icon(
                imageVector = Icons.Default.Star,
                contentDescription = "Star",
                Modifier
                    .size(10.dp)
            )
        }
    },
    modifier = Modifier.padding(16.dp),
) {
    //Icon(imageVector = Icons.Default.Star, contentDescription = "Star")
    Text(text = "88", fontSize = 24.sp)
}
}

enter image description here

Upvotes: 0

Kunal Kalwar
Kunal Kalwar

Reputation: 955

You can use BadgedBox to achieve this

BadgedBox(badge = { Badge { Text("8") } }) {
                    Icon(
                        Icons.Filled.Favorite,
                        contentDescription = "Favorite"
                    )
                }

https://dev.to/farhanroy/jetpack-compose-badge-18ho

enter image description here

Upvotes: 6

Related Questions