Material 3 Buttons

Overview

Welcome! If you're new to Android design, buttons are like doors in your app – users tap them to go places. Material 3 makes them look modern and easy to use.

• Buttons let users act with one tap – simple and intuitive
• Start with MaterialButton – it's the main class
• Pick Default (basic) or Toggle (on/off switch) types
• Choose from 5 styles: Elevated, Filled, Filled Tonal, Outlined, Text
• Tip for beginners: Sizes range from extra small (32dp) to extra large (56dp) – default is small (36dp)
• Fun feature: Buttons can change shape when toggled (from round to square)
• Use in dialogs, forms, cards, or toolbars – follows Material Design rules
• This guide: Easy setup, accessibility (for everyone), and custom looks

5 Button Styles by Emphasis (from most eye-catching to subtle):

1. Elevated Button (with shadow for standout)
2. Filled Button (solid color, bold)
3. Filled Tonal Button (lighter fill, medium)
4. Outlined Button (border only, clean)
5. Text Button (just words, low-key)

• Beginner tip: Start with Filled – it's the easiest and most common
• Note: Images use dynamic colors that match your app's theme

Getting Started

First steps: Add the library and set up your theme. No rush – copy-paste these!

• Add to your build.gradle (app level): implementation 'com.google.android.material:material:1.12.0'
• In styles.xml, use <style name="AppTheme" parent="Theme.Material3.DayNight"> – this auto-makes buttons fancy
• Tip: Sync your project after adding the library
• Apply a style in XML: style="@style/Widget.Material3.Button.FilledButton" (try this first!)

Accessibility Tips

Make buttons easy for everyone – screen readers, color-blind users, etc.

• TalkBack (Android's reader) auto-reads button text – just add clear labels like "Save Changes"
• Skip extra descriptions unless your icon is confusing (e.g., custom drawings)
• Check colors: Aim for 4.5:1 contrast ratio – use Android Studio's tool or online checker
• Beginner tip: Test with TalkBack on – enable in Settings > Accessibility

Button Types

Two main kinds: Regular for one-time taps, Toggle for switches.

• Default Button: For simple actions like "Send" in forms or dialogs
• Toggle Button: For yes/no choices like "Favorite this" – changes look when tapped
• Styles: Pick based on importance (see list above)
• Sizes: XS (32dp) for tiny spots, S (36dp default), M (40dp), L (48dp), XL (56dp) for big thumbs – use app:iconSize="24dp" to adjust icons
• Tip: Default size works for most apps – don't overthink at first

Elevated Button

Like a button on a pillow – it has a shadow to pop out.

• Shadow helps it stand out on busy backgrounds
• Use sparingly to avoid clutter – one or two per screen max

When to Use

• For the most important actions, like "Confirm Purchase" on crowded screens
• Great in cards or lists with patterns – shadow keeps it visible
• Skip in simple apps; try Filled instead if shadows look too much

UI/UX Considerations

• Adds a sense of depth, like the button is floating up
• Easy on the eyes for most users, but test shadows for low-vision
• Reduces mistakes by feeling more "touchable" – add vibration for fun

XML Example

<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"
    app:icon="@drawable/ic_add_24dp" />
    

Kotlin Example

val elevatedButton = findViewById<Button>(R.id.elevatedButton)
elevatedButton.setOnClickListener {
    // What happens on tap – e.g., show a message
    Toast.makeText(this, "Tapped!", Toast.LENGTH_SHORT).show()
}
    

Filled Button

The classic full-color button – like a painted sign that grabs attention.

• Strong color fill for key actions
• Default choice – no extra style needed

When to Use

• For main calls-to-action, like "Submit Form" or "Start Now"
• Works well in simple layouts – color pops without extras
• Balance with subtler buttons nearby

UI/UX Considerations

• Colors match your app's theme automatically
• Good contrast for easy reading and tapping
• Ripple effect on tap feels responsive and fun

XML Example

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

Kotlin Example

val filledButton = findViewById<Button>(R.id.filledButton)
filledButton.setOnClickListener {
    // What happens on tap
    Toast.makeText(this, "Tapped!", Toast.LENGTH_SHORT).show()
}
    

Filled Tonal Button

A softer version of Filled – like pastel paint for gentle nudges.

• Lighter color for supporting actions
• Blends nicely without stealing the show

When to Use

• For next steps, like "Save Draft" next to "Publish"
• Good in groups of buttons – keeps things balanced
• Check in dark mode; it might need tweaks

UI/UX Considerations

• Feels calm and inviting in your app's colors
• Easy to read for all users
• Helps guide without pushing too hard

XML Example

<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"
    app:icon="@drawable/ic_add_24dp" />
    

Kotlin Example

val filledTonalButton = findViewById<Button>(R.id.filledTonalButton)
filledTonalButton.setOnClickListener {
    // Handle next step
    Toast.makeText(this, "Saved draft!", Toast.LENGTH_SHORT).show()
}
    

Outlined Button

A framed button – clean lines, no fill, like a window outline.

• Border gives structure without color overload
• Perfect for options like "See all" or "Cancel"

When to Use

• For everyday choices in pop-ups, like "Learn More"
• Saves space in menus or bars
• Avoid on busy patterns – border might fade

UI/UX Considerations

• Keeps screens light and easy to scan
• Border highlights when focused – good for keyboards
• Guides users gently to side options

XML Example

<Button
    style="@style/Widget.Material3.Button.OutlinedButton"
    android:id="@+id/outlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Outlined button"
    app:icon="@drawable/ic_add_24dp" />
    

Kotlin Example

val outlinedButton = findViewById<Button>(R.id.outlinedButton)
outlinedButton.setOnClickListener {
    // Side action
    Toast.makeText(this, "More info!", Toast.LENGTH_SHORT).show()
}
    

Text Button

Just words that act like buttons – blends in like regular text.

• Super subtle for lists of choices
• No switch mode – keeps things plain

When to Use

• For small links like "Terms" at the bottom
• Fits clean, text-heavy screens
• Not for big decisions – too quiet

UI/UX Considerations

• Melds with your text – no distractions
• Add underline on hover for clues
• Flows like reading a book – quick and natural

XML Example

<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"
    app:icon="@drawable/ic_add_24dp" />
    

Kotlin Example

val textButton = findViewById<Button>(R.id.textButton)
textButton.setOnClickListener {
    // Quiet action
    Toast.makeText(this, "Link opened!", Toast.LENGTH_SHORT).show()
}
    

Toggle Button

A button that flips states, like a light switch.

• For on/off choices, like "Favorite this item"
• Changes shape and color on tap – easy to see
• Works with most styles, but not Text

When to Use

• For likes or saves in lists – shows if it's active
• Instant change helps users know it's working
• Use Outlined or Filled for best results

UI/UX Considerations

• Shape shift (round to square) feels magical
• Icon changes help without words
• Makes tapping fun and clear

XML Example

<Button
    style="@style/Widget.Material3.Button.OutlinedButton.Icon"
    android:id="@+id/toggleButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Toggle button"
    app:icon="@drawable/ic_favorite_24dp" />
    

Kotlin Example

val toggleButton = findViewById<Button>(R.id.toggleButton)
toggleButton.isChecked = false
toggleButton.setOnCheckedChangeListener { button, isChecked ->
    if (isChecked) {
        button.setIconResource(R.drawable.ic_favorite_filled_24dp)
        button.text = "Favorited"
    } else {
        button.setIconResource(R.drawable.ic_favorite_24dp)
        button.text = "Favorite"
    }
}
    

Optical Centering

A tweak for perfect alignment – like adjusting a picture frame.

• Shifts content slightly for balanced look
• Turn on with button.setOpticalCenterEnabled(true)
• Tip: Off by default – use if icons look off-center

val button = findViewById<Button>(R.id.elevatedButton)
button.setOpticalCenterEnabled(true) // Looks more even!
    

Theming

Customize to match your app – colors, fonts, corners.

• Change colors and fonts in styles.xml
• Beginner tip: Start with one change, like your brand color

Basic Theme XML

<style name="Theme.App" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/shrine_pink_100</item>
    <item name="colorOnPrimary">@color/shrine_pink_900</item>
    <item name="textAppearanceLabelLarge">@style/TextAppearance.App.Button</item>
    <item name="shapeCornerFamily">cut</item>
</style>
<style name="TextAppearance.App.Button" parent="TextAppearance.Material3.LabelLarge">
    <item name="fontFamily">@font/rubik</item>
    <item name="android:fontFamily">@font/rubik</item>
</style>
    

Advanced Button Styles XML

For full control – copy if ready to experiment.

<style name="Theme.App" parent="Theme.Material3.DayNight">
    <item name="materialButtonStyle">@style/Widget.App.Button</item>
    <item name="materialButtonOutlinedStyle">@style/Widget.App.Button.OutlinedButton</item>
    <item name="borderlessButtonStyle">@style/Widget.App.Button.TextButton</item>
</style>
<style name="Widget.App.Button" parent="Widget.Material3.Button">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button</item>
    <item name="android:textAppearance">@style/TextAppearance.App.Button</item>
    <item name="shapeAppearance">@style/ShapeAppearance.App.Button</item>
</style>
<style name="Widget.App.Button.OutlinedButton" parent="Widget.Material3.Button.OutlinedButton">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button.TextButton</item>
    <item name="android:textAppearance">@style/TextAppearance.App.Button</item>
    <item name="shapeAppearance">@style/ShapeAppearance.App.Button</item>
</style>
<style name="Widget.App.Button.TextButton" parent="Widget.Material3.Button.TextButton">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button.TextButton</item>
    <item name="android:textAppearance">@style/TextAppearance.App.Button</item>
    <item name="shapeAppearance">@style/ShapeAppearance.App.Button</item>
</style>
<style name="ThemeOverlay.App.Button" parent="ThemeOverlay.Material3.Button">
    <item name="colorContainer">@color/shrine_pink_100</item>
    <item name="colorOnContainer">@color/shrine_pink_900</item>
</style>
<style name="ThemeOverlay.App.Button.TextButton" parent="ThemeOverlay.Material3.Button.TextButton">
    <item name="colorOnContainer">@color/shrine_pink_900</item>
</style>
<style name="ShapeAppearance.App.Button" parent="">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">4dp</item>
</style>
    

Material Design Docs

Want more? Official guides have pictures and videos.

• Follows Google's Button rules
• Details on looks, taps, and custom styles
• Covers easy access for all + new Expressive features
• Full docs here – bookmark for later!