1

The title isn't very clear but if you try this code, you'll see that there is no text (for isLoading = false).

@Composable
fun RefreshButton(
    isLoading: Boolean,
    onClick: () -> Unit) {
    Chip(
        label = {
            if (isLoading) {
                CircularProgressIndicator(
                    modifier = Modifier
                        .fillMaxSize()
                        .wrapContentSize(Alignment.Center)
                        .padding(32.dp)
                )
            } else {
                Text(
                    text = "Refresh", modifier = Modifier
                    .fillMaxSize()
                    .wrapContentSize(Alignment.Center)
                    .padding(32.dp)
                )
            }
        },
        onClick = { onClick() },
        modifier = Modifier.width(intrinsicSize = IntrinsicSize.Max)
    )
}

It works without the padding but I would like to add some padding.

I use wear compose and wear compose-foundation 1.0.0-alpha20.

paul
  • 154
  • 1
  • 6

1 Answers1

0

My answer below was wrong. Compose components tend to have hardcoded values like size and padding. This is true for Chip.kt. Here's an answer explaining a related question.

bylazy is correct. You should apply padding to the parent, not the content

    isLoading: Boolean,
    onClick: () -> Unit) {
    Chip(
        label = {
            if (isLoading) {
                CircularProgressIndicator(
                    modifier = Modifier
                        .fillMaxSize()
                        .wrapContentSize(Alignment.Center)
                )
            } else {
                Text(
                    text = "Refresh", modifier = Modifier
                    .fillMaxSize()
                    .wrapContentSize(Alignment.Center)
                )
            }
        },
        onClick = { onClick() },
        modifier = Modifier
           .width(intrinsicSize = IntrinsicSize.Max)
           .padding(32.dp)
    ) }
Darryl Johnson
  • 646
  • 6
  • 14
  • It doesn't do what I want. The chip's size is the same. Here's what I get with padding for the chip: https://ibb.co/2gpwCGc I want to get something like this: https://ibb.co/zGMfYDz . I notice that when I add padding to elements, the chip's size is ok but the text inside is not visible. Whereas, it doesn't do anything when padding is added to the Chip – paul Apr 13 '22 at 09:18
  • is Chip a component you made? Can I see the code for it? I don't see a compose component Chip in my version of Compose, however, some compose components do hardcode values like height. It could be that – Darryl Johnson Apr 14 '22 at 21:50
  • No, it's from the wear compose library (https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#Chip(kotlin.Function0,androidx.wear.compose.material.ChipColors,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function0) You're right about the height. There is a default height in the code : Box( modifier = modifier .height(ChipDefaults.Height) – paul Apr 15 '22 at 05:07
  • In cases like these, I copy and paste the source code and just make the changes I want. Not ideal, but it works. – Darryl Johnson Apr 15 '22 at 16:39