How to show Linear Progress Indicator in Android Jetpack Compose

By Mohammed Rashid •  September 4th, 2022 • 

Progress indicators are UI elements that help users to identify that something is happening in the background. In this Android Jetpack Compose tutorial, let’s learn how to add la inear progress indicator.

LinearProgressIndicator composable helps you to show a linear progress indicator. Following is the code snippet.

@Composable
fun ProgressIndicator(){
    Column{
            LinearProgressIndicator(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(10.dp),
                backgroundColor = Color.LightGray,
                color = Color.Red
            )
    }

The above progress indicator is indeterminate. You can make progress indicator determinate using the progress parameter.

@Composable
fun ProgressIndicator(){
    Column{
            LinearProgressIndicator(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(10.dp),
                progress = 0.5f,
                backgroundColor = Color.LightGray,
                color = Color.Red
            )
    }
}

You can give values from 0.0f to 1f. Here 0.5f progress means 50% of progress.

Following is the complete code to show an indeterminate linear progress indicator.

package com.example.example
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.example.ui.theme.ExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ExampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    ProgressIndicator()
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun ProgressIndicator(){
    Column{
            LinearProgressIndicator(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(10.dp),
                backgroundColor = Color.LightGray,
                color = Color.Red
            )
    }
}


@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ExampleTheme {
        ProgressIndicator()
    }
}

Following is the output.

That’s how you add a progress indicator in Jetpack Compose.

Mohammed Rashid

Keep Reading