diff --git a/docs/components/BadgeDrawable.md b/docs/components/BadgeDrawable.md index ee67c249c15..8392d929ec9 100644 --- a/docs/components/BadgeDrawable.md +++ b/docs/components/BadgeDrawable.md @@ -9,6 +9,11 @@ path: /catalog/badging/ # `BadgeDrawable` +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/badges/overview) +* [API reference](https://developer.android.com/reference/com/google/android/material/badge/package-summary) + ## Using badges Badge | Badge with number | Badge with a maximum character count @@ -23,13 +28,16 @@ A `BadgeDrawable` represents dynamic information such as a number of pending requests in a [`BottomNavigationView`](BottomNavigation.md) or [`TabLayout`](Tabs.md). -## Design & API Documentation +## Usage -- [Material Design guidelines: Bottom Navigation](https://material.io/design/components/bottom-navigation.html#behavior) -- [Class definition](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/badge/BadgeDrawable.java) -- [Class overview](https://developer.android.com/reference/com/google/android/material/badge/BadgeDrawable) +API and source code: -## Usage +* `BadgeDrawable` + * [Class definition](https://developer.android.com/reference/com/google/android/material/badge/BadgeDrawable) + * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/badge/BadgeDrawable.java) +* `BadgeUtils` + * [Class definition](https://developer.android.com/reference/com/google/android/material/badge/BadgeUtils) + * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/badge/BadgeUtils.java) Create an instance of `BadgeDrawable` by calling `create(Context)` or `createFromAttributes(Context, AttributeSet, int, int)}`. diff --git a/docs/components/BottomAppBar.md b/docs/components/BottomAppBar.md index 9700f40e185..f50ac26b126 100644 --- a/docs/components/BottomAppBar.md +++ b/docs/components/BottomAppBar.md @@ -20,10 +20,16 @@ revert back to the previous style. **Contents** +* [Design & API documentation](#design-api-documentation) * [Using bottom app bars](#using-bottom-app-bars) * [Bottom app bar](#bottom-app-bar) * [Theming bottom app bars](#theming-bottom-app-bars) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/bottom-app-bar/overview) +* [API Reference](https://developer.android.com/reference/com/google/android/material/bottomappbar/package-summary) + ## Using bottom app bars Before you can use Material bottom app bars, you need to add a dependency to the diff --git a/docs/components/BottomNavigation.md b/docs/components/BottomNavigation.md index a16a7fd2824..eb9fdc926e3 100644 --- a/docs/components/BottomNavigation.md +++ b/docs/components/BottomNavigation.md @@ -16,10 +16,16 @@ allow movement between primary destinations in an app. **Contents** +* [Design & API documentation](#design-api-documentation) * [Using bottom navigation](#using-bottom-navigation) * [Bottom navigation bar](#bottom-navigation-bar) * [Theming](#theming-a-bottom-navigation-bar) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/navigation-bar/overview) +* [API Reference](https://developer.android.com/reference/com/google/android/material/bottomnavigation/package-summary) + ## Using bottom navigation Before you can use the Material bottom navigation, you need to add a dependency @@ -267,8 +273,8 @@ The following is an anatomy diagram for the bottom navigation bar: **Element** | **Attribute** | **Related methods** | **Default value** ------------------------- | ------------------------- | ----------------------------------------------------- | ----------------- **Menu resource** | `app:menu` | `inflateMenu`
`getMenu` | N/A -**Ripple (inactive)** | `app:itemRippleColor` | `setItemRippleColor`
`getItemRippleColor` | Variations of `?attr/colorPrimary` and `?attr/colorOnSurfaceVariant` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/res/color/m3_navigation_bar_ripple_color_selector.xml)) -**Ripple (active)** | " | " | Variations of `?attr/colorPrimary` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/res/color/m3_navigation_bar_ripple_color_selector.xml)) +**Ripple (inactive)** | `app:itemRippleColor` | `setItemRippleColor`
`getItemRippleColor` | Variations of `?attr/colorPrimary` and `?attr/colorOnSurfaceVariant` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomnavigation/res/color/m3_navigation_bar_ripple_color_selector.xml)) +**Ripple (active)** | " | " | Variations of `?attr/colorPrimary` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomnavigation/res/color/m3_navigation_bar_ripple_color_selector.xml)) **Label visibility mode** | `app:labelVisibilityMode` | `setLabelVisibilityMode`
`getLabelVisibilityMode` | `LABEL_VISIBILITY_AUTO` #### Icon attributes @@ -277,19 +283,19 @@ The following is an anatomy diagram for the bottom navigation bar: -------------------- | ------------------------------------- | ---------------------------------------------------------------- | ----------------- **Icon** | `android:icon` in the `menu` resource | N/A | N/A **Size** | `app:itemIconSize` | `setItemIconSize`
`setItemIconSizeRes`
`getItemIconSize` | `24dp` -**Color (inactive)** | `app:itemIconTint` | `setItemIconTintList`
`getItemIconTintList` | `?attr/colorOnSurfaceVariant` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/res/color/m3_navigation_bar_item_with_indicator_icon_tint.xml)) -**Color (active)** | " | " | `?attr/colorOnSecondaryContainer` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/res/color/m3_navigation_bar_item_with_indicator_icon_tint.xml)) +**Color (inactive)** | `app:itemIconTint` | `setItemIconTintList`
`getItemIconTintList` | `?attr/colorOnSurfaceVariant` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomnavigation/res/color/m3_navigation_bar_item_with_indicator_icon_tint.xml)) +**Color (active)** | " | " | `?attr/colorOnSecondaryContainer` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomnavigation/res/color/m3_navigation_bar_item_with_indicator_icon_tint.xml)) #### Text label attributes -| **Element** | **Attribute** | **Related methods** | **Default value** | -|---------------------------|-------------------------------------------|---------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| **Text label** | `android:title` in the `menu` resource | N/A | N/A | -| **Color (inactive)** | `app:itemTextColor` | `setItemTextColor`
`getItemTextColor` | `?attr/colorOnSurfaceVariant` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/res/color/m3_navigation_bar_item_with_indicator_label_tint.xml)) | -| **Color (active)** | " | " | `?attr/colorOnSurface` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/res/color/m3_navigation_bar_item_with_indicator_label_tint.xml)) | -| **Typography (inactive)** | `app:itemTextAppearanceInactive` | `setItemTextAppearanceInactive`
`getItemTextAppearanceInactive` | `?attr/textAppearanceTitleSmall` | -| **Typography (active)** | `app:itemTextAppearanceActive` | `setItemTextAppearanceActive`
`getItemTextAppearanceActive` | `?attr/textAppearanceTitleSmall` | -| **Typography (active)** | `app:itemTextAppearanceActiveBoldEnabled` | `setItemTextAppearanceActiveBoldEnabled` | `true` | +**Element** | **Attribute** | **Related methods** | **Default value** +------------------------- | ----------------------------------------- | ------------------------------------------------------------------- | ----------------- +**Text label** | `android:title` in the `menu` resource | N/A | N/A +**Color (inactive)** | `app:itemTextColor` | `setItemTextColor`
`getItemTextColor` | `?attr/colorOnSurfaceVariant` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomnavigation/res/color/m3_navigation_bar_item_with_indicator_label_tint.xml)) +**Color (active)** | " | " | `?attr/colorOnSurface` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomnavigation/res/color/m3_navigation_bar_item_with_indicator_label_tint.xml)) +**Typography (inactive)** | `app:itemTextAppearanceInactive` | `setItemTextAppearanceInactive`
`getItemTextAppearanceInactive` | `?attr/textAppearanceTitleSmall` +**Typography (active)** | `app:itemTextAppearanceActive` | `setItemTextAppearanceActive`
`getItemTextAppearanceActive` | `?attr/textAppearanceTitleSmall` +**Typography (active)** | `app:itemTextAppearanceActiveBoldEnabled` | `setItemTextAppearanceActiveBoldEnabled` | `true` #### Styles diff --git a/docs/components/BottomSheet.md b/docs/components/BottomSheet.md index d1d1f6d2425..964bf5c1387 100644 --- a/docs/components/BottomSheet.md +++ b/docs/components/BottomSheet.md @@ -16,6 +16,7 @@ containing supplementary content that are anchored to the bottom of the screen. **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using bottom sheets](#using-bottom-sheets) * [Standard bottom sheet](#standard-bottom-sheet) * [Modal bottom sheet](#modal-bottom-sheet) @@ -23,6 +24,11 @@ containing supplementary content that are anchored to the bottom of the screen. * [Predictive Back](#predictive-back) * [Theming](#theming-bottom-sheets) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/bottom-sheets/overview) +* [API Reference](https://developer.android.com/reference/com/google/android/material/bottomsheet/package-summary) + ## Using bottom sheets Before you can use Material bottom sheets, you need to add a dependency to the @@ -246,7 +252,8 @@ simultaneously viewing and interacting with both regions. They are commonly used to keep a feature or secondary content visible on screen when content in the main UI region is frequently scrolled or panned. -`BottomSheetBehavior` is applied to a child of +[`BottomSheetBehavior`](https://developer.android.com/reference/com/google/android/material/bottomsheet/BottomSheetBehavior) +is applied to a child of [CoordinatorLayout](https://developer.android.com/reference/androidx/coordinatorlayout/widget/CoordinatorLayout) to make that child a **persistent bottom sheet**, which is a view that comes up from the bottom of the screen, elevated over the main content. It can be dragged @@ -341,9 +348,9 @@ rest of the screen. They are an alternative to inline menus and simple dialogs on mobile devices, providing additional room for content, iconography, and actions. -`BottomSheetDialogFragment` is a thin layer on top of the regular support -library Fragment that renders your fragment as a **modal bottom sheet**, -fundamentally acting as a dialog. +[`BottomSheetDialogFragment`](https://developer.android.com/reference/com/google/android/material/bottomsheet/BottomSheetDialogFragment) +is a thin layer on top of the regular support library Fragment that renders your +fragment as a **modal bottom sheet**, fundamentally acting as a dialog. Modal bottom sheets render a shadow on the content below them, to indicate that they are modal. If the content outside of the dialog is tapped, the bottom sheet diff --git a/docs/components/Button.md b/docs/components/Button.md index 75c525b3517..3981204a631 100644 --- a/docs/components/Button.md +++ b/docs/components/Button.md @@ -16,6 +16,7 @@ and make choices, with a single tap. **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using buttons](#using-buttons) * [Elevated button](#elevated-button) * [Filled button](#filled-button) @@ -26,6 +27,11 @@ and make choices, with a single tap. * [Icon button](#icon-button) * [Theming](#theming-buttons) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/buttons/overview) +* [API Reference](https://developer.android.com/reference/com/google/android/material/button/package-summary) + ## Using buttons Before you can use Material buttons, you need to add a dependency to the diff --git a/docs/components/Card.md b/docs/components/Card.md index cc9c8603234..3d58530a4f4 100644 --- a/docs/components/Card.md +++ b/docs/components/Card.md @@ -16,10 +16,16 @@ a single subject. **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using cards](#using-cards) * [Card](#card) * [Theming](#theming-cards) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/cards/overview) +* [API reference](https://developer.android.com/reference/com/google/android/material/card/package-summary) + ## Using cards Before you can use a Material card, you need to add a dependency to the Material diff --git a/docs/components/Carousel.md b/docs/components/Carousel.md index fbf85f11978..01c43ea401c 100644 --- a/docs/components/Carousel.md +++ b/docs/components/Carousel.md @@ -15,12 +15,32 @@ Carousels contain a collection of items that can move into or out of view **Contents** +* [Design & API documentation](#design-api-documentation) * [Using carousel](#using-carousel) * [Multi-browse carousels](#multi-browse-carousels) * [Customizing carousel](#customizing-carousel) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/carousel/overview) +* [API reference](https://developer.android.com/reference/com/google/android/material/carousel/package-summary) + ## Using carousel +API and source code: + +* `RecyclerView` + * [Class definition](https://developer.android.com/reference/androidx/recyclerview/widget/RecyclerView) +* `CarouselLayoutManager` + * [Class definition](https://developer.android.com/reference/com/google/android/material/carousel/CarouselLayoutManager) + * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/carousel/CarouselLayoutManager.java) +* `CarouselStrategy` + * [Class definition](https://developer.android.com/reference/com/google/android/material/carousel/CarouselStrategy) + * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/carousel/CarouselStrategy.java) +* `MaskableFrameLayout` + * [Class definition](https://developer.android.com/reference/com/google/android/material/carousel/MaskableFrameLayout) + * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/carousel/MaskableFrameLayout.java) + Before you can use Material carousels, you need to add a dependency on the Material Components for Android library. For more information, go to the [Getting started](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md) @@ -76,6 +96,12 @@ on which carousel strategy you are using; you can have a ![A contained, multi-browse Carousel](assets/carousel/multibrowse.png) +API and source code: + +* `MultiBrowseCarouselStrategy` + * [Class definition](https://developer.android.com/reference/com/google/android/material/carousel/MultiBrowseCarouselStrategy) + * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/carousel/MultiBrowseCarouselStrategy.java) + A multi-browse strategy allows quick browsing of many small items, like a photo thumbnail gallery. A start-aligned, multi-browse strategy is the default strategy for the carousel. @@ -130,7 +156,11 @@ The main means of changing the look of carousel is by setting the height of your ### Reacting to changes in item mask size -If your `RecyclerView`'s item layout contains text or other content that needs to react to changes in the item's mask, you can listen for changes in mask size by setting an `onMaskChangedListener` on your `MaskableFrameLayout` inside your `RecyclerView.ViewHolder`. +If your `RecyclerView`'s item layout contains text or other content that needs +to react to changes in the item's mask, you can listen for changes in mask size +by setting an +[`onMaskChangedListener`](https://developer.android.com/reference/com/google/android/material/carousel/OnMaskChangedListener) +on your `MaskableFrameLayout` inside your `RecyclerView.ViewHolder`. ```kotlin (viewHolder.itemView as MaskableFrameLayout).setOnMaskChangedListener( diff --git a/docs/components/Checkbox.md b/docs/components/Checkbox.md index 689b146bfdb..320fff0f1c5 100644 --- a/docs/components/Checkbox.md +++ b/docs/components/Checkbox.md @@ -24,10 +24,16 @@ checked](assets/checkbox/checkbox_hero.png) **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using checkboxes](#using-checkboxes) * [Checkbox](#checkbox) * [Theming checkboxes](#theming-checkboxes) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/checkbox/overview) +* [API reference](https://developer.android.com/reference/com/google/android/material/checkbox/package-summary) + ## Using checkboxes Before you can use Material checkboxes, you need to add a dependency to the diff --git a/docs/components/Chip.md b/docs/components/Chip.md index dcc4b26f1cf..0f3ba7caea9 100644 --- a/docs/components/Chip.md +++ b/docs/components/Chip.md @@ -16,6 +16,7 @@ represent an input, attribute, or action. **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using chips](#using-chips) * [Assist chip](#assist-chip) * [Filter chip](#filter-chip) @@ -23,6 +24,11 @@ represent an input, attribute, or action. * [Suggestion chip](#suggestion-chip) * [Theming chips](#theming-chips) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/chips/overview) +* [API reference](https://developer.android.com/reference/com/google/android/material/chip/package-summary) + ## Using chips Before you can use Material chips, you need to add a dependency to the Material diff --git a/docs/components/DatePicker.md b/docs/components/DatePicker.md index 714f4c05195..e801500060c 100644 --- a/docs/components/DatePicker.md +++ b/docs/components/DatePicker.md @@ -16,10 +16,16 @@ date or range of dates. **Contents** +* [Design & API documentation](#design-api-documentation) * [Using date pickers](#using-date-pickers) * [Calendar date picker](#calendar-date-picker) * [Theming date pickers](#theming-date-pickers) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/date-pickers/overview) +* [API reference](https://developer.android.com/reference/com/google/android/material/datepicker/package-summary) + ## Using date pickers Before you can use Material date pickers, you need to add a dependency to the diff --git a/docs/components/Dialog.md b/docs/components/Dialog.md index c9bdf7407e8..67a57115197 100644 --- a/docs/components/Dialog.md +++ b/docs/components/Dialog.md @@ -16,11 +16,17 @@ can contain critical information, require decisions, or involve multiple tasks. **Contents** +* [Design & API documentation](#design-api-documentation) * [Using dialogs](#using-dialogs) * [Basic dialog](#basic-dialog) * [Full-screen dialog](#full-screen-dialog) * [Theming](#theming-dialogs) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/date-pickers/overview) +* [API reference](https://developer.android.com/reference/com/google/android/material/dialog/package-summary) + ## Using dialogs Before you can use Material dialogs, you need to add a dependency to the diff --git a/docs/components/Divider.md b/docs/components/Divider.md index 4cf2aac4205..686fd712a00 100644 --- a/docs/components/Divider.md +++ b/docs/components/Divider.md @@ -16,10 +16,16 @@ groups. **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using dividers](#using-dividers) * [Divider's key properties](#key-properties) * [Theming dividers](#theming-dividers) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/divider/overview) +* [API reference](https://developer.android.com/reference/com/google/android/material/divider/package-summary) + ## Using dividers Before you can use Material dividers, you need to add a dependency to the diff --git a/docs/components/FloatingActionButton.md b/docs/components/FloatingActionButton.md index e2a8d083af6..0dbe26a8338 100644 --- a/docs/components/FloatingActionButton.md +++ b/docs/components/FloatingActionButton.md @@ -17,6 +17,7 @@ represents the primary action of a screen. **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using FABs](#using-fabs) * [FABs](#fabs) * [Small FABs](#small-fabs) @@ -24,6 +25,11 @@ represents the primary action of a screen. * [Extended FABs](#extended-fabs) * [Theming FABs](#theming-fabs) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/floating-action-button/overview) +* [API reference](https://developer.android.com/reference/com/google/android/material/fa/package-summary) + ## Using FABs A FAB performs the primary, or most common, action on a screen. It appears in diff --git a/docs/components/MaterialTextView.md b/docs/components/MaterialTextView.md index 68bb205bc7b..d847752d1ee 100644 --- a/docs/components/MaterialTextView.md +++ b/docs/components/MaterialTextView.md @@ -17,8 +17,9 @@ the user. To provide user-editable text, see ## Design & API Documentation -- [Class definition](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textview/MaterialTextView.java) -- [Class overview](https://developer.android.com/reference/com/google/android/material/textview/MaterialTextView) +* `MaterialTextView` + * [Class description](https://developer.android.com/reference/com/google/android/material/textview/MaterialTextView) + * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textview/MaterialTextView.java) ## Usage diff --git a/docs/components/Menu.md b/docs/components/Menu.md index 7ef1f789225..f23a5bbfc90 100644 --- a/docs/components/Menu.md +++ b/docs/components/Menu.md @@ -16,11 +16,17 @@ temporary surfaces. **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using menus](#using-menus) * [Dropdown menus](#dropdown-menus) * [Exposed dropdown menus](#exposed-dropdown-menus) * [Theming](#theming-menus) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/menus/overview) +* [API reference](https://developer.android.com/reference/android/view/Menu) + ## Using menus A menu displays a list of choices on a temporary surface. They appear when users @@ -97,8 +103,6 @@ context, popup, and list popup window menus), 2\. Dropdown menus display a list of options, triggered by an icon, button, or action. Their placement varies based on the element that opens them. -### Dropdown menu examples - API and source code: * `Menu` @@ -112,6 +116,8 @@ API and source code: * `ListPopupWindow` * [Class definition](https://developer.android.com/reference/android/widget/ListPopupWindow) +### Dropdown menu examples + #### Overflow menus The following example shows an overflow menu. @@ -454,8 +460,6 @@ options. Some variations can accept user-entered input. [Material text fields](https://material.io/design/components/text-fields.html) and their usage, see the [TextInputLayout documentation](TextField.md). -### Exposed dropdown menu example - API and source code: * `TextInputLayout` @@ -467,6 +471,8 @@ API and source code: * [Class definition](https://developer.android.com/reference/com/google/android/material/textfield/MaterialAutoCompleteTextView) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/MaterialAutoCompleteTextView.java) +### Exposed dropdown menu example + **Note:** `MaterialComponentsViewInflater` auto-inflates `` to `` when diff --git a/docs/components/NavigationDrawer.md b/docs/components/NavigationDrawer.md index 0428b730db5..4b2b1be6fb3 100644 --- a/docs/components/NavigationDrawer.md +++ b/docs/components/NavigationDrawer.md @@ -16,6 +16,7 @@ access to destinations in your app. **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using navigation drawers](#using-navigation-drawers) * [Anatomy](#anatomy) * [Standard navigation drawer](#standard-navigation-drawer) @@ -24,6 +25,11 @@ access to destinations in your app. * [Predictive Back](#predictive-back) * [Theming](#theming) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/navigation-drawer/overview) +* [API reference](https://developer.android.com/reference/com/google/android/material/navigation/package-summary) + ## Using navigation drawers Before you can use navigation drawers, you need to add a dependency to the @@ -350,14 +356,14 @@ allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile devices due to limited screen size. -### Standard navigation drawer example - API and source code: * `NavigationView` * [Class definition](https://developer.android.com/reference/com/google/android/material/navigation/NavigationView) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/NavigationView.java) +### Standard navigation drawer example + The following example shows a permanently visible standard navigation drawer. ![Nav drawer with "Header title", "Header text", “Subtitle”, and 3 items with @@ -412,7 +418,9 @@ elevated above most of the app’s UI and don’t affect the screen’s layout g They are primarily used for mobile devices where screen space is limited, and can be replaced by standard drawers on tablet and desktop. -### Modal navigation drawer example +[DrawerLayout](https://developer.android.com/reference/androidx/drawerlayout/widget/DrawerLayout) +is used in conjunction with NavigationDrawer to achieve the modal navigation +drawer. API and source code: @@ -422,6 +430,8 @@ API and source code: * `DrawerLayout` * [Class definition](https://developer.android.com/reference/androidx/drawerlayout/widget/DrawerLayout) +### Modal navigation drawer example + The following example shows a modal navigation drawer. ![A screen with a modal navigation drawer open. The drawer container "Header @@ -495,110 +505,6 @@ navigationView.setNavigationItemSelectedListener { menuItem -> For more information on top app bars see the [documentation](https://github.com/material-components/material-components-android/tree/master/docs/components/TopAppBar.md). -## Bottom navigation drawer - -[Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) -are modal drawers that are anchored to the bottom of the screen instead of the -left or right edge. They are only used with bottom app bars. - -These drawers open upon tapping the navigation menu icon in the bottom app bar. -They are only for use on mobile devices. - -### Bottom navigation drawer example - -API and source code: - -* `NavigationView` - * [Class definition](https://developer.android.com/reference/com/google/android/material/navigation/NavigationView) - * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/NavigationView.java) -* `BottomSheetBehavior` - * [Class definition](https://developer.android.com/reference/com/google/android/material/bottomsheet/BottomSheetBehavior) - * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomsheet/BottomSheetBehavior.java) - -The following example shows a bottom navigation drawer with a bottom app bar. - -![2 views: screen with bottom app bar; nav drawer covering bottom with scrim -over remaining screen.](assets/navigationdrawer/navigation_drawer_bottom.png) - -In the layout: - -```xml - - - - - - - - - - - - - - - -``` - -In code: - -```kt -val bottomSheetBehavior = BottomSheetBehavior.from(navigationView) -bottomSheetBehavior.state = BottomSheetBehavior.STATE_HIDDEN - -bottomAppBar.setNavigationOnClickListener { - bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED -} - -navigationView.setNavigationItemSelectedListener { menuItem -> - // Handle menu item selected - menuItem.isChecked = true - bottomSheetBehavior.state = BottomSheetBehavior.STATE_HIDDEN - true -} - -scrim.setOnClickListener { - bottomSheetBehavior.state = BottomSheetBehavior.STATE_HIDDEN -} - -bottomSheetBehavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() { - override fun onSlide(bottomSheet: View, slideOffset: Float) { - val baseColor = Color.BLACK - // 60% opacity - val baseAlpha = ResourcesCompat.getFloat(resources, R.dimen.material_emphasis_medium) - // Map slideOffset from [-1.0, 1.0] to [0.0, 1.0] - val offset = (slideOffset - (-1f)) / (1f - (-1f)) * (1f - 0f) + 0f - val alpha = MathUtils.lerp(0f, 255f, offset * baseAlpha).toInt() - val color = Color.argb(alpha, baseColor.red, baseColor.green, baseColor.blue) - scrim.setBackgroundColor(color) - } - override fun onStateChanged(bottomSheet: View, newState: Int) { - } -}) -``` - -For more information on bottom app bars see the -[documentation](https://github.com/material-components/material-components-android/tree/master/docs/components/BottomAppBar.md). - ## Predictive Back The `NavigationView` component automatically supports diff --git a/docs/components/NavigationRail.md b/docs/components/NavigationRail.md index 6b5b3a30f9e..36b3cc82eba 100644 --- a/docs/components/NavigationRail.md +++ b/docs/components/NavigationRail.md @@ -16,10 +16,16 @@ access to primary destinations in your app on tablet and desktop screens. **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using navigation rail](#using-navigation-rail) * [Navigation rail example](#navigation-rail-example) * [Theming](#theming-a-navigation-rail) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/navigation-rail/overview) +* [API Reference](https://developer.android.com/reference/com/google/android/material/navigationrail/package-summary) + ## Using navigation rail Before you can use the Material Navigation Rail, you need to add a dependency to @@ -120,6 +126,12 @@ which is set to true by default. To remove this behavior, set bottom insets independently by using `app:paddingTopSystemWindowInsets` and `app:paddingBottomSystemWindowInsets`. +API and source code: + +* `NavigationRailView` + * [Class description](https://developer.android.com/reference/com/google/android/material/navigationrail/NavigationRailView) + * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigationrail/NavigationRailView.java) + ### Making navigation rail accessible You should set an `android:title` for each of your `menu` items so that screen @@ -215,12 +227,6 @@ See the [`BadgeDrawable`](BadgeDrawable.md) documentation for more information. ## Navigation rail example -API and source code: - -* `NavigationRailView` - * [Class description](https://developer.android.com/reference/com/google/android/material/navigationrail/NavigationRailView) - * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigationrail/NavigationRailView.java) - The following example shows a navigation rail with four icons: * Alarms diff --git a/docs/components/ProgressIndicator.md b/docs/components/ProgressIndicator.md index 840b21799c4..e219f1d796d 100644 --- a/docs/components/ProgressIndicator.md +++ b/docs/components/ProgressIndicator.md @@ -16,12 +16,18 @@ express an unspecified wait time or display the length of a process. **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using progress indicators](#using-progress-indicators) * [Linear progress indicators](#linear-progress-indicators) * [Circular progress indicators](#circular-progress-indicators) * [Anatomy and key properties](#anatomy-and-key-properties) * [Theming progress indicators](#theming-progress-indicators) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/progress-indicators/overview) +* [API Reference](https://developer.android.com/reference/com/google/android/material/progressindicator/package-summary) + ## Using progress indicators Before you can use Material sliders, you need to add a dependency to the diff --git a/docs/components/RadioButton.md b/docs/components/RadioButton.md index f87a1cdb5c2..f43afb6dba6 100644 --- a/docs/components/RadioButton.md +++ b/docs/components/RadioButton.md @@ -23,10 +23,16 @@ Use radio buttons to: **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using radio buttons](#using-radio-buttons) * [Radio button](#radio-button) * [Theming radio buttons](#theming-radio-buttons) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/radio-button/overview) +* [API Reference](https://developer.android.com/reference/com/google/android/material/radiobutton/package-summary) + ## Using radio buttons Before you can use Material radio buttons, you need to add a dependency to the @@ -59,8 +65,6 @@ buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space. -### Radio buttons example - API and source code: * `MaterialRadioButton` @@ -69,6 +73,8 @@ API and source code: * `RadioGroup` * [Class definition](https://developer.android.com/reference/android/widget/RadioGroup) +### Radio buttons example + The following example shows a radio button group with five radio buttons. ![Example radio button group with 5 radio buttons, the first one is selected and diff --git a/docs/components/Search.md b/docs/components/Search.md index 03d945cd336..8997ca1e71e 100644 --- a/docs/components/Search.md +++ b/docs/components/Search.md @@ -16,12 +16,18 @@ surface that allows product-specific branding and additional navigation icons. **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using search components](#using-search-components) * [Search Bar](#search-bar) * [Search View](#search-view) * [Putting it all together](#putting-it-all-together) * [Predictive Back](#predictive-back) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/search/overview) +* [API Reference](https://developer.android.com/reference/com/google/android/material/search/package-summary) + ## Using search components Before you can use the Material Search components, you need to add a dependency to @@ -72,6 +78,12 @@ searchBar.setOnMenuItemClickListener( Note: `SearchBar` aims to provide a consistent search bar across all apps, so it does not support setting a custom background via `android:background`. +API and source code: + +* `SearchBar` + * [Class definition](https://developer.android.com/reference/com/google/android/material/search/SearchBar) + * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/search/SearchBar.java) + ### Anatomy and key properties The following is an anatomy diagram for the search bar: @@ -149,11 +161,6 @@ if (searchBar.collapse(contextualToolbar, appBarLayout)) { } ``` -## API and source code - -* [Class definition](https://developer.android.com/reference/com/google/android/material/search/SearchBar) -* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/search/SearchBar.java) - ## Search View The `SearchView` component provides an implementation of a full-screen search diff --git a/docs/components/SideSheet.md b/docs/components/SideSheet.md index f2e21f6dd21..658d4afb271 100644 --- a/docs/components/SideSheet.md +++ b/docs/components/SideSheet.md @@ -17,6 +17,7 @@ See [Bottom Sheet documentation](BottomSheet.md) for documentation about **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using side sheets](#using-side-sheets) * [Standard side sheet](#standard-side-sheet) * [Modal side sheet](#modal-side-sheet) @@ -25,6 +26,11 @@ See [Bottom Sheet documentation](BottomSheet.md) for documentation about * [Predictive Back](#predictive-back) * [Theming](#theming-side-sheets) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/side-sheets/overview) +* [API Reference](https://developer.android.com/reference/com/google/android/material/sidesheet/package-summary) + ## Using side sheets Before you can use Material side sheets, you need to add a dependency to the diff --git a/docs/components/Slider.md b/docs/components/Slider.md index 37e54cac4ae..8bc1f45b7c9 100644 --- a/docs/components/Slider.md +++ b/docs/components/Slider.md @@ -16,11 +16,17 @@ selections from a range of values. **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using sliders](#using-sliders) * [Continuous slider](#continuous-slider) * [Discrete slider](#discrete-slider) * [Theming sliders](#theming-sliders) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/sliders/overview) +* [API Reference](https://developer.android.com/reference/com/google/android/material/slider/package-summary) + ## Using sliders Before you can use Material sliders, you need to add a dependency to the @@ -67,8 +73,15 @@ slider.addOnChangeListener { slider, value, fromUser -> } ``` +API and source code: + +* `Slider` + * [Class definition](https://developer.android.com/reference/com/google/android/material/slider/Slider) + * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/slider/Slider.java) + ![2 range sliders](assets/slider/slider_basic_range.png) +A slider with two thumbs is called a range slider. Add a `RangeSlider` to a layout: ```xml @@ -117,6 +130,12 @@ rangeSlider.addOnChangeListener { rangeSlider, value, fromUser -> } ``` +API and source code: + +* `RangeSlider` + * [Class definition](https://developer.android.com/reference/com/google/android/material/slider/RangeSlider) + * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/slider/RangeSlider.java) + ### Making sliders accessible Sliders support setting content descriptors for use with screen readers. While @@ -184,19 +203,11 @@ There are two types of sliders: 1\. [Continuous slider](#continuous-slider), 2\. !["Slider examples of both continuous and discrete sliders."](assets/slider/slider_types.png) -A slider with two thumbs is called a range slider. - ## Continuous slider Continuous sliders allow users to make meaningful selections that don’t require a specific value. -API and source code: - -* `Slider` - * [Class definition](https://developer.android.com/reference/com/google/android/material/slider/Slider) - * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/slider/Slider.java) - The following example shows a continuous slider. !["Continuous sliders with pressed thumb valued at 20."](assets/slider/slider_cont.png) @@ -216,12 +227,6 @@ In the layout: ### Continuous range slider -API and source code: - -* `RangeSlider` - * [Class definition](https://developer.android.com/reference/com/google/android/material/slider/RangeSlider) - * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/slider/RangeSlider.java) - The following example shows a continuous range slider. !["Continuous range slider with left thumb at 20 and right thumb at 70."](assets/slider/slider_cont_range.png) @@ -244,12 +249,6 @@ In the layout: Discrete sliders display a numeric value label upon pressing the thumb, which allows a user to input an exact value. -API and source code: - -* `Slider` - * [Class definition](https://developer.android.com/reference/com/google/android/material/slider/Slider) - * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/slider/Slider.java) - The following example shows a discrete slider. !["Discrete single point slider with pressed thumb at a value of 20."](assets/slider/slider_disc.png) @@ -264,12 +263,6 @@ In the layout: ### Discrete range slider -API and source code: - -* `RangeSlider` - * [Class definition](https://developer.android.com/reference/com/google/android/material/slider/RangeSlider) - * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/slider/RangeSlider.java) - The following example shows a discrete range slider. !["Discrete range slider with left thumb at 20 and right thumb at 70."](assets/slider/slider_disc_range.png) diff --git a/docs/components/Snackbar.md b/docs/components/Snackbar.md index 6d5593434c8..757e307b7a3 100644 --- a/docs/components/Snackbar.md +++ b/docs/components/Snackbar.md @@ -18,10 +18,16 @@ button.](assets/snackbar/snackbar_hero.png) **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using snackbars](#using-snackbars) * [Snackbar](#snackbar) * [Theming snackbars](#theming-snackbars) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/snackbar/overview) +* [API Reference](https://developer.android.com/reference/com/google/android/material/snackbar/package-summary) + ## Using snackbars Before you can use Material snackbars, you need to add a dependency to the diff --git a/docs/components/Switch.md b/docs/components/Switch.md index 9700bdb97e9..d9995fe89f0 100644 --- a/docs/components/Switch.md +++ b/docs/components/Switch.md @@ -21,10 +21,16 @@ as "Wi-fi" and "Bluetooth"](assets/switch/switch_hero.png) **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using switches](#using-switches) * [Switch](#switch) * [Theming switches](#theming-switches) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/switch/overview) +* [API Reference](https://developer.android.com/reference/com/google/android/material/switchmaterial/package-summary) + ## Using switches Before you can use Material switches, you need to add a dependency on the @@ -57,6 +63,12 @@ often used on mobile devices to enable and disable options in an options menu. A switch consists of a track and thumb; the thumb moves along the track to indicate its current state. +API and source code: + +* `MaterialSwitch` + * [Class definition](https://developer.android.com/reference/com/google/android/material/materialswitch/MaterialSwitch) + * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/materialswitch/MaterialSwitch.java) + **Note:** Since version 1.7.0, the new `MaterialSwitch` class will replace the obsolete `SwitchMaterial` class. In most cases you should be able to just replace all `SwitchMaterial` class reference with `MaterialSwitch` to achieve @@ -69,12 +81,6 @@ customize the new styles. ### Switches example -API and source code: - -* `MaterialSwitch` - * [Class definition](https://developer.android.com/reference/com/google/android/material/materialswitch/MaterialSwitch) - * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/materialswitch/MaterialSwitch.java) - The following example shows a list of five switches. ![Example of 5 switches, the first one is toggled and the last one is disabled.](assets/switch/switch_example.png) diff --git a/docs/components/Tabs.md b/docs/components/Tabs.md index 9d7ac4487bf..4da4c02c1b5 100644 --- a/docs/components/Tabs.md +++ b/docs/components/Tabs.md @@ -16,11 +16,17 @@ screens, data sets, and other interactions. **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using tabs](#using-tabs) * [Fixed tabs](#fixed-tabs) * [Scrollable tabs](#scrollable-tabs) * [Theming tabs](#theming-tabs) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/tabs/overview) +* [API Reference](https://developer.android.com/reference/com/google/android/material/tabs/package-summary) + ## Using tabs Before you can use Material tabs, you need to add a dependency to the Material @@ -89,6 +95,15 @@ tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener { }) ``` +API and source code: + +* `TabLayout` + * [Class definition](https://developer.android.com/reference/com/google/android/material/tabs/TabLayout) + * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/tabs/TabLayout.java) +* `TabItem` + * [Class definition](https://developer.android.com/reference/com/google/android/material/tabs/TabItem) + * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/tabs/TabItem.java) + ### Making tabs accessible The Android tab components support screen reader descriptions for tabs and @@ -225,15 +240,6 @@ only tabs available. ### Fixed tabs example -API and source code: - -* `TabLayout` - * [Class definition](https://developer.android.com/reference/com/google/android/material/tabs/TabLayout) - * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/tabs/TabLayout.java) -* `TabItem` - * [Class definition](https://developer.android.com/reference/com/google/android/material/tabs/TabItem) - * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/tabs/TabItem.java) - The following example shows a row of fixed tabs. ![Example of 3 fixed tabs.](assets/tabs/tabs_fixed.png) @@ -277,15 +283,6 @@ that some tabs will remain off-screen until scrolled. ### Scrollable tabs example -API and source code: - -* `TabLayout` - * [Class definition](https://developer.android.com/reference/com/google/android/material/tabs/TabLayout) - * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/tabs/TabLayout.java) -* `TabItem` - * [Class definition](https://developer.android.com/reference/com/google/android/material/tabs/TabItem) - * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/tabs/TabItem.java) - The following example shows a row of scrollable tabs. ![Example of 6 scrollable tabs, with the 6th partially cut off by screensize.](assets/tabs/tabs_scrollable.png) diff --git a/docs/components/TextField.md b/docs/components/TextField.md index 2ccc36c88ea..5d1211d15f1 100644 --- a/docs/components/TextField.md +++ b/docs/components/TextField.md @@ -16,11 +16,17 @@ edit text. **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using text fields](#using-text-fields) * [Filled text field](#filled-text-field) * [Outlined text field](#outlined-text-field) * [Theming](#theming-text-fields) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/text-fields/overview) +* [API Reference](https://developer.android.com/reference/com/google/android/material/textfield/package-summary) + ## Using text fields Before you can use Material text fields, you need to add a dependency to the @@ -43,6 +49,15 @@ page. ``` +API and source code: + +* `TextInputLayout` + * [Class definition](https://developer.android.com/reference/com/google/android/material/textfield/TextInputLayout) + * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/TextInputLayout.java) +* `TextInputEditText` + * [Class definition](https://developer.android.com/reference/com/google/android/material/textfield/TextInputEditText) + * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/TextInputEditText.java) + **Note:** A text field is composed of a `TextInputLayout` and a `TextInputEditText` as a direct child. Using an `EditText` as the child might work, but `TextInputEditText` provides accessibility support for the text field @@ -392,15 +407,6 @@ surrounded by other content and components. ### Filled text field examples -API and source code: - -* `TextInputLayout` - * [Class definition](https://developer.android.com/reference/com/google/android/material/textfield/TextInputLayout) - * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/TextInputLayout.java) -* `TextInputEditText` - * [Class definition](https://developer.android.com/reference/com/google/android/material/textfield/TextInputEditText) - * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/TextInputEditText.java) - The following example shows a filled text field with a label. ![Filled text field](assets/textfields/textfields_filled.png) @@ -580,15 +586,6 @@ helps simplify the layout. ### Outlined text field examples -API and source code: - -* `TextInputLayout` - * [Class definition](https://developer.android.com/reference/com/google/android/material/textfield/TextInputLayout) - * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/TextInputLayout.java) -* `TextInputEditText` - * [Class definition](https://developer.android.com/reference/com/google/android/material/textfield/TextInputEditText) - * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/textfield/TextInputEditText.java) - The following example shows an outlined text field. ![Outlined text field](assets/textfields/textfields_outlined.png) diff --git a/docs/components/TimePicker.md b/docs/components/TimePicker.md index a09ef1a62b5..7fbecfa5620 100644 --- a/docs/components/TimePicker.md +++ b/docs/components/TimePicker.md @@ -15,10 +15,16 @@ path: /catalog/time-pickers/ **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using time pickers](#using-time-pickers) * [Time pickers](#time-pickers) * [Theming time pickers](#theming-time-pickers) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/time-pickers/overview) +* [API Reference](https://developer.android.com/reference/com/google/android/material/timepicker/package-summary) + ## Using time pickers Before you can use Material time pickers, you need to add a dependency to the diff --git a/docs/components/TopAppBar.md b/docs/components/TopAppBar.md index 52d3dcd00df..546de411d77 100644 --- a/docs/components/TopAppBar.md +++ b/docs/components/TopAppBar.md @@ -16,12 +16,18 @@ information and actions related to the current screen. **Contents** +* [Design & API Documentation](#design-api-documentation) * [Using top app bars](#using-top-app-bars) * [Regular top app bars](#regular-top-app-bars) * [Collapsing top app bar](#collapsing-top-app-bars) * [Contextual action bar](#contextual-action-bar) * [Theming](#theming-the-top-app-bar) +## Design & API Documentation + +* [Google Material3 Spec](https://material.io/components/top-app-bar/overview) +* [API Reference](https://developer.android.com/reference/com/google/android/material/appbar/package-summary) + ## Using top app bars Before you can use Material top app bars, you need to add a dependency to the @@ -78,7 +84,7 @@ types can be grouped into [Collapsing top app bars](#collapsing-top-app-bars). ![Types of top app bars](assets/topappbar/topappbar_types.png) -Top app bars use the following APIs and source code: +API and source code: * `CoordinatorLayout` * [Class definition](https://developer.android.com/reference/androidx/coordinatorlayout/widget/CoordinatorLayout)