Material 3 Progress Indicators

Overview

Progress indicators visualize ongoing processes.

Material 3 Progress Indicators, using LinearProgressIndicator or CircularProgressIndicator, support determinate (progress percentage) and indeterminate (unspecified wait) modes in linear or circular forms, adhering to Material Design guidelines. This guide covers implementation, accessibility, and theming.

Using Progress Indicators

• Add Material Components for Android library dependency
• Use LinearProgressIndicator for bar-style or CircularProgressIndicator for spinner-style
• Apply Theme.Material3.* theme for styling

Accessibility

• Set android:contentDescription for TalkBack to announce progress state
• Add padding to linear indicators if track thickness ≤4dp for focus indicator visibility
• Ensure sufficient contrast for visibility

Behavior and Configuration

• Switch between indeterminate/determinate modes with setIndeterminate
• Set progress with setProgressCompat
• Configure animations via showAnimationBehavior/hideAnimationBehavior

      
val indicator = findViewById<LinearProgressIndicator>(R.id.progress_indicator)
indicator.contentDescription = "Loading"
indicator.setProgressCompat(50, true)
      
    

Progress Indicator Variants

1. Linear Progress Indicator: Shows progress along a horizontal track
2. Circular Progress Indicator: Shows progress in a circular path

Linear Progress Indicator

• Animates along a fixed track
• Suitable for loading or form submission

Example

      
<com.google.android.material.progressindicator.LinearProgressIndicator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/progress_indicator"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:contentDescription="@string/loading"
    android:paddingTop="4dp"
    android:paddingBottom="4dp"/>
      
    

      
val indicator = findViewById<LinearProgressIndicator>(R.id.progress_indicator)
indicator.setProgressCompat(75, true)
      
    

Linear Progress Indicator Anatomy

Component	Description	Determinate Mode	Indeterminate Mode
Track	Fixed path, 4dp thick	Shows progress percentage	Static background
Active Indicator	Animated progress bar	Fills track proportionally	Animates back and forth
Stop Indicator	Optional track end marker	Visible if set	Not applicable

Circular Progress Indicator

• Animates along a circular track
• Ideal for buttons or cards

Example

      
<com.google.android.material.progressindicator.CircularProgressIndicator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/progress_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/loading"/>
      
    

      
val indicator = findViewById<CircularProgressIndicator>(R.id.progress_indicator)
indicator.setProgressCompat(50, true)
      
    

Circular Progress Indicator Anatomy

Component	Description	Determinate Mode	Indeterminate Mode
Track	Invisible circular path, 40dp diameter	Shows progress arc	Invisible background
Active Indicator	Animated arc, 4dp thick	Fills arc proportionally	Rotates continuously

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description	Component Type
Track	app:trackColor	setTrackColor	colorPrimaryContainer (linear), transparent (circular)	Sets track color	All variants
Indicator	app:indicatorColor	setIndicatorColor	colorPrimary	Sets active indicator color	All variants
Thickness	app:trackThickness	setTrackThickness	4dp	Sets track/indicator thickness	All variants
Corner Radius	app:trackCornerRadius	setTrackCornerRadius	50%	Sets track corner radius (linear)	Linear
Animation	app:showAnimationBehavior	setShowAnimationBehavior	none	Sets show animation style	All variants

Styles

• Linear: Widget.Material3.LinearProgressIndicator
• Circular: Widget.Material3.CircularProgressIndicator
• Circular Sizes: Medium, Small, ExtraSmall
• Default theme attributes: ?attr/linearProgressIndicatorStyle, ?attr/circularProgressIndicatorStyle

Theming Progress Indicators

• Customize colors and sizes
• Use res/values/styles.xml for theming

Example

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="colorPrimary">@color/shrine_pink_100</item>
</style>
      
    

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="circularProgressIndicatorStyle">@style/Widget.App.CircularProgressIndicator</item>
</style>
<style name="Widget.App.CircularProgressIndicator" parent="Widget.Material3.CircularProgressIndicator">
    <item name="indicatorColor">@color/shrine_pink_100</item>
    <item name="trackThickness">8dp</item>
</style>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Progress Indicators
• Covers design, behavior, theming specifications
• Includes structure, accessibility requirements
• Refer to Material Design documentation for full details

FAQ

What are Material 3 Progress Indicators?

• Visuals for ongoing processes, determinate or indeterminate

---

How many variants are there?

• Two variants: Linear and Circular

---

When to use a Circular Indicator?

• Use for compact spaces like buttons or cards

---

How to make them accessible?

• Set contentDescription; add padding for linear indicators ≤4dp

---

Can I customize appearance?

• Yes, theme via res/values/styles.xml

---

How to add the Material 3 library?

• Include Material Components for Android

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for progress indicators