Ultimate Guide to Material 3 Loading Indicators in Android: Tutorial & Examples for 2025 🚀

Overview 📖

Material 3 Loading Indicators visually represent indeterminate ongoing processes, such as app loading or form submission, using morphing shapes with optional containers. This guide covers their implementation, accessibility, and theming for 2025. ⏳

Design and API Documentation 🔗

Using Loading Indicators 🤖

Add the Material Components for Android library dependency to use Material 3 Loading Indicators. See the Get Started guide. Use LoadingIndicator for indeterminate processes, with or without a container. Use a Theme.Material3.* theme for proper styling. 🛠️

Making Loading Indicators Accessible ♿

Set android:contentDescription on the indicator for screen readers like TalkBack to announce the loading state. Ensure sufficient contrast (3:1) for contained indicators. See the Android accessibility guide. 🗣️

Behavior and Configuration 🎬

Configure colors, size, or container via attributes like indicatorColor or containerWidth. Toggle visibility to show/hide the indicator. Example:

      
val loadingIndicator = findViewById(R.id.loading_indicator)
loadingIndicator.contentDescription = "Loading content"
loadingIndicator.visibility = View.VISIBLE

Loading Indicator Anatomy 🌟

Material 3 Loading Indicators consist of an active indicator (morphing shape) and an optional container, designed to capture attention through motion. ⏳

Active Indicator: Morphing shape, animates to show loading. 🔄
Container: Optional rounded background. 🟠

Loading Indicator Example 🔲

Loading Indicators replace indeterminate circular progress indicators for visually engaging process feedback. ⏳

Loading Indicator Example 💻

API and source code:

LoadingIndicator
- Class source

The following example shows a contained loading indicator.

      
val loadingIndicator = findViewById(R.id.loading_indicator)
loadingIndicator.contentDescription = getString(R.string.loading)
loadingIndicator.visibility = View.VISIBLE

Anatomy and Key Properties 📏

A loading indicator features a morphing active indicator and optional container. ⏳

Active Indicator: Animated shape, 38dp default size. 🔄
Container: Optional, 48dp default dimensions. 🟠

Attributes 📋

Element	Attribute	Related method(s)	Default value
Indicator	`app:indicatorColor`	`setIndicatorColor`, `getIndicatorColor`	`colorPrimary`
Container	`app:containerColor`	`setContainerColor`, `getContainerColor`	`transparent`
Indicator Size	`app:indicatorSize`	`setIndicatorSize`, `getIndicatorSize`	38dp
Container Size	`app:containerWidth`	`setContainerWidth`, `getContainerWidth`	48dp

Styles 🎨

Default style: Widget.Material3.LoadingIndicator
Contained style: Widget.Material3.LoadingIndicator.Contained
Default theme attribute: ?attr/loadingIndicatorStyle

See the full list of styles and attrs. 🔗

Theming Loading Indicators 🖌️

Material Theming customizes loading indicator colors via theme attributes. 🎨

Theming Example 💻

Theming example for loading indicators:

Specific styles for loading indicators without affecting other components:

FAQ ❓

What are Material 3 Loading Indicators? 🤔

Visuals for indeterminate processes, replacing circular progress indicators. ✅

What are the styles? 🔢

Default (uncontained) and Contained, with optional background. ⏳

When to use a Contained style? 🖋️

Use for better visibility on complex backgrounds with a contrasting container. 🟠

How to make them accessible? ♿

Set contentDescription for TalkBack; ensure 3:1 contrast for contained style. 🗣️

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 loading indicators. 🚀

Search This Blog

BoltUiX

Ultimate Guide to Material 3 Loading Indicators in Android XML (2025 Tutorial + Examples)