I also don’t want the button to go grey so setting...

# compose

[mattinger]

I also don’t want the button to go grey so setting enabled = false isn’t my answer i don’t think.

[Javier]

Maybe you should override the disabled theme

[mattinger]

Honestly, the ideal thing is to stop the entire screen (or portion) from being clicked on, because there could be other content which is clickable.

[Sergey Y.]

Have you tried:

onClick { if (buttonState == IDLE) proceedClick() }

[mattinger]

@Sergey Y. yes, but it allows other things to be clicked., plus i still see the ripple.

[Javier]

onClick can be null?

[Javier]

if it is null, is it showing the ripple?

[mattinger]

I accomplished this in the legacy android world by posting a panel over the top of the content which would swallow all the clicks.

[mattinger]

@Javier nope, non nullable

[mattinger]

also tried Modifier.clickable, which doesn’t change the behavior.

[Sergey Y.]

Or you could try a more declarative-ish way and conditionally replace the real clickable button with a progress placeholder. For instance,

@Composable
fun ProgressButton(state) {
   if (state == PROGRESS) {
       ProgressStubComposable()
   } else {
       StandardButton(...)
   }
}

[Sergey Y.]

For smooth transition you could use Crossfade composable function

[Sergey Y.]

@Composable
fun ProgressButton(state) {
   Crossfade(state) {
      when(it) {
        PROGRESS -> ProgressStubComposable()
        IDLE -> StandardButton(...)
      }
   }
}

[Sergey Y.]

something like that

[Adam Powell]

beware placing blocking elements overlapping things to accomplish this sort of thing; keyboard focus and accessibility services will click right through them 🙂

[Zach Klippenstein (he/him) [MOD]]

How would you block acessibility? Is it enough to do something like Modifier.semantics(mergeAllDescendants = true) { disabled() }?

[mattinger]

So I think i settled on a composable which alters the theme to make sure that disabled buttons look the same as enabled buttons.

[mattinger]

And then i can just set the enabled flag on the button

[mattinger]

AlwaysEnabledButtonAppearance {
            StandardButton(
                onClick = {
                    if (buttonState.value == LoadingState.IDLE) {
                        buttonState.value = LoadingState.LOADING
                        GlobalScope.launch {
                            delay(3000L)
                            buttonState.value = LoadingState.IDLE
                        }
                    }
                },
                enabled = buttonState.value == LoadingState.IDLE
            ) {
                ButtonLoadingIndicator(buttonState)
                Text(text = "Foobar")
            }
        }

[mattinger]

of course, this only works if that button is always in the enabled state, but i think that can be handled with a conditional if i need to go from a disabled button to a loading style button

[Javier]

I was searching for a way to change the disabled color but it is not a property, it is an alpha of an existing color, how have you changed it? Custom theme?

[Zach Klippenstein (he/him) [MOD]]

I think you change disabled color by providing an EmphasisAmbient

[mattinger]

Yes.

[mattinger]

I have my own theme where i specifically define the colors used in certain scenarios. That’s what StandardButton uses

[mattinger]

border = BorderStroke(
            XDSTheme.dimensions.standardButtonBorderWidth,
            ButtonConstants.defaultButtonBackgroundColor(
                enabled = enabled,
                defaultColor = XDSTheme.colors.buttonPrimaryColor,
                disabledColor = XDSTheme.colors.buttonDisabledColor
            )
        )

[mattinger]

likewise for contentColor

[mattinger]

So i can just wrap the existing theme and change the disabled colors to look like it’s an enabled button.

[mattinger]

This makes it pretty simple now:

[mattinger]

@Composable
fun StandardLoadingButton(
    onClick: suspend () -> Unit,
    onClickScope: CoroutineScope = GlobalScope,
    modifier: Modifier = Modifier,
    buttonState: MutableState<LoadingState> = mutableStateOf(LoadingState.IDLE),
    content: @Composable RowScope.() -> Unit
) {
    AlwaysEnabledButtonAppearance {
        StandardButton(
            modifier = modifier,
            onClick = {
                if (buttonState.value == LoadingState.IDLE) {
                    buttonState.value = LoadingState.LOADING
                    onClickScope.launch {
                        onClick()
                        buttonState.value = LoadingState.IDLE
                    }
                }
            },
            enabled = buttonState.value == LoadingState.IDLE
        ) {
            ButtonLoadingIndicator(buttonState)
            content()
        }
    }
}

[Javier]

interesting, and I would like to check the ambient solution, for apps which doesnt use custom themes can be enough

[mattinger]

but the general trick is that if you change the border, backgroundColor and contentColor parameters on the Button you are instantiating you can also get this sort of control

[mattinger]

this is where the source code comes in handy.

[mattinger]

border: BorderStroke? = null,
    backgroundColor: Color = ButtonConstants.defaultButtonBackgroundColor(enabled),
    contentColor: Color = ButtonConstants.defaultButtonContentColor(
        enabled,
        contentColorFor(backgroundColor)
    )

[mattinger]

My StandardButton is overriding all 3 of these defaults to provide colors from my theme instead of the Material theme.

[mattinger]

But if you’re just using material theme, you can just specify these directly in your composable

[mattinger]

you can just always pass true for the enabled flag to the functions shown above