Jetpack Compose Ep:9 — Progress Indicator App

Akshay Sawant
Mar 11 · 4 min read

Here we will see about Progress Indicator and its types with respect to their attributes.

Jetpack Compose Ep:9 — Progress Indicator App

To get your basic done, do visit to my previous articles which are given below:

Note: In build.gradle(Project Level) file, the compose_version is upgraded to ‘1.0.0-beta01’ and maven() is replaced with mavenCentral(). Also the dependency is upgraded to classpath “com.android.tools.build:gradle:7.0.0-alpha08”
classpath “org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.30”

And in build.gradle(Module Level) file, following dependency is upgraded:

implementation ‘com.google.android.material:material:1.3.0’
implementation ‘androidx.activity:activity-compose:1.3.0-alpha03’

Progress Indicator

In Jetpack Compose, there are two types of Progress Indicators and they are as follows:

Circular Progress Indicator

Attributes of Circular Progress Indicator

Note: values gets forcefully obtained if they are outside of the given range.

  • modifier — it is used to provide modifications by means of padding, fill size, etc.
  • color — it is used to color the progress indicator
  • strokeWidth — it is used to provide stroke to its width

Linear Progress Indicator

Attributes of Linear Progress Indicator

  • backgroundColor — The background color stay visible only unitl the progress of the Linear Progress Indicator gets completed(reaches to very end).

Rest are same as Circular Progress Indicator’s attributes except strokeWidth is not available in Linear Progress Indicator.

Simple Circular Progress Indicator

@Composable
fun SimpleCircularProgressIndicator() {
CircularProgressIndicator()
}
Simple Circular Progress Indicator

Featured Circular Progress Indicator

@Composable
fun FeaturedCircularProgressIndicator() {
CircularProgressIndicator(
progress = 0.8f,
modifier = Modifier.padding(8.dp),
color = Color.Green,
strokeWidth = 2.dp
)
}
Featured Circular Progress Indicator

Simple Linear Progress Indicator

@Composable
fun SimpleLinearProgressIndicator() {
LinearProgressIndicator()
}
Simple Linear Progress Indicator

Featured Linear Progress Indicator

@Composable
fun FeaturesLinearProgressIndicator() {
LinearProgressIndicator(
progress = 0.2f,
modifier = Modifier.padding(8.dp),
color = Color.Green,
backgroundColor = Color.Red
)
}
Featured Linear Progress Indicator

Complete Code

package com.akshay.progressapp

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.LinearProgressIndicator
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.unit.dp
import com.akshay.progressapp.ui.theme.ProgressAppTheme

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ProgressAppTheme {
Column(
verticalArrangement = Arrangement.SpaceEvenly,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxSize()
) {
SimpleCircularProgressIndicator()
FeaturedCircularProgressIndicator()
SimpleLinearProgressIndicator()
FeaturesLinearProgressIndicator()
}
}
}
}
}

@Composable
fun SimpleCircularProgressIndicator() {
CircularProgressIndicator()
}

@Composable
fun FeaturedCircularProgressIndicator() {
CircularProgressIndicator(
progress = 0.8f,
modifier = Modifier.padding(8.dp),
color = Color.Green,
strokeWidth = 2.dp
)
}

@Composable
fun SimpleLinearProgressIndicator() {
LinearProgressIndicator()
}

@Composable
fun FeaturesLinearProgressIndicator() {
LinearProgressIndicator(
progress = 0.2f,
modifier = Modifier.padding(8.dp),
color = Color.Green,
backgroundColor = Color.Red
)
}

Output:

Jetpack Compose Ep:9— Progress Indicator

If there is any issue, do let me know in the comment section.

Connect with me on:

Thank you & Happy coding!

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Akshay Sawant

Written by

Android Developer @Innovins | Tech Conference Speaker | Tech Writer @KotlinMumbai

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store