Material Design

What is Material Design 3?

Material Design 3 (Material You) is Google's design system for building consistent, accessible UIs. It provides pre-built components, color schemes, and motion patterns that look native on Android devices.

Adding Material Components

Add the Material dependency to your module's build.gradle:

dependencies {
    implementation("com.google.android.material:material:1.12.0")
}

Your app theme must extend a Material theme:

<!-- res/values/themes.xml -->
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/purple_500</item>
    <item name="colorOnPrimary">@color/white</item>
    <item name="colorSecondary">@color/teal_200</item>
</style>

Material Buttons

Material provides several button variants for different emphasis levels:

<!-- Filled button — primary action -->
<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Save" />

<!-- Outlined button — secondary action -->
<com.google.android.material.button.MaterialButton
    style="@style/Widget.Material3.Button.OutlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Cancel" />

<!-- Text button — low emphasis -->
<com.google.android.material.button.MaterialButton
    style="@style/Widget.Material3.Button.TextButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Learn More" />

Choose button emphasis based on the action's importance: filled for primary, outlined for secondary, text for tertiary.

Cards

Cards group related content with rounded corners and optional elevation:

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardCornerRadius="12dp"
    app:cardElevation="2dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Order #1234"
            android:textAppearance="?attr/textAppearanceTitleMedium" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Delivered yesterday"
            android:textAppearance="?attr/textAppearanceBodyMedium" />
    </LinearLayout>
</com.google.android.material.card.MaterialCardView>

Note the use of ?attr/textAppearanceTitleMedium — these are Material's built-in text styles that automatically match the current theme.

Floating Action Button (FAB)

The FAB represents the primary action on a screen. It floats above content and uses a distinct color to draw attention:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:src="@drawable/ic_add"
    app:layout_anchor="@id/recyclerView"
    app:layout_anchorGravity="bottom|end" />

Use app:layout_anchor to attach the FAB to another view — it automatically repositions when the anchor moves (e.g., when a Snackbar appears).

For an Extended FAB with a label:

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:id="@+id/extendedFab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Compose"
    android:src="@drawable/ic_edit" />

Bottom Navigation

Bottom navigation provides top-level destinations in your app. Use it for 3-5 destinations:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNav"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom_nav_menu" />

Define the menu items in res/menu/bottom_nav_menu.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_home"
        android:title="Home" />
    <item
        android:id="@+id/nav_search"
        android:icon="@drawable/ic_search"
        android:title="Search" />
    <item
        android:id="@+id/nav_profile"
        android:icon="@drawable/ic_person"
        android:title="Profile" />
</menu>

Handle navigation in code:

binding.bottomNav.setOnItemSelectedListener { item ->
    when (item.itemId) {
        R.id.nav_home -> { navigateToHome(); true }
        R.id.nav_search -> { navigateToSearch(); true }
        R.id.nav_profile -> { navigateToProfile(); true }
        else -> false
    }
}

Snackbars

Snackbars provide brief feedback at the bottom of the screen. Unlike Toasts, they support action buttons and can be dismissed by swiping:

Snackbar.make(binding.root, "Item deleted", Snackbar.LENGTH_LONG)
    .setAction("UNDO") {
        // Restore the item
    }
    .show()

Snackbar vs Toast: Snackbar is better because it supports user interaction (action buttons), can be dismissed, and doesn't disappear while the user is reading it. Toasts are fire-and-forget — avoid them in modern apps.

Snackbar vs Dialog: Use Snackbar for non-blocking feedback. Use a Dialog only when the user must make a decision before continuing.