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


    Mobile Engineer

    OLX Group
    Remote, Portugal, Spain, Romania, Poland
    • Full Time
    apply now

    Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now

    Senior Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

, ,

Integrating Kotlin/JS in a Kotlin Multiplatform library

Javascript is one of the supported targets for a Kotlin Multiplatform project. One can add Kotlin/JS target to an existing Kotlin Multiplatform Mobile library to output a JS library code. There are various aspects to…
Watch Video

Integrating Kotlin/JS in a Kotlin Multiplatform library

Jigar Brahmbhatt
Kotlin Multiplatform
Touchlab

Integrating Kotlin/JS in a Kotlin Multiplatform library

Jigar Brahmbhatt
Kotlin Multiplatform
Touchlab

Integrating Kotlin/JS in a Kotlin Multiplatform library

Jigar Brahmbhatt
Kotlin Multiplatform
Touchlab

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
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog
Hi, today I come to you with a quick tip on how to update…
READ MORE
blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

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

Menu