Hey, I’m looking for a Button with a CircularProgr...

# compose

[Tim Malseed]

Hey, I’m looking for a Button with a CircularProgressIndicator inside of it.. The indicator would hide/show based on some loading state, and the buttons width might animate accordingly.

I’m sure I found a really good example of this online somewhere, but I’ve lost it. Has anyone got an example, to save me re-implementing this?

[André Kindwall]

Like this?
https://github.com/SimformSolutionsPvtLtd/SSJetPackComposeProgressButton

[Tim Malseed]

Not quite, I remember something a bit simpler, like

Button {
    if (loading) { CircularProgressIndicator() } 
    Text(text = "my text")
}

But, the progress indicator fits the button height - and when it’s displayed, the button width animates.

Sounds specific, but I’m sure it was easy to find last time, and now I’m feeling quite lazy and don’t want to figure it out again 😅

[Pedro Alberto]

I did that and I simply add a fix size for the Progress

circularProgressModifier: Modifier = Modifier.size(16.dp),


CircularProgressIndicator(modifier = circularProgressModifier, color = contentColor, strokeWidth = 2.dp)

[Pedro Alberto]

if you want manipulate the inside position I added this

Box(modifier = Modifier
    .wrapContentSize()
    .background(Color.Transparent)) {
           Button() {
if (loading) { 
CircularProgressIndicator(modifier = circularProgressModifier, color = contentColor, strokeWidth = 2.dp)
}

[Pedro Alberto]

@Tim Malseed please let me know it this helped

[Colton Idle]

I basically created my own button for this since I created a bug report/feature request on issuetracker but it was denied.

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1637300813225400

[Colton Idle]

my own button doesn't use crossfade anymore and just changes alpha. because the button is still "there" the progress bar doesn't shift.

sorry for the ping, but @Chris Sinco [G] lmk if you think that's like a decent way to get this sort of functionality.

[Chris Sinco [G]]

So folks do NOT want the Button width to animate/change based on content?

[Colton Idle]

I think we were moreso saying that if you have a crossfade of a button and a spinner/loader then the spinner "jumps" once the button completely goes away. so its like we want a crossfade, but keeps the view bounds in place.