Ultimate Guide to Material 3 Progress Indicators in Android XML (2025 Tutorial + Examples)
Ultimate Guide to Material 3 Progress Indicators in Android: Tutorial & Examples for 2025 🚀
Overview 📖
Material 3 Progress Indicators visualize ongoing processes, either indeterminate (unspecified wait) or determinate (progress percentage), in linear or circular forms. This guide covers two variants—Linear and Circular—their implementation, accessibility, and theming for 2025. ⏳
Design and API Documentation 🔗
Using Progress Indicators 🤖
Add the Material Components for Android library dependency to use Material 3 Progress Indicators. See the Get Started guide. Use LinearProgressIndicator or CircularProgressIndicator for determinate or indeterminate modes. Use a Theme.Material3.* theme for proper styling. 🛠️
Making Progress Indicators Accessible ♿
Set android:contentDescription for TalkBack to announce progress state. Add padding to linear indicators if track thickness ≤4dp to ensure focus indicator visibility. See the Android accessibility guide. 🗣️
Behavior and Configuration 🎬
Switch between indeterminate/determinate modes with setIndeterminate. Set progress with setProgressCompat. Configure animations via showAnimationBehavior/hideAnimationBehavior. Example:
val indicator = findViewById(R.id.progress_indicator)
indicator.contentDescription = "Loading"
indicator.setProgressCompat(50, true)
Progress Indicator Variants 🌟
Material 3 Progress Indicators come in two variants: Linear (bar-style) and Circular (spinner-style), each supporting determinate and indeterminate modes. ⏳
- Linear Progress Indicator: Shows progress along a horizontal track.
- Circular Progress Indicator: Shows progress in a circular path.
Linear Progress Indicator 📏
Linear Progress Indicators animate along a fixed track, suitable for loading or form submission. 📏
Linear Progress Indicator Example 💻
The following example shows a determinate linear progress indicator.
val indicator = findViewById(R.id.progress_indicator)
indicator.setProgressCompat(75, true)
Anatomy and Key Properties 📏
A linear progress indicator includes a track and active indicator. 📏
- Track: Fixed path, 4dp thick.
- Active Indicator: Animated progress bar. 🔄
- Stop Indicator: Optional track end marker. 🛑
Circular Progress Indicator 🔄
Circular Progress Indicators animate along a circular track, ideal for buttons or cards. 🔄
Circular Progress Indicator Example 💻
The following example shows a determinate circular progress indicator.
val indicator = findViewById(R.id.progress_indicator)
indicator.setProgressCompat(50, true)
Anatomy and Key Properties 📏
A circular progress indicator includes a track and active indicator. 🔄
- Track: Invisible circular path, 40dp diameter.
- Active Indicator: Animated arc, 4dp thick. 🔄
Attributes (All Variants) 📋
| Element | Attribute | Related method(s) | Default value |
|---|---|---|---|
| Track | app:trackColor |
setTrackColor |
colorPrimaryContainer (linear), transparent (circular) |
| Indicator | app:indicatorColor |
setIndicatorColor |
colorPrimary |
| Thickness | app:trackThickness |
setTrackThickness |
4dp |
| Corner Radius | app:trackCornerRadius |
setTrackCornerRadius |
50% |
| Animation | app:showAnimationBehavior |
setShowAnimationBehavior |
none |
Styles 🎨
- Linear:
Widget.Material3.LinearProgressIndicator - Circular:
Widget.Material3.CircularProgressIndicator - Circular Sizes:
Medium,Small,ExtraSmall - Default theme attributes:
?attr/linearProgressIndicatorStyle,?attr/circularProgressIndicatorStyle
See the full list of styles and attrs. 🔗
Theming Progress Indicators 🖌️
Material Theming customizes progress indicator colors and sizes. 🎨
Theming Example 💻
Theming example for circular progress indicators:
Specific styles for circular progress indicators:
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 colors and sizes via res/values/styles.xml. 🖌️
How to add the Material 3 library? 📦
Include the Material Components for Android library. See the Get Started guide. 🛠️
Are there updates for 2025? 🗓️
This guide reflects 2025 Material 3 standards for progress indicators. 🚀
Comments
Post a Comment