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

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

Overview 📖

Material 3 Switches toggle a single setting on or off, ideal for mobile settings menus. The MaterialSwitch class, introduced in Material Components 1.7.0, replaces the deprecated SwitchMaterial. This guide covers implementation, accessibility, and theming for 2025. 🔄

Design and API Documentation 🔗

• Google Material 3 Switch Spec
• API Reference

Using Switches 🤖

Add the Material Components for Android library (version 1.7.0 or later) to use Material 3 Switches. See the Get Started guide. Use com.google.android.material.materialswitch.MaterialSwitch explicitly in layouts, as it doesn’t auto-inflate, with a Theme.Material3.* theme. 🛠️

Making Switches Accessible ♿

Switches are readable by TalkBack, with text labels auto-provided. Additional android:contentDescription is usually unnecessary but can be added for clarity. Ensure 48dp minimum touch targets via minHeight. See the Android accessibility guide. 🗣️

Behavior and Configuration 🎬

Toggle switches with isChecked and handle state changes with setOnCheckedChangeListener. Customize thumb icons or tints via attributes. Example:

      
val switch = findViewById(R.id.switch_1)
switch.isChecked = true
switch.setOnCheckedChangeListener { _, isChecked ->
    // Handle state change
}
      
      
    

Switch Anatomy 🌟

Material 3 Switches consist of a track, thumb, optional icon, and text label, with on/off states and interaction states (enabled, disabled, hover, focused, pressed). 🔄

• Track: Background path for thumb movement.
• Thumb: Movable indicator of state. 🖲️
• Icon: Optional, enhances state indication. 🖼️
• Text Label: Describes the setting. ✍️

Switch Example 🔲

Switches toggle settings on/off, ideal for mobile options menus. 🔄

Switch Example 💻

API and source code:

• MaterialSwitch
  • Class description
  • Class source

The following example shows a list of two switches using MaterialSwitch.

      
val switch = findViewById(R.id.switch_1)
switch.setOnCheckedChangeListener { _, isChecked ->
    // Toggle Wi-Fi setting
}
      
      
    

Anatomy and Key Properties 📏

A switch includes a track, thumb, optional icon, and text label. 🔄

• Track: Indicates on/off state.
• Thumb: Movable state indicator. 🖲️
• Icon: Optional visual cue. 🖼️
• Text Label: Setting description. ✍️

Attributes 📋

Element	Attribute	Related method(s)	Default value
Thumb	app:thumbTint	setThumbTintList	?attr/colorOnPrimary (checked)
Track	app:trackTint	setTrackTintList	?attr/colorPrimary (checked)
Icon	app:thumbIcon	setThumbIconDrawable	null
Text	android:text	setText	null

Styles 🎨

• Default style: Widget.Material3.CompoundButton.MaterialSwitch
• Default theme attribute: ?attr/materialSwitchStyle

See the full list of styles and attrs. 🔗

Theming Switches 🖌️

Material Theming customizes switch colors and typography. 🎨

Theming Example 💻

Theming example for switches:

Specific styles for switches without affecting other components:

FAQ ❓

What are Material 3 Switches? 🤔

Toggles for enabling/disabling a single setting. ✅

---

Why use MaterialSwitch? 🔢

Replaces deprecated SwitchMaterial since 1.7.0 for updated design. 🔄

---

When to use switches? 🖋️

Use for on/off settings, especially on mobile. 📱

---

How to make them accessible? ♿

Labels are auto-readable; ensure 48dp touch targets. 🗣️

---

Can I customize appearance? 🎨

Yes, theme colors and typography via res/values/styles.xml. 🖌️

---

How to add the Material 3 library? 📦

Include Material Components 1.7.0+. See the Get Started guide. 🛠️

---

Are there updates for 2025? 🗓️

This guide reflects 2025 Material 3 standards for switches. 🚀