Import
View-based framework
<!-- No additional imports required - uses Material Components -->
Usage
Basic usage
Create a LinearProgressIndicator with default styling.
<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="@+id/progressbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progress="50" />
Advanced usage
Configure progress indicators with custom styling and attributes.
<!-- Linear progress indicator with inverted style -->
<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="@+id/progressbar_inverted"
style="@style/Widget.Backbase.ProgressBar.Linear.Inverted"
android:layout_width="match_parent"
android:layout_height="4dp"
android:progress="75"
android:contentDescription="Upload progress indicator" />
<!-- Circular progress indicator -->
<com.google.android.material.progressindicator.CircularProgressIndicator
android:id="@+id/circular_progress"
style="@style/Widget.Backbase.ProgressBar.Circular.Default"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true" />
Programmatic usage
Configure progress indicators programmatically in Kotlin.
// Configure linear progress indicator
val linearProgress = findViewById<LinearProgressIndicator>(R.id.progressbar)
linearProgress.progress = 50
linearProgress.max = 100
// Configure circular progress indicator
val circularProgress = findViewById<CircularProgressIndicator>(R.id.circular_progress)
circularProgress.isIndeterminate = false
circularProgress.progress = 75
Configuration
LinearProgressIndicator
|
Attribute |
Type |
Description |
|---|---|---|
|
android:contentDescription |
string |
Accessibility description |
|
android:indeterminate |
boolean |
Whether to show indeterminate progress |
|
android:max |
integer |
Maximum progress value (default: 100) |
|
android:progress |
integer |
Current progress value (0-100) |
CircularProgressIndicator
|
Attribute |
Type |
Description |
|---|---|---|
|
android:contentDescription |
string |
Accessibility description |
|
android:indeterminate |
boolean |
Whether to show indeterminate progress |
|
android:progress |
integer |
Current progress value (0-100) |
Styling
Predefined styles
The progress indicators provide predefined styles for different use cases.
|
Visual reference |
Style |
Description |
|---|---|---|
|
Linear default |
Widget.Backbase.ProgressBar.Linear |
Standard linear progress indicator |
|
Linear inverted |
Widget.Backbase.ProgressBar.Linear.Inverted |
Inverted colors for colored backgrounds |
|
Circular default |
Widget.Backbase.ProgressBar.Circular.Default |
Standard circular progress indicator |
Style definitions
Linear Progress Indicator (default):
<style name="Widget.Backbase.ProgressBar.Linear" parent="Widget.MaterialComponents.LinearProgressIndicator">
<item name="trackColor">?colorBackgroundBrandSubtle</item>
<item name="indicatorColor">?colorBackgroundBrand</item>
<item name="trackCornerRadius">?sizerXLarge</item>
</style>
Linear Progress Indicator (inverted):
<style name="Widget.Backbase.ProgressBar.Linear.Inverted">
<item name="trackColor">?colorOnBackgroundInfoSubtle</item>
<item name="indicatorColor">?colorBackgroundInfoSubtle</item>
</style>
Circular Progress Indicator (default):
<style name="Widget.Backbase.ProgressBar.Circular.Default" parent="Widget.MaterialComponents.CircularProgressIndicator">
<item name="indicatorColor">?colorBackgroundBrand</item>
</style>
Custom styling
Apply custom styles using XML attributes or programmatically.
<!-- Custom linear progress with specific dimensions -->
<com.google.android.material.progressindicator.LinearProgressIndicator
android:layout_width="match_parent"
android:layout_height="8dp"
android:progress="60"
app:trackColor="@color/custom_track_color"
app:indicatorColor="@color/custom_indicator_color"
app:trackCornerRadius="4dp" />
<!-- Custom circular progress with specific size -->
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="48dp"
android:layout_height="48dp"
app:indicatorColor="@color/custom_indicator_color"
app:trackThickness="4dp" />
States
Determinate progress
Show specific progress values for known completion status.
<!-- Linear determinate progress -->
<com.google.android.material.progressindicator.LinearProgressIndicator
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progress="75"
android:max="100" />
<!-- Circular determinate progress -->
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="false"
android:progress="50" />
Indeterminate progress
Show continuous animation for unknown completion time.
<!-- Linear indeterminate progress -->
<com.google.android.material.progressindicator.LinearProgressIndicator
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true" />
<!-- Circular indeterminate progress -->
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true" />
Accessibility
Accessibility configuration
|
Attribute |
Description |
Type |
|---|---|---|
|
android:contentDescription |
Descriptive text for screen readers |
string |
|
android:importantForAccessibility |
Accessibility importance level |
enum |
Best practices
- Always provide meaningful content descriptions
- Update progress announcements for screen readers
- Use appropriate progress indicators for the context
- Ensure sufficient color contrast for visibility
<!-- Accessible linear progress indicator -->
<com.google.android.material.progressindicator.LinearProgressIndicator
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progress="50"
android:contentDescription="File upload progress: 50 percent complete"
android:importantForAccessibility="yes" />
<!-- Accessible circular progress indicator -->
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:contentDescription="Loading content, please wait"
android:importantForAccessibility="yes" />
Design tokens
This component uses design system tokens for consistent theming:
- Color tokens for indicator and track colors based on style variant
- Spacing tokens for corner radius and dimensions
- Size tokens for thickness and overall component dimensions
- Theme tokens that automatically adapt to light and dark modes