2

This question is more about why Jetpack compose is so unintuitive. I am trying to better understand this library.

With the below composable

fun RoundedButton(modifier: Modifier, onClick: () -> Unit) {
    Box(modifier = modifier.padding(horizontal = 10.dp)) {
        Button(
            onClick = { /* ... */ },
            shape = CircleShape,
        ) {
            // Inner content including an icon and a text label
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = "Favorite",
                modifier = Modifier.size(20.dp)
            )
        }

    }
}

I get this

rounded button

So one would assume, that in order to make it rounded I can just set the size (width and height) to an value, and if I do so

@Composable
fun RoundedButton(modifier: Modifier, onClick: () -> Unit) {
    Box(modifier = modifier.padding(horizontal = 10.dp)) {
        Button(
            onClick = { /* ... */ },
            shape = CircleShape,
            modifier = modifier.size(40.dp)
        ) {
            // Inner content including an icon and a text label
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = "Favorite",
                modifier = Modifier.size(20.dp)
            )
        }

    }
}

I get this.

enter image description here

Question:

I do realise that there are other variations of Button out there like IconButton etc, but why make simple things so complicated that you cannot arrive at RoundedButton or IconButton from a Button?

Giridhar Karnik
  • 2,213
  • 4
  • 27
  • 47
  • 2
    `Button()` is from Compose Material. Material Design is an opinionated design system, including such things as minimum padding. If you do not like those opinions, do not use Compose Material, but instead create your own design system based on non-Material composables. Or, find other composables within Compose Material that better fit your needs -- `FloatingActionButton()` might work for your use case. – CommonsWare Nov 26 '22 at 16:25
  • 1
    Check also https://stackoverflow.com/questions/66671902/how-to-create-a-circular-outlined-button-with-jetpack-compose – Gabriele Mariotti Nov 26 '22 at 17:02

1 Answers1

2

The Button Composable has a default contentPadding.

object ButtonDefaults {

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

    ...
}

That's why when you set the size to 40.dp the Icon is not visible. If you set the contentPadding to 1.dp (I'm not sure if 0.dp works), you can see the Icon.

@Composable
fun RoundedButton(modifier: Modifier, onClick: () -> Unit) {
    Box(modifier = modifier.padding(horizontal = 10.dp)) {
        Button(
            onClick = { /* ... */ },
            shape = CircleShape,
            modifier = modifier.size(40.dp),
            contentPadding = PaddingValues(1.dp)
        ) {
            // Inner content including an icon and a text label
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = "Favorite",
                modifier = Modifier.size(20.dp)
            )
        }

    }
}
Hamed
  • 459
  • 4
  • 20