ProgressButton

Jitpack MIT

What?

We needed an Button that uses a progress state as background. As we didn’t found something like that in Jetpack Compose we decided to build it on our own and open source it.

How?

The following creates a ProgressButton which starts the progress after 1 seconds while the progress will take 10 seconds.

ProgressButton(
    modifier = Modifier,
    startDelay = 1.seconds,
    duration = 10.seconds,
    onClick = {
        // Do something on click 
    },
    onFinished = {
        // Do something after progress finished
    }
) {
    Box(
        modifier = Modifier
            .padding(start = 26.dp, end = 26.dp)
            .fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text("Hello World")
    }
}

You can also checkout the SampleActivity for more code snippets.

Docs

fun ProgressButton(
    modifier: Modifier,
    backgroundColor: Color = Color.Transparent,
    progressColor: Color = MaterialTheme.colors.primary,
    contentColor: Color = contentColorFor(progressColor),
    contentColorDisabled: Color = MaterialTheme.colors.primaryVariant,
    enabled: Boolean = true,
    startDelay: Duration = Duration.ZERO,
    duration: Duration = 10L.seconds,
    restDuration: Duration = duration,
    onClick: () -> Unit = {},
    onFinished: () -> Unit = {},
    content: @Composable () -> Unit
) : Unit
Parameter Description
Modifier Modifier to be applied to the button
backgroundColor The color behind the progress
progressColor The progress color which which will animate away after duration reaches zero
contentColor Color of the content of the button
contentColorDisabled Color of the content of the button when its disabled
enabled Enables or disable the button
startDelay An delay before the progress actually starts
duration The duration of the progress
restDuration The duration which is left of duration to reach zero
onClick Will be called when the button got clicked and enabled is true
onFinished Will be called when the duration reaches zero
content The content of the button

Download

ProgressButton is hosted on JitPack. Here’s how you include it in your gradle project:

Step 1. Add the JitPack repository to your build file:

allprojects {
    repositories {
        // Other repositories
        maven { 
            url 'https://jitpack.io'
            content {
                // A bit extra safety
                includeGroup("com.github.ioki-mobility")
            }
        }
    }
}

Step 2. Add the dependency:

dependencies {
    implementation 'com.github.ioki-mobility:ProgressButton:<latest-version>'
}

GitHub

View Github