Material 3 Switches 

Overview

Switches toggle a single setting on or off.

Material 3 Switches, built with MaterialSwitch (replacing deprecated SwitchMaterial since version 1.7.0), are ideal for mobile settings menus, adhering to Material Design guidelines. This guide covers implementation, accessibility, and theming.

Using Switches

• Add Material Components for Android library (version 1.7.0 or later)
• Use com.google.android.material.materialswitch.MaterialSwitch explicitly in layouts
• Apply Theme.Material3.* theme for styling

Accessibility

• Switches are readable by TalkBack with auto-provided text labels
• Add android:contentDescription for clarity if needed
• Ensure 48dp minimum touch targets via minHeight

Behavior and Configuration

• Toggle with isChecked
• Handle state changes with setOnCheckedChangeListener
• Customize thumb icons or tints via attributes

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

Switch Anatomy

Component	Description	On State	Off State
Track	Background path for thumb movement	Filled, colored (e.g., colorPrimary)	Faded, greyed out
Thumb	Movable indicator of state	Positioned right, colored	Positioned left, neutral
Icon	Optional visual cue on thumb	Visible if set (e.g., checkmark)	Visible if set (e.g., none)
Text Label	Describes the setting	Enabled, same appearance	Enabled, same appearance

Switch Example

• Toggles settings on/off
• Ideal for mobile options menus
• Uses MaterialSwitch

Example

      
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <com.google.android.material.materialswitch.MaterialSwitch
        android:id="@+id/switch_1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:checked="true"
        android:text="@string/wifi"/>
    <com.google.android.material.materialswitch.MaterialSwitch
        android:id="@+id/switch_2"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:enabled="false"
        android:text="@string/bluetooth"/>
</LinearLayout>
      
    

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

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description	Component Type
Thumb	app:thumbTint	setThumbTintList	?attr/colorOnPrimary (checked)	Sets thumb color	All
Track	app:trackTint	setTrackTintList	?attr/colorPrimary (checked)	Sets track color	All
Icon	app:thumbIcon	setThumbIconDrawable	null	Sets optional thumb icon	All
Text	android:text	setText	null	Sets label text	All

Styles

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

Theming Switches

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

Example

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="colorPrimary">@color/pink_200</item>
    <item name="colorSurfaceVariant">@color/pink_100</item>
</style>
      
    

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="materialSwitchStyle">@style/Widget.App.Switch</item>
</style>
<style name="Widget.App.Switch" parent="Widget.Material3.CompoundButton.MaterialSwitch">
    <item name="thumbTint">@color/pink_200</item>
    <item name="trackTint">@color/pink_100</item>
</style>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Switches
• Covers design, behavior, theming specifications
• Includes structure, accessibility requirements
• Refer to Material Design documentation for full details

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 via res/values/styles.xml

---

How to add the Material 3 library?

• Include Material Components 1.7.0 or later

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for switches