Material 3 Loading Indicators

Overview

Loading Indicators visually represent indeterminate processes with morphing shapes.

Material 3 Loading Indicators, using com.google.android.material.loadingindicator.LoadingIndicator, support two configurations: Default (Uncontained) and Contained. They replace indeterminate circular progress indicators for processes under five seconds. This guide covers implementation, accessibility, and theming.

Getting Started

• Add Material Components for Android library dependency
• Use LoadingIndicator for indeterminate processes
• Apply Theme.Material3.* for styling

Accessibility

• Set android:contentDescription for TalkBack to announce loading state
• Ensure 3:1 contrast ratio for contained indicators

Behavior and Configuration

• Configure colors, size, and container via attributes
• Toggle visibility with View.VISIBLE/View.GONE
• Use morphing shape for attention-grabbing motion

      
val loadingIndicator = findViewById<com.google.android.material.loadingindicator.LoadingIndicator>(R.id.loading_indicator)
loadingIndicator.contentDescription = getString(R.string.loading)
loadingIndicator.visibility = View.VISIBLE
      
    

Expressive Update

• New component in M3 Expressive update
• Replaces indeterminate circular progress indicators
• Supports contained and uncontained configurations
• Uses shape and motion for visual engagement

Loading Indicator Anatomy

Component	Description	Behavior
Active Indicator	Morphing shape, 38dp, colorPrimary	Animates to show loading progress
Container	Optional, 48dp, transparent or colorSurfaceContainer	Provides background contrast

Loading Indicator Configurations

Configuration	Pros	Cons
Default (Uncontained)	Minimalist, blends with UI Suitable for simple backgrounds	Less visible on complex backgrounds
Contained	High visibility on any background Enhanced contrast with container	Slightly larger footprint

Loading Indicator Example

• Shows indeterminate loading with morphing shape
• Supports contained and uncontained styles

Example

      
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <com.google.android.material.loadingindicator.LoadingIndicator
        android:id="@+id/loading_indicator"
        style="@style/Widget.Material3.LoadingIndicator.Contained"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/loading"
        app:indicatorColor="?attr/colorPrimary"
        app:containerColor="?attr/colorSurfaceContainer"/>
</LinearLayout>
      
    

      
val loadingIndicator = findViewById<com.google.android.material.loadingindicator.LoadingIndicator>(R.id.loading_indicator)
loadingIndicator.contentDescription = getString(R.string.loading)
loadingIndicator.visibility = View.VISIBLE
      
    

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description
Indicator	app:indicatorColor	setIndicatorColor, getIndicatorColor	?attr/colorPrimary	Sets indicator color
Container	app:containerColor	setContainerColor, getContainerColor	transparent	Sets container background color
Indicator	app:indicatorSize	setIndicatorSize, getIndicatorSize	38dp	Sets indicator size
Container	app:containerWidth	setContainerWidth, getContainerWidth	48dp	Sets container width
Container	app:containerHeight	setContainerHeight, getContainerHeight	48dp	Sets container height

Theming Loading Indicators

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

Example

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

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="loadingIndicatorStyle">@style/Widget.App.LoadingIndicator</item>
</style>
<style name="Widget.App.LoadingIndicator" parent="Widget.Material3.LoadingIndicator.Contained">
    <item name="indicatorColor">@color/shrine_pink_100</item>
    <item name="containerColor">@color/shrine_pink_50</item>
</style>
      
    

      
<com.google.android.material.loadingindicator.LoadingIndicator
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/Widget.App.LoadingIndicator"
    android:id="@+id/loading_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/loading"/>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Loading Indicators
• Covers design, behavior, theming specifications
• Includes accessibility and configuration details
• Refer to Material Design documentation for full details

FAQ

What are Material 3 Loading Indicators?

• Visuals for indeterminate processes with morphing shapes

---

What are the configurations?

• Default (Uncontained) and Contained

---

When to use a Contained Loading Indicator?

• Use for visibility on complex backgrounds

---

How to make Loading Indicators accessible?

• Set contentDescription; ensure 3:1 contrast

---

Can I customize their appearance?

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

---

How to add the Material 3 library?

• Include Material Components for Android library

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for Loading Indicators