5

I am trying to create a custom button that is small and can show a numerical value between 0 and 99 as Text. Depending on the fontsize the Text disappears from the Button when the size of the Button is set too low, even though there still is space. How do I pass these limits and show the numbers inside the Button despite the small size?

This is my current code:

Button(
    onClick = { /*TODO*/ },
    shape = CircleShape,
    modifier = Modifier
        .size(20.dp)
) {
    Text(
        text = "23",
        fontSize = 7.sp,
    )
}

At this Button size the text disappears.

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
bill
  • 167
  • 1
  • 2
  • 7

1 Answers1

20

The Button has a default contentPadding which is applied internally between the container and the content.
The default values (ButtonDefaults.ContentPadding) are:

private val ButtonHorizontalPadding = 16.dp
private val ButtonVerticalPadding = 8.dp

You can override it adding something like contentPadding = PaddingValues(0.dp) to the Button:

Button(
    onClick = { /*TODO*/ },
    shape = CircleShape,
    modifier = Modifier
        .size(20.dp),
    contentPadding = PaddingValues(0.dp)
) {
    Text(
        text = "23",
        fontSize = 7.sp,
    )
}

enter image description here

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
  • 1
    The answer to this sort of question always seems to be along the lines of "because the Material Design team made a bad decision and now it's our problem" XD Never ever thought I'd miss the XML system :\ – CCJ Jun 07 '23 at 00:36