ProgressBar in Android using Jetpack Compose
ProgressBar is a material UI component in Android which is used to indicate the progress of any process such as for showing any downloading procedure, as a placeholder screen, and many more. In this article, we will take a look at the implementation of ProressBar in Android using Jetpack Compose.
Attributes | Uses |
---|---|
modifier | to add padding to our progress indicator Bar. |
color | to add color to our progress indicator Bar. |
strokeWidth | this attribute is used to give the width of the circular line of the progress indicator Bar. |
progress | to indicate the progress of your circular progress Bar. |
trackColor | to add the color of the track behind the progress indicator Bar.. |
strokeCap | to add the stroke cap of the progress indicator Bar. |
Step-by-Step Implementation
Step 1: Create a New Project
To create a new project in the Android Studio Canary Version please refer to How to Create a new Project in Android Studio Canary Version with Jetpack Compose.
Step 2: Working with the MainActivity.kt file
Navigate to the app > java > your app’s package name and open the MainActivity.kt file. Inside that file add the below code to it. Comments are added inside the code to understand the code in more detail.
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Column {
// in below line we are calling
// a progress bar method.
SimpleCircularProgressComponent()
}
}
}
}
// @Preview function is use to see preview
// for our composable function in preview section.
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
GFGAppTheme {
// we are passing our composable
// function to display its preview.
SimpleCircularProgressComponent();
}
}
@Composable
fun SimpleCircularProgressComponent() {
// CircularProgressIndicator is generally used
// at the loading screen and it indicates that
// some progress is going on so please wait.
Column(
// we are using column to align our
// imageview to center of the screen.
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight(),
// below line is used for specifying
// vertical arrangement.
verticalArrangement = Arrangement.Center,
// below line is used for specifying
// horizontal arrangement.
horizontalAlignment = Alignment.CenterHorizontally
) {
// below line is used to display
// a circular progress bar.
CircularProgressIndicator(
// below line is used to add padding
// to our progress bar.
modifier = Modifier
.size(100.dp)
.padding(16.dp),
// below line is used to add color
// to our progress bar.
color = Color.Blue,
// below line is used to add stroke
// width to our progress bar.
strokeWidth = 8.dp,
// below line is used to add track
// color to our progress bar.
trackColor = Color.LightGray,
// below line is used to add strokeCap
// to our progress bar.
strokeCap = StrokeCap.Round
)
}
}
Now run your app and see the output of the app.