Hello I ve got a button that wraps an Image and Text and onC kotlinlang #compose

Hello, I've got a button that wraps an Image and Text, and onClick those two are replaced with a ProgressBar. Now, when the ProgressBar shows up, the button wraps it so the size changes in between those two sets of content. What's the best way to not let the button get smaller and keep the original size of the Image + Text and center the ProgressBar in that extra space?

I've tried nothing and I'm out of ideas.... Just kidding, I managed to get to the expected result by keeping the content (Image + Text) and adding a container and playing with its alpha:

Copy code

Box {
    val showLoader = state == ButtonMainState.Loader

    Row(modifier = Modifier.alpha(if (showLoader) 0f else 1f)) {
        val color =
            when {
                enabled.not() -> style.disabledContentColor
                else -> style.idleContentColor
            }

        icon?.let {
            Image(
                painter = painterResource(id = it),
                contentDescription = iconContentDescription,
                colorFilter = ColorFilter.tint(color),
                modifier = Modifier.size(16.dp)
            )
            Spacer(modifier = Modifier.width(8.dp))
        }

        Text(
            text = text,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            style = size.textStyle,
            color = color
        )
    }

    if (showLoader) {
        SomeProgressBar(
            modifier = Modifier.size(size.loaderSize).align(Alignment.Center),
        )
    }
}

Any better approach would be greatly welcomed 😊

Alex Vanyo

02/09/2023, 7:20 PM

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1673311120934409 has a pretty similar use case! The downside of

alpha

is that it leaves all of that content in place semantically, which isn’t quite optimal, but that’s on the right track to a solution. If you instead measure (but don’t place), you can keep the size the same while preventing the content from being in the semantic tree.

galex

02/10/2023, 6:23 PM

@Alex Vanyo Thank you, that modifier is so simple yet so elegant, I love it!

2 Views