From fca1418bf401b36ad67d37f8968c261cc3ebe2cd Mon Sep 17 00:00:00 2001 From: Material Design Team Date: Mon, 25 Aug 2025 03:03:53 -0700 Subject: [PATCH] [Docs] Updated documentation with Expressive code/info for: Bottom Navigation Common Button Docked Toolbar Extended Floating Action Button Floating Action Button Floating Toolbar Navigation Drawer PiperOrigin-RevId: 799044938 --- docs/components/BottomNavigation.md | 47 ++- docs/components/CommonButton.md | 300 ++++++++++++++++-- docs/components/DockedToolbar.md | 20 +- .../ExtendedFloatingActionButton.md | 69 +++- docs/components/FloatingActionButton.md | 96 +++++- docs/components/FloatingToolbar.md | 70 +++- docs/components/NavigationDrawer.md | 4 +- ...nbar_anatomy.png => bottomnav-anatomy.png} | Bin ...xpressive.png => bottomnav-expressive.png} | Bin ...igationbar_hero.png => bottomnav-hero.png} | Bin ...orizontal.png => bottomnav-horizontal.png} | Bin .../assets/buttons/checked-elevated-dark.png | Bin 0 -> 8054 bytes .../assets/buttons/checked-elevated-light.png | Bin 0 -> 8285 bytes .../buttons/checked-filled-button-dark.png | Bin 0 -> 8054 bytes .../buttons/checked-filled-button-light.png | Bin 0 -> 8285 bytes .../checked-filled-icon-button-dark.png | Bin 0 -> 9011 bytes .../checked-filled-icon-button-light.png | Bin 0 -> 9274 bytes .../buttons/checked-filled-tonal-dark.png | Bin 0 -> 8082 bytes .../buttons/checked-filled-tonal-light.png | Bin 0 -> 8116 bytes .../buttons/checked-outlined-button-dark.png | Bin 0 -> 7735 bytes .../buttons/checked-outlined-button-light.png | Bin 0 -> 7598 bytes .../assets/buttons/checked-round-shaped.png | Bin 0 -> 8054 bytes .../assets/buttons/checked-square-shape.png | Bin 0 -> 9302 bytes ...n_anatomy.png => commonbutton-anatomy.png} | Bin ...essive.png => commonbutton-expressive.png} | Bin ...ton_styles.png => commonbutton-styles.png} | Bin ...utton_types.png => commonbutton-types.png} | Bin ...tons_types.png => commonbuttons-types.png} | Bin .../assets/buttons/default-elevated-dark.png | Bin 0 -> 9485 bytes .../assets/buttons/default-elevated-light.png | Bin 0 -> 9192 bytes .../buttons/default-filled-button-dark.png | Bin 0 -> 9302 bytes .../buttons/default-filled-button-light.png | Bin 0 -> 9524 bytes .../buttons/default-filled-button_dark.png | Bin 0 -> 9302 bytes .../default-filled-icon-button-dark.png | Bin 0 -> 10540 bytes .../default-filled-icon-button-light.png | Bin 0 -> 10282 bytes .../buttons/default-filled-tonal-dark.png | Bin 0 -> 9388 bytes .../buttons/default-filled-tonal-light.png | Bin 0 -> 9339 bytes .../buttons/default-outlined-button-dark.png | Bin 0 -> 12313 bytes .../buttons/default-outlined-button-light.png | Bin 0 -> 12309 bytes .../assets/buttons/default-round-shape.png | Bin 0 -> 9302 bytes .../assets/buttons/default-square-shape.png | Bin 0 -> 8054 bytes .../assets/buttons/extra-large-size.png | Bin 0 -> 28055 bytes docs/components/assets/buttons/extrasmall.png | Bin 0 -> 8701 bytes docs/components/assets/buttons/large-size.png | Bin 0 -> 19419 bytes .../components/assets/buttons/medium-size.png | Bin 0 -> 11226 bytes docs/components/assets/buttons/small-size.png | Bin 0 -> 9302 bytes .../assets/buttons/text-button-dark.png | Bin 0 -> 6317 bytes .../assets/buttons/text-button-light.png | Bin 0 -> 6158 bytes .../assets/buttons/unchecked-button-dark.png | Bin 0 -> 9602 bytes .../assets/buttons/unchecked-button-light.png | Bin 0 -> 9500 bytes .../buttons/unchecked-elevated-dark.png | Bin 0 -> 9485 bytes .../buttons/unchecked-elevated-light.png | Bin 0 -> 9192 bytes .../unchecked-filled-icon-button-dark.png | Bin 0 -> 10667 bytes .../unchecked-filled-icon-button-light.png | Bin 0 -> 10554 bytes .../buttons/unchecked-filled-tonal-dark.png | Bin 0 -> 9388 bytes .../buttons/unchecked-filled-tonal-light.png | Bin 0 -> 9339 bytes .../unchecked-outlined-button-dark.png | Bin 0 -> 12313 bytes .../unchecked-outlined-button-light.png | Bin 0 -> 12309 bytes .../assets/buttons/unchecked-round-shape.png | Bin 0 -> 9500 bytes .../assets/buttons/unchecked-square-shape.png | Bin 0 -> 8262 bytes ...anatomy.png => docked-toolbar-anatomy.png} | Bin ...theming.png => docked-toolbar-theming.png} | Bin ...{docked_toolbar.png => docked-toolbar.png} | Bin ...ssive.png => dockedtoolbar-expressive.png} | Bin .../{EFAB_anatomy.png => efab-anatomy.png} | Bin .../assets/fabs/efab-anatomy_long.png | Bin 0 -> 21878 bytes ...FAB_expressive.png => efab-expressive.png} | Bin docs/components/assets/fabs/efab-hero.png | Bin 0 -> 22721 bytes .../fabs/{EFAB_sizes.png => efab-sizes.png} | Bin .../fabs/{EFAB_types.png => efab-types.png} | Bin docs/components/assets/fabs/efab_types.png | Bin 0 -> 112735 bytes .../fabs/{FAB_3sizes.png => fab-3sizes.png} | Bin .../assets/fabs/fab-anatomy-long.png | Bin 0 -> 143553 bytes .../fabs/{FAB_anatomy.png => fab-anatomy.png} | Bin .../assets/fabs/fab-expressive-dark.png | Bin 0 -> 3968 bytes .../assets/fabs/fab-expressive-large-dark.png | Bin 0 -> 7427 bytes .../fabs/fab-expressive-large-light.png | Bin 0 -> 7360 bytes .../assets/fabs/fab-expressive-light.png | Bin 0 -> 3910 bytes .../fabs/fab-expressive-medium-dark.png | Bin 0 -> 5606 bytes .../fabs/fab-expressive-medium-light.png | Bin 0 -> 5535 bytes ...{FAB_expressive.png => fab-expressive.png} | Bin .../{fab_extended.png => fab-extended.png} | Bin docs/components/assets/fabs/fab-hero.png | Bin 0 -> 31177 bytes .../fabs/{FAB_large.png => fab-large.png} | Bin .../fabs/{FAB_medium.png => fab-medium.png} | Bin .../fabs/{fab_mini.png => fab-mini.png} | Bin .../fabs/{fab_regular.png => fab-regular.png} | Bin .../fabs/{fab_theming.png => fab-theming.png} | Bin .../fabs/{FAB_types.png => fab-types.png} | Bin .../fabs/{FABs_sizes.png => fabs-sizes.png} | Bin .../assets/fabs/large-efabs-dark.png | Bin 0 -> 18264 bytes .../assets/fabs/large-efabs-light.png | Bin 0 -> 18190 bytes .../assets/fabs/largefab-anatomy-long.png | Bin 0 -> 148149 bytes .../assets/fabs/medium-efabs-dark.png | Bin 0 -> 15137 bytes .../assets/fabs/medium-efabs-light.png | Bin 0 -> 15178 bytes .../assets/fabs/minifab-anatomy-long.png | Bin 0 -> 141560 bytes .../assets/fabs/small-efabs-dark.png | Bin 0 -> 10833 bytes .../assets/fabs/small-efabs-light.png | Bin 0 -> 10835 bytes ...ive.png => floatingtoolbar-expressive.png} | Bin .../standard-floating-toolbar.png | Bin 0 -> 30958 bytes .../vibrant-floating-toolbar.png | Bin 0 -> 29848 bytes ...tomy.png => navigation-drawer-anatomy.png} | Bin ...iew.png => navigation-drawer-overview.png} | Bin 103 files changed, 535 insertions(+), 71 deletions(-) rename docs/components/assets/bottomnav/{navigationbar_anatomy.png => bottomnav-anatomy.png} (100%) rename docs/components/assets/bottomnav/{navigationbar_expressive.png => bottomnav-expressive.png} (100%) rename docs/components/assets/bottomnav/{navigationbar_hero.png => bottomnav-hero.png} (100%) rename docs/components/assets/bottomnav/{bottomnav_horizontal.png => bottomnav-horizontal.png} (100%) create mode 100644 docs/components/assets/buttons/checked-elevated-dark.png create mode 100644 docs/components/assets/buttons/checked-elevated-light.png create mode 100644 docs/components/assets/buttons/checked-filled-button-dark.png create mode 100644 docs/components/assets/buttons/checked-filled-button-light.png create mode 100644 docs/components/assets/buttons/checked-filled-icon-button-dark.png create mode 100644 docs/components/assets/buttons/checked-filled-icon-button-light.png create mode 100644 docs/components/assets/buttons/checked-filled-tonal-dark.png create mode 100644 docs/components/assets/buttons/checked-filled-tonal-light.png create mode 100644 docs/components/assets/buttons/checked-outlined-button-dark.png create mode 100644 docs/components/assets/buttons/checked-outlined-button-light.png create mode 100644 docs/components/assets/buttons/checked-round-shaped.png create mode 100644 docs/components/assets/buttons/checked-square-shape.png rename docs/components/assets/buttons/{commonbutton_anatomy.png => commonbutton-anatomy.png} (100%) rename docs/components/assets/buttons/{commonbutton_expressive.png => commonbutton-expressive.png} (100%) rename docs/components/assets/buttons/{commonbutton_styles.png => commonbutton-styles.png} (100%) rename docs/components/assets/buttons/{commonbutton_types.png => commonbutton-types.png} (100%) rename docs/components/assets/buttons/{commonbuttons_types.png => commonbuttons-types.png} (100%) create mode 100644 docs/components/assets/buttons/default-elevated-dark.png create mode 100644 docs/components/assets/buttons/default-elevated-light.png create mode 100644 docs/components/assets/buttons/default-filled-button-dark.png create mode 100644 docs/components/assets/buttons/default-filled-button-light.png create mode 100644 docs/components/assets/buttons/default-filled-button_dark.png create mode 100644 docs/components/assets/buttons/default-filled-icon-button-dark.png create mode 100644 docs/components/assets/buttons/default-filled-icon-button-light.png create mode 100644 docs/components/assets/buttons/default-filled-tonal-dark.png create mode 100644 docs/components/assets/buttons/default-filled-tonal-light.png create mode 100644 docs/components/assets/buttons/default-outlined-button-dark.png create mode 100644 docs/components/assets/buttons/default-outlined-button-light.png create mode 100644 docs/components/assets/buttons/default-round-shape.png create mode 100644 docs/components/assets/buttons/default-square-shape.png create mode 100644 docs/components/assets/buttons/extra-large-size.png create mode 100644 docs/components/assets/buttons/extrasmall.png create mode 100644 docs/components/assets/buttons/large-size.png create mode 100644 docs/components/assets/buttons/medium-size.png create mode 100644 docs/components/assets/buttons/small-size.png create mode 100644 docs/components/assets/buttons/text-button-dark.png create mode 100644 docs/components/assets/buttons/text-button-light.png create mode 100644 docs/components/assets/buttons/unchecked-button-dark.png create mode 100644 docs/components/assets/buttons/unchecked-button-light.png create mode 100644 docs/components/assets/buttons/unchecked-elevated-dark.png create mode 100644 docs/components/assets/buttons/unchecked-elevated-light.png create mode 100644 docs/components/assets/buttons/unchecked-filled-icon-button-dark.png create mode 100644 docs/components/assets/buttons/unchecked-filled-icon-button-light.png create mode 100644 docs/components/assets/buttons/unchecked-filled-tonal-dark.png create mode 100644 docs/components/assets/buttons/unchecked-filled-tonal-light.png create mode 100644 docs/components/assets/buttons/unchecked-outlined-button-dark.png create mode 100644 docs/components/assets/buttons/unchecked-outlined-button-light.png create mode 100644 docs/components/assets/buttons/unchecked-round-shape.png create mode 100644 docs/components/assets/buttons/unchecked-square-shape.png rename docs/components/assets/dockedtoolbar/{docked_toolbar_anatomy.png => docked-toolbar-anatomy.png} (100%) rename docs/components/assets/dockedtoolbar/{docked_toolbar_theming.png => docked-toolbar-theming.png} (100%) rename docs/components/assets/dockedtoolbar/{docked_toolbar.png => docked-toolbar.png} (100%) rename docs/components/assets/dockedtoolbar/{dockedtoolbar_expressive.png => dockedtoolbar-expressive.png} (100%) rename docs/components/assets/fabs/{EFAB_anatomy.png => efab-anatomy.png} (100%) create mode 100644 docs/components/assets/fabs/efab-anatomy_long.png rename docs/components/assets/fabs/{EFAB_expressive.png => efab-expressive.png} (100%) create mode 100644 docs/components/assets/fabs/efab-hero.png rename docs/components/assets/fabs/{EFAB_sizes.png => efab-sizes.png} (100%) rename docs/components/assets/fabs/{EFAB_types.png => efab-types.png} (100%) create mode 100644 docs/components/assets/fabs/efab_types.png rename docs/components/assets/fabs/{FAB_3sizes.png => fab-3sizes.png} (100%) create mode 100644 docs/components/assets/fabs/fab-anatomy-long.png rename docs/components/assets/fabs/{FAB_anatomy.png => fab-anatomy.png} (100%) create mode 100644 docs/components/assets/fabs/fab-expressive-dark.png create mode 100644 docs/components/assets/fabs/fab-expressive-large-dark.png create mode 100644 docs/components/assets/fabs/fab-expressive-large-light.png create mode 100644 docs/components/assets/fabs/fab-expressive-light.png create mode 100644 docs/components/assets/fabs/fab-expressive-medium-dark.png create mode 100644 docs/components/assets/fabs/fab-expressive-medium-light.png rename docs/components/assets/fabs/{FAB_expressive.png => fab-expressive.png} (100%) rename docs/components/assets/fabs/{fab_extended.png => fab-extended.png} (100%) create mode 100644 docs/components/assets/fabs/fab-hero.png rename docs/components/assets/fabs/{FAB_large.png => fab-large.png} (100%) rename docs/components/assets/fabs/{FAB_medium.png => fab-medium.png} (100%) rename docs/components/assets/fabs/{fab_mini.png => fab-mini.png} (100%) rename docs/components/assets/fabs/{fab_regular.png => fab-regular.png} (100%) rename docs/components/assets/fabs/{fab_theming.png => fab-theming.png} (100%) rename docs/components/assets/fabs/{FAB_types.png => fab-types.png} (100%) rename docs/components/assets/fabs/{FABs_sizes.png => fabs-sizes.png} (100%) create mode 100644 docs/components/assets/fabs/large-efabs-dark.png create mode 100644 docs/components/assets/fabs/large-efabs-light.png create mode 100644 docs/components/assets/fabs/largefab-anatomy-long.png create mode 100644 docs/components/assets/fabs/medium-efabs-dark.png create mode 100644 docs/components/assets/fabs/medium-efabs-light.png create mode 100644 docs/components/assets/fabs/minifab-anatomy-long.png create mode 100644 docs/components/assets/fabs/small-efabs-dark.png create mode 100644 docs/components/assets/fabs/small-efabs-light.png rename docs/components/assets/floatingtoolbar/{floatingtoolbar_expressive.png => floatingtoolbar-expressive.png} (100%) create mode 100644 docs/components/assets/floatingtoolbar/standard-floating-toolbar.png create mode 100644 docs/components/assets/floatingtoolbar/vibrant-floating-toolbar.png rename docs/components/assets/navigationdrawer/{navigation_drawer_anatomy.png => navigation-drawer-anatomy.png} (100%) rename docs/components/assets/navigationdrawer/{navigation_drawer_overview.png => navigation-drawer-overview.png} (100%) diff --git a/docs/components/BottomNavigation.md b/docs/components/BottomNavigation.md index 0b21f3870..41e487beb 100644 --- a/docs/components/BottomNavigation.md +++ b/docs/components/BottomNavigation.md @@ -9,14 +9,20 @@ path: /catalog/bottom-navigation/ # Bottom navigation (Navigation bar) -**Note:** Bottom navigation has been renamed to navigation bar. - [Navigation bar](https://m3.material.io/components/navigation-bar/overview) lets people switch between UI views on smaller devices. -Navigation bar with 4 icons. +**Note:** The design name of this component has been changed from **Bottom +navigation** to **Navigation bar**. However, Material's Android implementation +remains as `BottomNavigationView`. + +Navigation bar with 4 icons. Navigation bar on compact and medium window sizes +Navigation bars can have three to five destinations. The nav bar is positioned +at the bottom of screens for convenient access. Each destination is represented +by an icon and label text. + **Note:** Images use various dynamic color schemes. ## Design & API documentation @@ -26,7 +32,7 @@ Navigation bar on compact and medium window sizes ## Anatomy -![Navigation bar anatomy diagram](assets/bottomnav/navigationbar_anatomy.png) +![Navigation bar anatomy diagram](assets/bottomnav/bottomnav-anatomy.png) 1. Container 2. Icon @@ -39,7 +45,9 @@ Navigation bar on compact and medium window sizes More details on anatomy items in the [component guidelines](https://m3.material.io/components/navigation-bar/guidelines#895b5b49-a166-4d30-90be-c71a4c970f04). -## M3 Expressive update +## M3 Expressive + +### M3 Expressive update Before you can use `Material3Expressive` component styles, follow the [`Material3Expressive` themes setup instructions](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md#material3expressive-themes). @@ -48,14 +56,35 @@ A new expressive style for the bottom navigation bar has been introduced that's shorter and supports horizontal navigation items in medium-sized windows. [More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive) -Flexible horizontal navigation bar -The updated expressive navigation bar is shorter and can be used in medium -windows with horizontal nav items +Flexible horizontal navigation bar **Color:** * Active label changed from **on-surface-variant** to **secondary** +### M3 Expressive styles + +Changes from M3: + +* Height: From 80dp to 64dp +* Color: New expressive colors! +* Top item padding: From 12dp to 6dp +* Bottom item padding: From 16dp to 6dp +* Label text is no longer bolded when selected +* Active indicator: From 64dp to 56dp +* New horizontal item configuration on medium and larger window sizes (greater + than or equal to 600dp): + * Icon moves from top to start of item + * Instead of being a set width based on the item count, item width is + based on content with a max width + * Item gravity: From top center to center + +The default style for bottom navigation bar is: + +```xml +@style/Widget.Material3Expressive.BottomNavigationView +``` + ## Key properties ### Container attributes @@ -304,7 +333,7 @@ Here's an example: app:menu="@menu/bottom_navigation_menu"/> ``` -Horizontal navigation bar larger screens +Horizontal navigation bar larger screens ### Making navigation bar accessible diff --git a/docs/components/CommonButton.md b/docs/components/CommonButton.md index 181db0ffb..b09affc6c 100644 --- a/docs/components/CommonButton.md +++ b/docs/components/CommonButton.md @@ -13,12 +13,12 @@ path: /catalog/buttons/ take actions, and make choices, with a single tap. There are two variants of common buttons. -![2 types of common buttons](assets/buttons/commonbutton_types.png) +![2 types of common buttons](assets/buttons/commonbutton-types.png) 1. Default button 2. Toggle button -![Diagram of button styles and toggle behaviors](assets/buttons/commonbutton_styles.png) +![Diagram of button styles and toggle behaviors](assets/buttons/commonbutton-styles.png) There are five button styles, in order of emphasis: @@ -43,7 +43,7 @@ C. Toggle (selected)
## Anatomy -![Elevated button anatomy diagram](assets/buttons/commonbutton_anatomy.png) +![Elevated button anatomy diagram](assets/buttons/commonbutton-anatomy.png) 1. Container 2. Label text @@ -52,12 +52,14 @@ C. Toggle (selected)
More details on anatomy items in the [component guidelines](https://m3.material.io/components/buttons/guidelines#653b660b-e9d8-48ad-9f53-67fb3d76e09e). -## M3 Expressive update +## M3 Expressive + +### M3 Expressive update Before you can use `Material3Expressive` component styles, follow the [`Material3Expressive` themes setup instructions](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md#material3expressive-themes). -4 button changes in the expressive update. +4 button changes in the expressive update 1. Five sizes 2. Toggle (selection) @@ -93,6 +95,240 @@ can change shape when selected * 16dp (recommended to match padding of new sizes) * 24dp (deprecated) +### M3 Expressive styles + +#### Buttons + +
Filled
+ +Default
| Checked
| Unchecked
+---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ----------------------------------------- +![Default expressive filled button example in dark theme](assets/buttons/default-filled-button-dark.png) | ![Checked expressive filled button in dark theme](assets/buttons/checked-filled-button-dark.png) | ![Unchecked expressive filled button in light theme](assets/buttons/unchecked-button-light.png) +![Default expressive filled button example in light theme](assets/buttons/default-filled-button-light.png) | ![Checked expressive filled button in light theme](assets/buttons/checked-filled-button-light.png) | ![Unchecked expressive filled button in dark theme](assets/buttons/unchecked-button-dark.png) + +By default, the filled button is uncheckable. To make it checkable, enable the +`android:checkable` attribute in style or layout. + +```xml +
+ +
Filled tonal
+ +Default
| Checked
| Unchecked
+------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------- +![Default expressive filled tonal button in light theme](assets/buttons/default-filled-tonal-light.png) | ![Checked expressive filled tonal button in dark theme](assets/buttons/checked-filled-tonal-dark.png) | ![Unchecked expressive filled tonal button in light theme](assets/buttons/unchecked-filled-tonal-light.png) +![Default expressive filled tonal button in dark theme](assets/buttons/default-filled-tonal-dark.png) | ![Checked expressive filled tonal button in light theme](assets/buttons/checked-filled-tonal-light.png) | ![Unchecked expressive filled tonal button in dark theme](assets/buttons/unchecked-filled-tonal-dark.png) + +By default, the tonal button is uncheckable. To make it checkable, enable the +`android:checkable` attribute in style or layout. + +```xml +
+ +
Outlined
+ +Default
| Checked
| Unchecked
+------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ----------------------------------------- +![Default expressive outlined button button in light theme](assets/buttons/default-outlined-button-light.png) | ![Checked expressive outlined button in dark theme](assets/buttons/checked-outlined-button-dark.png) | ![Unchecked expressive outlined button in light theme](assets/buttons/unchecked-outlined-button-light.png) +![Default expressive outlined button button in dark theme](assets/buttons/default-outlined-button-dark.png) | ![Checked expressive outlined button in light theme](assets/buttons/checked-outlined-button-light.png) | ![Unchecked expressive outlined button in dark theme](assets/buttons/unchecked-outlined-button-dark.png) + +By default, the outlined button is uncheckable. To make it checkable, enable the +`android:checkable` attribute in style or layout. + +```xml +
+ +
Text
+ +Expressive text button in dark theme with dark text and no outline
| Expressive text button in light theme with light text and no outline
+-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- + +The text button appears as only text until pressed. It does not have a solid +fill or outline by default. + +```xml +
+ +
Elevated
+ +Default
| Checked
| Unchecked
+----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------------------------------------- +![Default expressive elevated button in light theme](assets/buttons/default-elevated-light.png) | ![Checked expressive elevated button in dark theme](assets/buttons/checked-elevated-dark.png) | ![Unchecked expressive elevated button in light theme](assets/buttons/unchecked-elevated-light.png) +![Default expressive elevated button in dark theme](assets/buttons/default-elevated-dark.png) | ![Checked expressive elevated button in light theme](assets/buttons/checked-elevated-light.png) | ![Unchecked expressive elevated button in dark theme](assets/buttons/unchecked-elevated-dark.png) + +By default, the elevated button is uncheckable. To make it checkable, enable the +`android:checkable` attribute in style or layout. + +```xml +
+ +
Filled button with icons
+ +Default
| Checked
| Unchecked
+------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | ----------------------------------------- +![Default expressive filled icon button in light theme](assets/buttons/default-filled-icon-button-light.png) | ![Checked expressive filled icon button in dark theme](assets/buttons/checked-filled-icon-button-dark.png) | ![Unchecked expressive filled icon button in light theme](assets/buttons/unchecked-filled-icon-button-light.png) +![Default expressive filled icon button in dark theme](assets/buttons/default-filled-icon-button-dark.png) | ![Checked expressive filled icon button in light theme](assets/buttons/checked-filled-icon-button-light.png) | ![Unchecked expressive filled icon button in dark theme](assets/buttons/unchecked-filled-icon-button-dark.png) + +Icons visually communicate the button’s action and help draw attention. They +should be placed on the leading side of the button, before the label text. + +```xml +
+ +#### Shapes + +
Round
+ +Default
| Checked
| Unchecked
+---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------- +![Default expressive round filled button with icon in light theme](assets/buttons/default-round-shape.png) | ![Checked expressive round filled button with icon in light theme](assets/buttons/checked-round-shaped.png) | ![Unchecked expressive square round button with icon in light theme](assets/buttons/unchecked-round-shape.png) + +```xml +
+ +
Square
+ +Default
| Checked
| Unchecked
+------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | ----------------------------------------- +![Default expressive square filled button with icon in light theme](assets/buttons/default-square-shape.png) | ![Checked expressive square filled button with icon in light theme](assets/buttons/checked-square-shape.png) | ![Unchecked expressive square filled button with icon in light theme](assets/buttons/unchecked-square-shape.png) + +```xml +
+ +#### Sizes + +**Note:** Images below show the label buttons in different sizes relatively. The +actual sizes in px on mobile devices depends on the screen pixel density. + +
Extra small
+ + + +```xml +
+ +
Small
+ + + +```xml +
+ +
Medium
+ + + +```xml +
+ +
Large
+ + + +```xml +
+ +
Extra Large
+ + + +```xml +
+ ## Key properties
@@ -388,7 +624,7 @@ page. * The default and toggle buttons use different colors * Toggle buttons don’t use the text style -![5 types of common buttons](assets/buttons/commonbuttons_types.png) +![5 types of common buttons](assets/buttons/commonbuttons-types.png) 1. Elevated button 2. Filled button @@ -421,7 +657,7 @@ In the layout: ```xml