Mastering Material 3 Buttons in Android XML (2025 Guide + UI Samples)

Material 3 Buttons: Comprehensive Guide, Samples, and FAQ for 2025

Overview

Buttons in Material 3 allow users to take actions and make choices with a single tap. They are essential for intuitive Android UIs, appearing in dialogs, forms, cards, and toolbars. This guide details five Material 3 button types (Elevated, Filled, Filled Tonal, Outlined, and Text) and their theming, updated for 2025.

Overview of Material 3 buttons

Design and API Documentation

Getting Started

Add the Material Components for Android library dependency to use Material 3 buttons. See the Getting Started guide.

Note: With a Theme.Material3.DayNight theme, <Button> auto-inflates as com.google.android.material.button.MaterialButton.

Making Buttons Accessible

Buttons support content labeling for accessibility and are readable by most screen readers, such as TalkBack. Text rendered in buttons is automatically provided to accessibility services. Additional content labels are usually unnecessary. For more information, go to the Android accessibility help guide.

Button Types

Material 3 defines five types of common buttons, each with unique visual prominence. The prominence hierarchy guides their usage: Filled buttons are the most prominent, followed by Filled Tonal, Outlined, and Text, with Elevated buttons used for specific separation needs.

  1. Elevated Button: Shadowed for separation from complex backgrounds.
  2. Filled Button: Solid fill for primary actions.
  3. Filled Tonal Button: Lighter fill for secondary actions.
  4. Outlined Button: Stroked border for medium-emphasis actions.
  5. Text Button: Minimal design for low-priority actions.
Button types: elevated, filled, filled tonal, outlined, and text

Elevated Button

Elevated buttons are essentially outlined buttons with a shadow. They are used when visual separation from a patterned background is necessary, but excessive shadow use should be avoided to prevent shadow creep.

Elevated button with purple text 'Elevated button' over a white background

Elevated Button Examples

API and source code:

The following example shows an elevated button with a text label.

      
<Button
    style="@style/Widget.Material3.Button.ElevatedButton"
    android:id="@+id/elevatedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Elevated button"
/>
      
      
    
      
elevatedButton.setOnClickListener {
    // Respond to button press
}

Anatomy and Key Properties

An elevated button has a text label and a stroked container.

Elevated button anatomy diagram
  • Container: Shadowed, low-elevation surface.
  • Label Text: Sentence case, centered.

Attributes

Element Attribute Related method(s) Default value
Text Label android:text setText, getText null
android:textColor setTextColor, getTextColor ?attr/colorOnSurface (see all states)
android:textAppearance setTextAppearance ?attr/textAppearanceLabelLarge
Element Attribute Related method(s) Default value
Container app:backgroundTint setBackgroundColor, setBackgroundTintList, getBackgroundTintList ?attr/colorSurfaceContainerLow (see all states)
app:strokeColor setStrokeColor, setStrokeColorResource, getStrokeColor null
app:strokeWidth setStrokeWidth, setStrokeWidthResource, getStrokeWidth 0dp
app:shapeAppearance setShapeAppearanceModel, getShapeAppearanceModel ShapeAppearance.M3.Sys.Shape.Corner.Full
app:elevation setElevation, getElevation 1dp
app:rippleColor setRippleColor, setRippleColorResource, getRippleColor ?attr/colorOnSurface at 16% opacity (see all states)

Styles

  • Default style: Widget.Material3.Button.ElevatedButton
  • Default style theme attribute: ?attr/materialButtonElevatedStyle

See the full list of styles and attrs.

Filled Button

Filled buttons have a contrasting surface color, making them highly prominent. They’re used for final or unblocking actions in a flow. The filled button is the default style if no style is set.

Filled button with white text 'Filled button' and purple container over a white background

Filled Button Examples

API and source code:

The following example shows a filled button with a text label and a filled container.

      
<Button
    android:id="@+id/filledButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Filled button"
/>

Note: Since this is the default type, you don’t need to specify a style tag as long as you are using a Material Components Theme. If not, set the style to @style/Widget.Material3.Button.

      
filledButton.setOnClickListener {
    // Respond to button press
}

Anatomy and Key Properties

A filled button has a text label and a filled container.

Filled button anatomy diagram
  • Container: Solid fill, high prominence.
  • Label Text: Contrasting color, sentence case.

Attributes

Element Attribute Related method(s) Default value
Text Label android:text setText, getText null
android:textColor setTextColor, getTextColor ?attr/colorOnPrimary (see all states)
android:textAppearance setTextAppearance ?attr/textAppearanceLabelLarge
Element Attribute Related method(s) Default value
Container app:backgroundTint setBackgroundColor, setBackgroundTintList, getBackgroundTintList ?attr/colorPrimary (see all states)
app:strokeColor setStrokeColor, setStrokeColorResource, getStrokeColor null
app:strokeWidth setStrokeWidth, setStrokeWidthResource, getStrokeWidth 0dp
app:shapeAppearance setShapeAppearanceModel, getShapeAppearanceModel ShapeAppearance.M3.Sys.Shape.Corner.Full
app:elevation setElevation, getElevation 2dp
app:rippleColor setRippleColor, setRippleColorResource, getRippleColor ?attr/colorOnPrimary at 16% opacity (see all states)

Styles

  • Default style: Widget.Material3.Button
  • Unelevated style: Widget.Material3.Button.UnelevatedButton
  • Default style theme attribute: ?attr/materialButtonStyle

See the full list of styles and attrs.

Filled Tonal Button

Filled tonal buttons have a lighter background color and darker label color, making them less visually prominent than a regular filled button. They’re used for final or unblocking actions that don’t require strong emphasis.

Filled tonal button with white text 'Filled tonal button' and purple container over a white background

Filled Tonal Button Examples

API and source code:

The following example shows a filled tonal button with a text label and a filled container.

      
<Button
    style="@style/Widget.Material3.Button.TonalButton"
    android:id="@+id/filledTonalButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Filled tonal button"
/>
      
      
    
      
filledTonalButton.setOnClickListener {
    // Respond to button press
}

Anatomy and Key Properties

A filled tonal button has a text label and a filled container.

Filled tonal button anatomy diagram
  • Container: Lighter fill, moderate prominence.
  • Label Text: Contrasting color, sentence case.

Attributes

Element Attribute Related method(s) Default value
Text Label android:text setText, getText null
android:textColor setTextColor, getTextColor ?attr/colorOnSecondaryContainer (see all states)
android:textAppearance setTextAppearance ?attr/textAppearanceLabelLarge
Element Attribute Related method(s) Default value
Container app:backgroundTint setBackgroundColor, setBackgroundTintList, getBackgroundTintList ?attr/colorSecondaryContainer (see all states)
app:strokeColor setStrokeColor, setStrokeColorResource, getStrokeColor null
app:strokeWidth setStrokeWidth, setStrokeWidthResource, getStrokeWidth 0dp
app:shapeAppearance setShapeAppearanceModel, getShapeAppearanceModel ShapeAppearance.M3.Sys.Shape.Corner.Full
app:elevation setElevation, getElevation 2dp
app:rippleColor setRippleColor, setRippleColorResource, getRippleColor ?attr/colorOnSecondaryContainer at 16% opacity (see all states)

Styles

  • Default style: Widget.Material3.Button.TonalButton
  • Default style theme attribute: ?attr/materialButtonTonalStyle

See the full list of styles and attrs.

Outlined Button

Outlined buttons are for actions that need attention but aren’t the primary action, such as “See all” or “Add to cart.” They’re also used to allow users to change their mind or escape a flow.

Outlined button with purple text 'Outlined button' and grey border over a white background

Outlined Button Examples

API and source code:

The following example shows an outlined button with a text label and stroked container.

      
<Button
    style="?attr/materialButtonOutlinedStyle"
    android:id="@+id/outlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Outlined button"
/>
      
      
    
      
outlinedButton.setOnClickListener {
    // Respond to button press
}

Anatomy and Key Properties

An outlined button has a text label and a stroked container.

Outlined button anatomy diagram
  • Container: Stroked border, transparent fill.
  • Label Text: Sentence case, centered.

Attributes

Element Attribute Related method(s) Default value
Text Label android:text setText, getText null
android:textColor setTextColor, getTextColor ?attr/colorOnSurface (see all states)
android:textAppearance setTextAppearance ?attr/textAppearanceLabelLarge
Element Attribute Related method(s) Default value
Container app:backgroundTint setBackgroundColor, setBackgroundTintList, getBackgroundTintList @android:color/transparent (see all states)
app:strokeColor setStrokeColor, setStrokeColorResource, getStrokeColor ?attr/colorOnSurface at 12% opacity (see all states)
app:strokeWidth setStrokeWidth, setStrokeWidthResource, getStrokeWidth 1dp
app:shapeAppearance setShapeAppearanceModel, getShapeAppearanceModel ShapeAppearance.M3.Sys.Shape.Corner.Full
app:elevation setElevation, getElevation 0dp
app:rippleColor setRippleColor, setRippleColorResource, getRippleColor ?attr/colorOnSurface at 16% opacity (see all states)

Styles

  • Default style: Widget.Material3.Button.OutlinedButton
  • Default style theme attribute: ?attr/materialButtonOutlinedStyle

See the full list of styles and attrs.

Text Button

Text buttons have less visual prominence, ideal for low-emphasis actions, such as presenting multiple options.

Text button with purple text 'Text button' over a white background

Text Button Examples

API and source code:

The following example shows a text button with a text label.

      
<Button
    style="@style/Widget.Material3.Button.TextButton"
    android:id="@+id/textButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text button"
/>
      
      
    
      
textButton.setOnClickListener {
    // Respond to button press
}

Anatomy and Key Properties

A text button has a text label and a transparent container.

Text button anatomy diagram
  • Container: Transparent, no border.
  • Label Text: Sentence case, centered.

Attributes

Element Attribute Related method(s) Default value
Text Label android:text setText, getText null
android:textColor setTextColor, getTextColor ?attr/colorOnSurface (see all states)
android:textAppearance setTextAppearance ?attr/textAppearanceLabelLarge
Element Attribute Related method(s) Default value
Container app:backgroundTint setBackgroundColor, setBackgroundTintList, getBackgroundTintList @android:color/transparent (see all states)
app:strokeColor setStrokeColor, setStrokeColorResource, getStrokeColor null
app:strokeWidth setStrokeWidth, setStrokeWidthResource, getStrokeWidth 0dp
app:shapeAppearance setShapeAppearanceModel, getShapeAppearanceModel ShapeAppearance.M3.Sys.Shape.Corner.Full
app:elevation setElevation, getElevation 0dp
app:rippleColor setRippleColor, setRippleColorResource, getRippleColor ?attr/colorOnSurface at 16% opacity (see all states)

Styles

  • Default style: Widget.Material3.Button.TextButton
  • Full Width Buttons: Widget.Material3.Button.TextButton.Dialog.FullWidth
  • Default style theme attribute: ?attr/borderlessButtonStyle

See the full list of styles and attrs.

Theming

Buttons support Material Theming and can be customized in terms of color, typography, and shape. Global theming may affect other components, while specific theming targets only buttons.

Button theming with three buttons - text, outlined and filled - with pink color theming and cut corners

Button Theming Example

API and source code:

The following example shows text, outlined, and filled button types with Material Theming.

Implementing Button Theming

Getting Started

Add the Material Components for Android library dependency to use Material 3 buttons. See the Getting Started guide.

Note: With a Theme.Material3.DayNight theme, <Button> auto-inflates as com.google.android.material.button.MaterialButton.

Use theme attributes and styles in res/values/styles.xml to add the theme to all buttons. This affects other components:

Use default style theme attributes, styles, and theme overlays to add the theme to all buttons without affecting other components:

FAQ ❓

What are Material 3 buttons? 🤔

Material 3 buttons are UI components from Google’s Material Design system, enabling users to perform actions or make choices with a tap, used in Android apps for dialogs, forms, and more. ✅

How many types of Material 3 buttons are there? 🔢

There are five types: Elevated, Filled, Filled Tonal, Outlined, and Text, each with varying visual prominence for different use cases. 📊

When should I use a Filled button? 🖋️

Use Filled buttons for primary, high-emphasis actions, such as submitting a form or completing a key step in a user flow. ✨

How do I make buttons accessible? ♿

Material 3 buttons are readable by screen readers like TalkBack. Ensure text labels are clear; additional content labels are typically not needed. 🗣️

Can I customize button appearance? 🎨

Yes, use Material Theming to adjust color, typography, and shape via theme attributes, styles, and overlays in res/values/styles.xml. 🖌️

What’s the difference between Filled and Filled Tonal buttons? ⚖️

Filled buttons have a solid, high-contrast fill for primary actions, while Filled Tonal buttons use a lighter fill for secondary, less prominent actions. 📈

How do I add the Material 3 library? 📦

Include the Material Components for Android library in your project. Check the Getting Started guide for setup. 🛠️

Are there updates to Material 3 buttons for 2025? 🗓️

This guide reflects the latest 2025 standards, with styles, attributes, and theming aligned to Material 3 specifications from Google. 🚀

Comments

Post a Comment

Popular posts from this blog

Creating Beautiful Card UI in Flutter

Image
In this tutorial, we will learn how to create beautiful and customizable card UI in Flutter.  We will use the Card widget to create the card layout and other widgets like Image and Text to add images and text to the card. We will also learn how to customize the card's appearance by adding borders and changing its shape.  By the end of this tutorial, you will have a good understanding of how to create beautiful and customizable card UI in Flutter.
Read more

Master Web Development with Web School Offline

Image
Master Web Development with Web School Offline Want to learn web development and programming anytime, anywhere? Web School Offline is your all-in-one learning companion, now smarter with AI-powered assistance, multi-language support, and a sleek dark mode. Discover how to master HTML, CSS, JavaScript, Python, SQL, and more—completely free! 🌟 Introduction At the forefront of coding education, Web School Offline empowers you to build web and app development skills without an internet connection. Whether you’re a beginner or aiming to become a pro, this free app offers comprehensive tutorials, AI-driven guidance, and a user-friendly interface to make learning seamless. Start your journey with the world’s largest web and app developer resource! 🚀 Why Web School Offline? Key Benefits Web School Offline stands out with its robust features for learners: Offline Support 📴: Learn without an internet connection. ...
Read more

Jetpack Compose - Card View

Image
Cards contain content and actions that relate to information about a subject. Card is the equivalent of a CardView in Compose How to use Card in android jetpack compose. What's new Color : New color mappings and compatibility with dynamic color, Elevation : Lower elevation and no shadow by default, Types : Three official card types – elevated, filled, and outlined
Read more