The Jetpack Compose implementation of RoundCornerProgressBar, with full feature parity to the Android View module. Same look, same animation, same set of options — expressed as composable functions.

See the project README for the library overview.

Download

implementation("com.akexorcist:roundcornerprogressbar-compose:2.3.0")

Usage

All composables live in the com.akexorcist.roundcornerprogressbar.compose package. Every parameter has a default that matches the View library, so the only required argument is progress (and icon / text for the icon and text variants).

Size is controlled through the modifier. When no size constraint is given the bar falls back to 240 x 30 dp.

RoundCornerProgressBar

Simple round corner progress bar.

RoundCornerProgressBar(
    progress = 40f,
    modifier = Modifier
        .width(260.dp)
        .height(30.dp),
    max = 100f,
    radius = 10.dp,
    backgroundPadding = 2.dp,
    backgroundColor = Color(0x0A000000),
    progressColor = Color(0xFFEF5350),
    secondaryProgress = 60f,
    secondaryProgressColor = Color(0x40EF5350),
)

// Gradient, reversed, with progress change animation
RoundCornerProgressBar(
    progress = 70f,
    progressColors = listOf(Color(0xFF00BCD4), Color(0xFF3F51B5)),
    reverse = true,
    animationEnabled = true,
    animationSpeedScale = 1f,
    onProgressChanged = { progress -> /* ... */ },
)

Parameters

Parameter	Type	Default	Matches (View)
progress	Float	—	rcProgress
modifier	Modifier	Modifier	layout_width / layout_height
max	Float	100f	rcMax
secondaryProgress	Float	0f	rcSecondaryProgress
radius	Dp	30.dp	rcRadius
backgroundPadding	Dp	0.dp	rcBackgroundPadding
reverse	Boolean	false	rcReverse
backgroundColor	Color	Color(0xFF5F5F5F)	rcBackgroundColor
progressColor	Color	Color(0xFF7F7F7F)	rcProgressColor
progressColors	List<Color>?	null	rcProgressColors (gradient)
secondaryProgressColor	Color	Color.Transparent	rcSecondaryProgressColor
secondaryProgressColors	List<Color>?	null	rcSecondaryProgressColors (gradient)
animationEnabled	Boolean	false	rcAnimationEnable
animationSpeedScale	Float	1f	rcAnimationSpeedScale
onProgressChanged	((Float) -> Unit)?	null	OnProgressChangedListener
onSecondaryProgressChanged	((Float) -> Unit)?	null	OnProgressChangedListener

CenteredRoundCornerProgressBar

Round corner progress bar with the progress expanding from the center. Same parameters as RoundCornerProgressBar.

CenteredRoundCornerProgressBar(
    progress = 50f,
    modifier = Modifier
        .width(260.dp)
        .height(30.dp),
    radius = 10.dp,
    backgroundPadding = 4.dp,
)

IconRoundCornerProgressBar

Round corner progress bar with a heading icon. The icon is a Painter, so use painterResource(...) for a drawable.

IconRoundCornerProgressBar(
    icon = painterResource(R.drawable.ic_android),
    progress = 90f,
    modifier = Modifier
        .width(260.dp)
        .height(44.dp),
    max = 150f,
    radius = 5.dp,
    backgroundPadding = 2.dp,
    iconSize = DpSize(40.dp, 40.dp),
    iconPadding = PaddingValues(5.dp),
    iconBackgroundColor = Color(0xFF00796B),
    onIconClick = { /* ... */ },
)

Additional parameters

In addition to the RoundCornerProgressBar parameters:

Parameter	Type	Default	Matches (View)
icon	Painter	—	rcIconSrc / setIconImage*
iconContentDescription	String?	null	accessibility
iconSize	DpSize	DpSize(20.dp, 20.dp)	rcIconSize / rcIconWidth / rcIconHeight
iconPadding	PaddingValues	PaddingValues(0.dp)	rcIconPadding / rcIconPadding*
iconBackgroundColor	Color	Color(0xFF5F5F5F)	rcIconBackgroundColor
onIconClick	(() -> Unit)?	null	OnIconClickListener

The View version uses wrap_content for its height. In Compose, size the bar with the modifier — a common choice is iconSize.height + backgroundPadding * 2.

TextRoundCornerProgressBar

Round corner progress bar with a text label that moves with the progress.

TextRoundCornerProgressBar(
    text = "75",
    progress = 75f,
    modifier = Modifier
        .width(260.dp)
        .height(30.dp),
    textColor = Color.White,
    textSize = 16.sp,
    textMargin = 10.dp,
    textInsideGravity = TextGravity.Start,
    textOutsideGravity = TextGravity.Start,
    textPositionPriority = TextPositionPriority.Inside,
)

Additional parameters

In addition to the RoundCornerProgressBar parameters:

Parameter	Type	Default	Matches (View)
text	String	—	rcTextProgress
textColor	Color	Color.White	rcTextProgressColor
textSize	TextUnit	16.sp	rcTextProgressSize
textMargin	Dp	10.dp	rcTextProgressMargin
textInsideGravity	TextGravity	TextGravity.Start	rcTextInsideGravity
textOutsideGravity	TextGravity	TextGravity.Start	rcTextOutsideGravity
textPositionPriority	TextPositionPriority	TextPositionPriority.Inside	rcTextPositionPriority

TextGravity has Start and End. TextPositionPriority has Inside and Outside.

IndeterminateRoundCornerProgressBar / IndeterminateCenteredRoundCornerProgressBar

Endlessly animating progress bars. They do not take a progress value — the sweep runs automatically. There is no animationEnabled parameter; animationSpeedScale controls the sweep duration.

IndeterminateRoundCornerProgressBar(
    modifier = Modifier
        .width(260.dp)
        .height(10.dp),
    backgroundColor = Color(0x0A000000),
    progressColor = Color(0xFFEF5350),
    animationSpeedScale = 3f,
)

IndeterminateCenteredRoundCornerProgressBar(
    modifier = Modifier
        .width(260.dp)
        .height(10.dp),
    backgroundColor = Color(0x0A000000),
    progressColor = Color(0xFFEF5350),
    animationSpeedScale = 0.75f,
)

Parameters

Parameter	Type	Default
modifier	Modifier	Modifier
secondaryProgress	Float	0f
radius	Dp	30.dp
backgroundPadding	Dp	0.dp
reverse	Boolean	false
backgroundColor	Color	Color(0xFF5F5F5F)
progressColor	Color	Color(0xFF7F7F7F)
progressColors	List<Color>?	null
secondaryProgressColor	Color	Color.Transparent
secondaryProgressColors	List<Color>?	null
animationSpeedScale	Float	1f
onProgressChanged	((Float) -> Unit)?	null

Gradient Progress Color

Pass two or more colors through progressColors (or secondaryProgressColors) to render a horizontal gradient. It overrides the single progressColor when set.

RoundCornerProgressBar(
    progress = 50f,
    backgroundColor = Color(0x0A000000),
    backgroundPadding = 4.dp,
    radius = 30.dp,
    progressColors = listOf(Color(0xFF009688), Color(0xFF80CBC4)),
)

Progress Change Animation

Animation is disabled by default. Enable it with animationEnabled = true; the bar then animates whenever progress changes. animationSpeedScale accepts a value between 0.2 and 5.0 (default 1.0) — higher slows the animation down, lower speeds it up. This reproduces the AccelerateDecelerateInterpolator curve of the View library.

RoundCornerProgressBar(
    progress = progress,
    animationEnabled = true,
    animationSpeedScale = 1f,
)

The indeterminate bars are always animating and ignore animationEnabled.