I'd like to create a progress button, where the te...
# compose
c
I'd like to create a progress button, where the text is replaced with a circular progress when it is in a loading state, but I don't seem to be able make it work. I would like the button to keep its size when the loading progress is showing, does it mean I would have to do my own measurements? code and current state in 🧵
Copy code
@Composable
fun ProgressButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    loading: Boolean = false,
    content: @Composable RowScope.() -> Unit
) {
    if (loading) {
        Box(
            modifier = modifier
                .defaultMinSize(minWidth = ButtonDefaults.MinWidth)
                .height(ButtonDefaults.MinHeight)
                .background(color = MaterialTheme.colors.primary)
                .padding(4.dp),
           contentAlignment = Alignment.Center
        ) {
            CircularProgressIndicator(
                color = MaterialTheme.colors.onPrimary
            )
        }
    } else Button(onClick = onClick, modifier = modifier, enabled = enabled, content = content)
}
s
Seems there are two ways. 1. Make button width not depending of content inside. Fixed .dp or some kind of Row/Column with weights. 2. Make fixed width button content and just play with it. Change image content inside and/or make it visible/invisible.
c
thanks for your suggestions, button width can't be fixed since it will depend on content. I somehow need to know what the size of the button will be and then set that to the box that holds the progress indicator
s
I suggest use same button with icon all the time but change icon (possible with animation if need for progress) depending on state.
c
solved it with
Copy code
onGloballyPositioned
modifier on the button, and let the progress Box size use that size