Ultimate Guide to Material 3 Icon & Segmented Buttons in Android XML (2025 Tutorial + Examples)

Ultimate Guide to Material 3 Icon and Segmented Buttons in Android: Tutorial & Examples for 2025 🚤

Overview 📖

Material 3 Icon Buttons and Segmented Buttons (Toggle Button Groups) enable compact, interactive actions in Android apps. Icon buttons, like those with a boat icon, offer quick supplementary actions, while segmented buttons allow selection from related choices. This guide covers their implementation and theming for 2025. 🌊

Design and API Documentation 🔗

• Google Material 3 Icon Button Spec
• Google Material 3 Segmented Button Spec
• API Reference

Using Icon and Segmented Buttons 🤖

Add the Material Components for Android library dependency. See the Get Started guide. Use a Theme.Material3.* theme for auto-inflation of com.google.android.material.button.MaterialButton and com.google.android.material.button.MaterialButtonToggleGroup. 🛠️

Making Buttons Accessible ♿

Set android:contentDescription for screen readers like TalkBack to describe actions (e.g., "Navigate by boat"). See the Android accessibility guide. 🗣️

Visibility and Behavior 🎬

Control icon button visibility with setVisibility. For segmented buttons, use addOnButtonCheckedListener for selection. Example:

      
iconButton.visibility = View.VISIBLE // Show icon button
iconButton.visibility = View.GONE // Hide icon button
toggleButton.addOnButtonCheckedListener { _, checkedId, isChecked ->
    // Handle selection
}
      
      
    

Icon Button 🚤

Icon buttons are compact buttons for actions like navigation, often using icons like a boat. Types include Standard, Filled, Filled Tonal, and Outlined. Ideal for toolbars or tight spaces. 🎯

Icon Button Example 💻

API and source code:

• MaterialButton
  • Class description
  • Class source

The following example shows a standard icon button with a boat icon.

      
icon_button.setOnClickListener {
    // Handle boat icon button click
}
      
      
    

Anatomy and Key Properties 📏

An icon button has a container and an icon (e.g., boat). 🔍

• Container: Transparent (Standard) or filled (Filled, Tonal, Outlined), 48dp. 🛠️
• Icon: Centered, 24dp, action-specific (e.g., boat). 🚤

Attributes 📋

Element	Attribute	Related method(s)	Default value
Icon	app:icon	setIcon, setIconResource, getIcon	null
	app:iconTint	setIconTint, getIconTint	?attr/colorOnSurface (states)

Styles 🎨

• Default style: Widget.Material3.Button.IconButton
• Filled style: Widget.Material3.Button.IconButton.Filled
• Filled Tonal style: Widget.Material3.Button.IconButton.Filled.Tonal
• Outlined style: Widget.Material3.Button.IconButton.Outlined
• Default style theme attribute: ?attr/materialIconButtonStyle

Segmented Button 🔄

Segmented buttons (Toggle Button Groups) allow selection from related choices, like navigation modes, in a shared container. Supports text or icon-based buttons. 🌟

Segmented Button Example 💻

API and source code:

• MaterialButtonToggleGroup
  • Class description
  • Class source

The following example shows a segmented button group with navigation mode options.

      
toggle_button.addOnButtonCheckedListener { _, checkedId, isChecked ->
    when (checkedId) {
        R.id.button_boat -> if (isChecked) { /* Navigate by boat */ }
        R.id.button_car -> if (isChecked) { /* Navigate by car */ }
        R.id.button_walk -> if (isChecked) { /* Navigate by walk */ }
    }
}
      
      
    

Anatomy and Key Properties 📏

A segmented button group has a shared container and icons or text. 🔄

• Container: Stroked, rounded, shared across buttons. 🛠️
• Icon: Optional, 24dp, action-specific (e.g., boat). 🚤

Attributes 📋

Element	Attribute	Related method(s)	Default value
Selection	app:singleSelection	setSingleSelection, isSingleSelection	false
	app:selectionRequired	setSelectionRequired, isSelectionRequired	false

Styles 🎨

• Default style: Widget.Material3.MaterialButtonToggleGroup
• Default style theme attribute: ?attr/materialButtonToggleGroupStyle

Theming Icon and Segmented Buttons 🖌️

Material Theming customizes color and shape for icon and segmented buttons. 🎨

Theming Example 💻

Theming for icon and segmented buttons:

Specific styles for buttons:

FAQ ❓

What are Icon Buttons? 🤔

Compact buttons using icons (e.g., boat) for actions like navigation. ✅

---

What are Segmented Buttons? 🔄

Toggle groups for selecting related options, like navigation modes. 🌟

---

When to use a boat icon button? 🚤

Use for navigation-related actions in apps with travel or marine themes. 🎯

---

How to ensure accessibility? ♿

Add android:contentDescription (e.g., "Navigate by boat") for screen readers. 🗣️

---

Can I customize them? 🎨

Yes, adjust colors and shapes via res/values/styles.xml. 🖌️

---

Are there 2025 updates? 🗓️

This guide reflects 2025 Material 3 standards for icon and segmented buttons. 🚀