Progress Bar in Jetpack

In Jetpack Compose, the ProgressIndicator composables allow you to display progress in different styles: circular or linear (horizontal). Below are examples of how to use both types of progress bars:

1. Circular ProgressBar

Indeterminate Circular Progress

An indeterminate progress bar shows continuous spinning to indicate loading without specifying progress.

import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun IndeterminateCircularProgressBar() {
    CircularProgressIndicator(
        modifier = Modifier.size(48.dp), // Adjust size
        color = androidx.compose.material3.MaterialTheme.colorScheme.primary, // Change color
        strokeWidth = 4.dp // Adjust thickness
    )
}

Determinate Circular Progress

For determinate progress, provide a progress parameter with a value between 0.0f and 1.0f.

import androidx.compose.runtime.*

@Composable
fun DeterminateCircularProgressBar() {
    var progress by remember { mutableStateOf(0.0f) }

    // Simulate progress updates
    LaunchedEffect(Unit) {
        while (progress < 1.0f) {
            progress += 0.1f
            kotlinx.coroutines.delay(500) // Simulate loading delay
        }
    }

    CircularProgressIndicator(
        progress = progress,
        modifier = Modifier.size(48.dp),
        color = androidx.compose.material3.MaterialTheme.colorScheme.primary,
        strokeWidth = 4.dp
    )
}

2. Linear ProgressBar (Horizontal)

Indeterminate Linear Progress

Displays a continuously animating horizontal loader.

import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun IndeterminateLinearProgressBar() {
    LinearProgressIndicator(
        modifier = Modifier.fillMaxWidth(), // Full width
        color = androidx.compose.material3.MaterialTheme.colorScheme.primary,
        trackColor = androidx.compose.material3.MaterialTheme.colorScheme.secondary
    )
}

Determinate Linear Progress

Provides progress updates between 0.0f and 1.0f.

@Composable
fun DeterminateLinearProgressBar() {
    var progress by remember { mutableStateOf(0.0f) }

    // Simulate progress updates
    LaunchedEffect(Unit) {
        while (progress < 1.0f) {
            progress += 0.1f
            kotlinx.coroutines.delay(500) // Simulate delay
        }
    }

    LinearProgressIndicator(
        progress = progress,
        modifier = Modifier.fillMaxWidth(),
        color = androidx.compose.material3.MaterialTheme.colorScheme.primary,
        trackColor = androidx.compose.material3.MaterialTheme.colorScheme.secondary
    )
}

3. Styling and Customization

Both CircularProgressIndicator and LinearProgressIndicator can be styled using:

• Color: Change the color of the progress bar using the color parameter.
• Track Color: Use the trackColor parameter in LinearProgressIndicator for customizing the background track.
• Size and Thickness: Adjust size with Modifier.size() and strokeWidth for CircularProgressIndicator.

Example: Full Layout with Both Progress Bars

@Composable
fun ProgressBarExample() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Indeterminate Circular Progress")
        IndeterminateCircularProgressBar()

        Text("Determinate Circular Progress")
        DeterminateCircularProgressBar()

        Text("Indeterminate Linear Progress")
        IndeterminateLinearProgressBar()

        Text("Determinate Linear Progress")
        DeterminateLinearProgressBar()
    }
}

Key Features

1. Indeterminate:

• For unknown progress durations.
• Does not require a progress parameter.

1. Determinate:

• Displays specific progress between 0 and 100% (0.0f to 1.0f).

1. Customizable:

• Fully customizable in terms of size, color, thickness, and layout.

These ProgressIndicator composables provide flexible and modern progress visualization for any Compose-based application.