In today’s tutorial, we will learn how to implement progress indicators in Kotlin Compose Multiplatform for both Android & iOS platforms. We will be exploring LinearProgressIndicator and CircularProgressIndicator with all their properties. We will also learn about showing and hiding the progress indicator on button click using State.

Progress Indicators in Kotlin Compose Multiplatform (KMP, KMM)

Progress indicators are essential UI components to show the app users that a background task is running. In Kotlin Compose Multiplatform, two types of progress indicators are available: LinearProgressIndicator and CircularProgressIndicator.

CircularProgressIndicator in KMP KMM:

The circular progress indicator is a circular-shaped material-style progress indicator. We have all seen this indicator in many mobile applications.

Code explanation:

• modifier: To set Circular progress indicator Size.

Screenshot:

Properties of CircularProgressIndicator to customize:

1. Modifier.width(50.dp): To set the custom size of CircularProgressIndicator.
2. color: To set the Color of the progress indicator. In which colour is the progress indicator animation performs.
3. backgroundColour: To set the background colour of CircularProgressIndicator.
4. strokeWidth: T0 sets the thickness of the CircularProgressIndicator animation bar.
5. strokeCap: To set the effect of how a CircularProgressIndicator single animation cycle will end in a specific shape.
6. progress: To set the progress in CircularProgressIndicator. It supports float values, and the supported values range from 0.0 to 1.0. It creates a dynamic progress indicator where you want to show progress depending on API or User responses.

strokeCap Supported values:

1. strokeCap = StrokeCap.Butt
2. strokeCap = StrokeCap.Square
3. strokeCap = StrokeCap.Round

Code:

Screenshot:

How to Show and hide the CircularProgressIndicator on button click:

We have to use State in our application to show and hide the progress indicator on certain events. In this example, we have a button, and on button click, it first shows the CircularProgressIndicator, and then on button click again hides the progress indicator.

Code explanation:

1. loading: Is the boolean type mutable state.
2. Box: We are wrapping the CircularProgressIndicator inside the Box component so that it does not leave the empty area when it hides. This could cause the bottom components to move up.
3. if (loading) { } : In Kotlin Compose Multiplatform, we can use the If condition to replace the ternary operator. So when the loading value is true, it shows the progress indicator; when false, it does not render it.

Live screenshot:

Increase the progress of CircularProgressIndicator on Button Click:

The CircularProgressIndicator has a property progress which supports values from 0.0 to 1.0. In this example, we create a State Whose value increases to +0.1 every time the user clicks the button. We have also created a button to reset the State value.

Screenshot:

LinearProgressIndicator in KMP KMM:

The LinearProgressIndicator is a horizontally shaped progress indicator in Kotlin Compose Multiplatform. The animation starts from the left side and goes to the right side. Moving on to a background.

Screenshot:

Custom LinearProgressIndicator:

To modify and customize the LinearProgressIndicator, we must use the same properties as the CircularProgressIndicator.

Code explanation:

1. Modifier.width(300.dp): To set the custom width of LinearProgressIndicator.
2. color: To set the color of LinearProgressIndicator.
3. backgroundColor: To set the background colour of LinearProgressIndicator.
4. strokeCap: To set how the LinearProgressIndicator animation ends.

Screenshot:

Creating Custom Golden Shimmer Gradient ProgressBar in KMP KMM:

In Kotlin Compose Multiplatform, we can create the custom gradient effect Linear Progress Bar. It has a moving gradient effect inside it.

Code explanation:

1. @Composable: Declares that this function is a Jetpack Compose UI component.
2. width: Dp = 300.dp and height: Dp = 10.dp: These are default parameters allowing the caller to specify the width and height of the shimmer bar.
3. rememberInfiniteTransition(): Creates and remembers an animation that runs forever. This is used to animate the shimmer effect continuously.
4. animateFloat() with initialValue = -300f and targetValue = 600f: Animates a floating-point value from left to right. This value determines the position of the shimmer highlight.
5. infiniteRepeatable() with tween() and LinearEasing: Repeats the animation endlessly using a tween (interpolation over time) with a smooth, constant motion.
6. durationMillis = 1200: Sets each shimmer loop’s time — here, 1200 milliseconds or 1.2 seconds.
7. RepeatMode.Restart: After completing, the shimmer effect returns to the starting point and repeats.
8. Brush.linearGradient(): Creates a gradient visually representing the shimmer. It’s painted from left to right using golden colors.
9. colors list in linearGradient: Includes shades of gold, amber, and semi-transparent gold to give the shimmer a glowing, metallic effect.
10. start = Offset(animatedOffset, 0f) and end = Offset(animatedOffset + 200f, 0f): Controls the position of the shimmer animation — it moves horizontally across the progress bar.
11. Canvas(): A custom drawing component in Jetpack Compose that lets you draw shapes like rectangles.
12. Modifier.width() and Modifier.height() on Canvas: Sets the overall size of the progress bar container.
13. drawRect() with a solid beige color: Draws the static background of the progress bar, contrasting the shimmer animation.
14. drawRect() with goldenBrush: Painting the moving gradient over the static background creates the animated shimmer effect.

Screenshot: