Blog Infos
Author
Published
Topics
, ,
Published
Open-sourcing this Jetpack Compose widget

Breath effect when reaching the last segment

“Kamehameha-like” animation

Drawing Custom Shapes in a Canvas With Compose
@Composable
fun SegmentedProgressBar() {
Canvas(
modifier = Modifier
onDraw = {
// Draw the segments
}
)
}
@Composable
fun SegmentedProgressBar(
segmentCount: Int,
modifier: Modifier = Modifier,
spacing: Dp = 0.dp,
angle: Float = 0f,
segmentColor: SegmentColor = SegmentColor(),
) {
val computer = remember { SegmentCoordinatesComputer() }
val spacingPx = LocalDensity.current.run { spacing.toPx() }
Canvas(
modifier = modifier.fillMaxWidth(),
onDraw = {
(0 until segmentCount).forEach { position ->
val segmentCoordinates = computer.segmentCoordinates(
position = position,
segmentCount = segmentCount,
width = size.width,
height = size.height,
spacing = spacingPx,
angle = angle
)
drawSegment(
coordinates = segmentCoordinates,
color = segmentColor
)
}
}
)
}

I’ve created an extension function to draw the segment as we’ll need it to draw the progress segment.

private fun DrawScope.drawSegment(coordinates: SegmentCoordinates, color: SegmentColor) {
val path = Path().apply {
reset()
moveTo(coordinates.topLeftX, 0f)
lineTo(coordinates.topRightX, 0f)
lineTo(coordinates.bottomRightX, size.height)
lineTo(coordinates.bottomLeftX, size.height)
close()
}
drawPath(
path = path,
color = color.color,
alpha = color.alpha,
)
}
view raw drawSegment.kt hosted with ❤ by GitHub

Finally, drawing the progress bar results in retrieving its coordinates from the SegmentedCoordinatesComputer and calling the drawSegment extension method.

@Composable
fun SegmentedProgressBar(
segmentCount: Int,
modifier: Modifier = Modifier,
progress: Float = 0f,
spacing: Dp = 0.dp,
angle: Float = 0f,
segmentColor: SegmentColor = SegmentColor(),
progressColor: SegmentColor = SegmentColor(),
) {
// Init computer
Canvas(
modifier = modifier.fillMaxWidth(),
onDraw = {
// Draw segments
val progressCoordinates = computer.progressCoordinates(
progress = progress.coerceIn(0f, segmentCount.toFloat()),
segmentCount = segmentCount,
width = size.width,
height = size.height,
spacing = spacingPx,
angle = angle
)
drawSegment(
coordinates = progressCoordinates,
color = progressColor
)
}
)
}

Job Offers

Job Offers


    Android Developer

    Small and Modern GmbH
    Hamburg, Remote (Germany)
    • Full Time
    apply now

    Android Build Engineer

    Pinterest
    San Francisco, CA | Seattle, WA
    • Full Time
    apply now

    Senior Android Developer (Remote)

    Komoot
    Europe
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

Jobs

Animation with Compose
val animatedProgress by animateFloatAsState(targetValue = progress)
val progressCoordinates = computer.progressCoordinates(
progress = animatedProgress,
// Other arguments
)
Was migrating to Compose worth it?
Using This Widget in Your Project

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
Modern mobile applications are already quite serious enterprise projects that are developed by hundreds…
READ MORE
blog
Ask yourself a fairly standard question for any interview to fill an Android position:…
READ MORE
blog
This article discusses some of the standard library changes that come under the Kotlin 1.5 version.…
READ MORE
blog
Recently AndroidX Datastore 1.0 was released. The moment has come, it’s time to migrate…
READ MORE

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.

Menu