Introduction

Material Design button styles are not just cosmetic variations. They encode visual hierarchy and interaction emphasis. Choosing the right style means deciding which actions should dominate the screen, which should remain secondary, and which should stay low-emphasis but still discoverable.

Match the Button Style to Action Importance

In Material-style Android UI, the common button families are:

• filled or contained buttons for primary actions
• outlined buttons for secondary actions
• text buttons for low-emphasis actions
• icon and floating action buttons for focused action shortcuts

The design mistake is not using the wrong XML tag. It is giving every action the same visual weight.

If every button is filled and brightly colored, the screen has no hierarchy.

Use MaterialButton as the Base Component

With Material Components, MaterialButton is the standard base for many button styles.

1<com.google.android.material.button.MaterialButton
2    android:id="@+id/saveButton"
3    style="@style/Widget.Material3.Button"
4    android:layout_width="wrap_content"
5    android:layout_height="wrap_content"
6    android:text="Save" />

The important part is the style you apply. The same component can represent different design levels depending on the Material widget style.

Filled, Outlined, and Text Buttons Serve Different Roles

A filled button is for the main action.

1<com.google.android.material.button.MaterialButton
2    style="@style/Widget.Material3.Button"
3    android:layout_width="wrap_content"
4    android:layout_height="wrap_content"
5    android:text="Continue" />

An outlined button is good for a secondary but still visible action.

1<com.google.android.material.button.MaterialButton
2    style="@style/Widget.Material3.Button.OutlinedButton"
3    android:layout_width="wrap_content"
4    android:layout_height="wrap_content"
5    android:text="Preview" />

A text button is lower emphasis.

1<com.google.android.material.button.MaterialButton
2    style="@style/Widget.Material3.Button.TextButton"
3    android:layout_width="wrap_content"
4    android:layout_height="wrap_content"
5    android:text="Cancel" />

Those three styles already cover most dialog, form, and screen-footer actions.

Use Floating Action Buttons Sparingly

A floating action button is not just another round button. It implies one highly important contextual action for the current screen.

1<com.google.android.material.floatingactionbutton.FloatingActionButton
2    android:id="@+id/addFab"
3    android:layout_width="wrap_content"
4    android:layout_height="wrap_content"
5    android:contentDescription="Add item"
6    app:srcCompat="@drawable/ic_add" />

If a screen has several equally important actions, a FAB may not be the right control. FABs work best when one action clearly dominates, such as composing, adding, or creating.

Theme and Style Consistency Matter More Than One-Off Tinting

You can tweak colors directly, but Material buttons work best when they follow the app theme consistently.

1<style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
2    <item name="colorPrimary">#0B6E4F</item>
3    <item name="colorSecondary">#D95D39</item>
4</style>

Then let the Material styles inherit from the theme rather than manually tinting every button instance. That keeps visual hierarchy consistent across the app.

Overusing per-button overrides usually creates UI drift and makes dark mode or theme changes harder later.

Icon Buttons and State Styles Still Need Accessibility

Material styling is not only about shape and fill. Buttons also need:

• readable contrast
• clear pressed and disabled states
• appropriate touch target size
• content descriptions for icon-only controls

A button that looks Material-compliant but is too small to tap or impossible to distinguish when disabled is still a bad button.

That is why style selection should be paired with state, spacing, and accessibility review.

Common Pitfalls

• Using the same high-emphasis button style for every action on the screen.
• Treating outlined, text, and filled buttons as interchangeable cosmetic options.
• Using a floating action button when the screen does not actually have one dominant action.
• Hardcoding per-button colors everywhere instead of using a coherent Material theme.
• Focusing on shape and color while ignoring accessibility, touch target size, and state feedback.

Summary

• Material button styles communicate action priority, not just visual taste.
• Use filled buttons for primary actions, outlined buttons for secondary actions, and text buttons for low-emphasis actions.
• Use FABs only when one contextual action clearly dominates the screen.
• Let theme-driven styling do most of the work instead of one-off per-button overrides.
• Good Material button design combines hierarchy, consistency, and accessibility.