Skip to content

Instantly share code, notes, and snippets.

@nfaycel
Forked from qamarelsafadi/ProgressButton.kt
Created April 4, 2023 10:14
Show Gist options
  • Save nfaycel/abbdf5d0e15e0d1ae9801ee3cc84eb4d to your computer and use it in GitHub Desktop.
Save nfaycel/abbdf5d0e15e0d1ae9801ee3cc84eb4d to your computer and use it in GitHub Desktop.
This gist will help ypu doing ypur progress button via Compose
@Composable
fun ProgressButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
loading: Boolean = false,
color: Int,
progressColor: Int,
content: @Composable () -> Unit,
) {
val contentAlpha by animateFloatAsState(targetValue = if (loading) 0f else 1f)
val loadingAlpha by animateFloatAsState(targetValue = if (loading) 1f else 0f)
Button(
onClick = onClick,
modifier = modifier,
colors = ButtonDefaults.buttonColors(backgroundColor = colorResource(color)),
) {
Box(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight(),
contentAlignment = Alignment.Center,
) {
CircularProgressIndicator(
modifier = Modifier
.size(size = 16.dp)
.graphicsLayer { alpha = loadingAlpha },
color = colorResource(progressColor),
strokeWidth = 2.dp,
)
Box(
modifier = Modifier.graphicsLayer { alpha = contentAlpha }
) {
content()
}
}
}
}
// How to use it
Surface(
modifier = Modifier.fillMaxSize(),
color = colorResource(id = R.color.gray)
) {
var loading by remember {
mutableStateOf(false)
}
Box() {
ProgressButton(
onClick = { loading = !loading },
modifier = Modifier
.padding(16.dp)
.height(46.dp)
.align(Alignment.Center),
loading = loading,
color = R.color.purple_200,
progressColor = R.color.white
) {
Text(
color = colorResource(id = R.color.white),
text = "Refresh"
)
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment