[Documentation] Composite revamp.

PiperOrigin-RevId: 353052233

Author: nickrout

docs/components/Button.md

@@ -45,7 +45,7 @@ unnecessary.
 For more information on content labels, go to the
 [Android accessibility help guide](https://support.google.com/accessibility/android/answer/7158690).
 
-## Types
+### Types
 
 There are four types of buttons: 1\. [Text button](#text-button), 2\.
 [Outlined button](#outlined-button), 3\. [Contained button](#contained-button),

docs/components/Chip.md

@@ -213,7 +213,7 @@ val text = editText.text!!
 text.setSpan(span, 0, text.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
 ```
 
-## Types
+### Types
 
 There are four types of chips: 1\. [input (entry)](#input-chip), 2\.
 [choice](#choice-chip), 3\. [filter](#filter-chip), 4\. [action](#action-chip)
@@ -232,14 +232,14 @@ API and source code:
     *   [Class definition](https://developer.android.com/reference/com/google/android/material/chip/ChipDrawable)
     *   [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/chip/ChipDrawable.java)
 
-### Input chip
+## Input chip
 
 Input chips (refered to as **entry** chips in Android) represent a complex piece
 of information in compact form, such as an entity (person, place, or thing) or
 text. They enable user input and verify that input by converting text into
 chips.
 
-#### Input chip example
+### Input chip example
 
 The following example shows three input chips.
 
@@ -270,14 +270,14 @@ In the layout:
 </com.google.android.material.chip.ChipGroup>
 ```
 
-### Choice chip
+## Choice chip
 
 Choice chips allow selection of a single chip from a set of options.
 
 Choice chips clearly delineate and display options in a compact area. They are a
 good alternative to toggle buttons, radio buttons, and single select menus.
 
-#### Caveats
+### Caveats
 
 If you add choice chips to a dialog (which has 24dp elevation), disable the
 chips' elevation overlays to ensure that there is sufficient color contrast when
@@ -298,7 +298,7 @@ the chips are checked.
 </style>
 ```
 
-#### Choice chip example
+### Choice chip example
 
 The following example shows four choice chips.
 
@@ -335,14 +335,14 @@ In the layout:
 </com.google.android.material.chip.ChipGroup>
 ```
 
-### Filter chip
+## Filter chip
 
 Filter chips use tags or descriptive words to filter content.
 
 Filter chips clearly delineate and display options in a compact area. They are a
 good alternative to toggle buttons or checkboxes.
 
-#### Filter chip example
+### Filter chip example
 
 The following example shows six filter chips.
 
@@ -390,15 +390,15 @@ In the layout:
 </com.google.android.material.chip.ChipGroup>
 ```
 
-### Action chip
+## Action chip
 
 Action chips offer actions related to primary content. They should appear
 dynamically and contextually in a UI.
 
 An alternative to action chips are buttons, which should appear persistently and
 consistently.
 
-#### Action chip example
+### Action chip example
 
 The following example shows four action chips.
 

docs/components/Dialog.md

@@ -43,7 +43,7 @@ such as an icon on a title having a content description via the
 `android:contentDescription` attribute set in the
 `MaterialAlertDialog.MaterialComponents.Title.Icon` style or descendant.
 
-## Types
+### Types
 
 There are four types of dialogs: 1\. [Alert dialog](#alert-dialog), 2\.
 [Simple dialog](#simple-dialog), 3\.
@@ -69,7 +69,7 @@ API and source code:
     *   [Class description](https://developer.android.com/reference/com/google/android/material/dialog/MaterialAlertDialogBuilder)
     *   [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/dialog/MaterialAlertDialogBuilder.java)
 
-#### Alert dialog
+## Alert dialog
 
 Alert dialogs interrupt users with urgent information, details, or actions.
 
@@ -95,7 +95,7 @@ MaterialAlertDialogBuilder(context)
         .show()
 ```
 
-#### Simple dialog
+## Simple dialog
 
 Simple dialogs can display items that are immediately actionable when selected.
 They don’t have text buttons.
@@ -121,7 +121,7 @@ MaterialAlertDialogBuilder(context)
         .show()
 ```
 
-#### Confirmation dialog
+## Confirmation dialog
 
 Confirmation dialogs give users the ability to provide final confirmation of a
 choice before committing to it, so they have a chance to change their minds if
@@ -170,7 +170,7 @@ MaterialAlertDialogBuilder(context)
         .show()
 ```
 
-#### Full-screen dialog
+## Full-screen dialog
 
 Full-screen dialogs group a series of tasks, such as creating a calendar entry
 with the event title, date, location, and time. Because they take up the entire

docs/components/FloatingActionButton.md

@@ -93,28 +93,24 @@ Or, you can set a custom size via the `app:fabCustomSize` attribute. If set,
 `app:fabSize` will be ignored, unless the custom size is cleared via the
 `clearCustomSize` method.
 
-## Types
+### Types
 
 There are three types of FABS: 1\. [Regular FABs](#regular-fabs), 2\.
 [Mini FABs](#mini-fabs), 3\. [Extended FABs](#extended-fabs)
 
 ![FAB types](assets/fabs/FAB_types.png)
 
-## FABs
+## Regular FABs
 
-Floating action buttons come in a default and mini size.
+Regular FABs are FABs that are not expanded and are a regular size.
 
 API and source code:
 
 *   `FloatingActionButton`
     *   [Class description](https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton)
     *   [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/floatingactionbutton/FloatingActionButton.java)
 
-### Regular FABs
-
-Regular FABs are FABs that are not expanded and are a regular size.
-
-#### Regular FAB example
+### Regular FAB example
 
 The following example shows a regular FAB with a plus icon.
 
@@ -159,13 +155,19 @@ A regular FAB has a container and an icon.
 1.  Container
 1.  Icon
 
-### Mini FABs
+## Mini FABs
 
 A mini FAB should be used on smaller screens.
 
 Mini FABs can also be used to create visual continuity with other screen
 elements.
 
+API and source code:
+
+*   `FloatingActionButton`
+    *   [Class description](https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton)
+    *   [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/floatingactionbutton/FloatingActionButton.java)
+
 ### Mini FAB example
 
 The following example shows a mini FAB with a plus icon.

docs/components/Menu.md

@@ -80,7 +80,7 @@ menu. While optional, their use is strongly encouraged. For more information
 about this component's accessibility, check out
 [the text field's a11y section](TextField.md#making-text-fields-accessible).
 
-## Types
+### Types
 
 Menus allow users to make a selection from multiple options. They are less
 prominent and take up less space than selection controls, such as a set of radio
@@ -452,7 +452,7 @@ _**Note:** The exposed dropdown menu is implemented through the
 [Material text fields](https://material.io/design/components/text-fields.html)
 and their usage, see the [TextInputLayout documentation](TextField.md)._
 
-#### Exposed dropdown menu example
+### Exposed dropdown menu example
 
 API and source code:
 
@@ -522,13 +522,13 @@ To have an outlined variation of the exposed dropdown menu, set the `style` to
 
 ![Menu with purple outlined text field element and 4 options. Option 1 selected.](assets/menu/menus_exposed_dropdown_outlined.png)
 
-##### Non editable variation
+#### Non editable variation
 
 Disable the user input in the `AutoCompleteTextView` to have a non editable
 variation of the menu by setting `android:inputType="none"` on the
 `AutoCompleteTextView`.
 
-##### Setting a default value
+#### Setting a default value
 
 In order to have a pre-selected value displayed, you can call
 `setText(CharSequence text, boolean filter)` on the `AutoCompleteTextView` with
@@ -582,6 +582,10 @@ and
 
 ## Theming menus
 
+Menus drawers support
+[Material Theming](https://material.io/components/text-fields/#theming) and can
+be customized in terms of color, typography and shape.
+
 ### Menu theming examples
 
 Popup, overflow, and list popup window menus support
@@ -605,7 +609,7 @@ The following example shows a menu with Material Theming.
 
 ![White menu container with brown text showing 3 options](assets/menu/menus_theming.png)
 
-#### Implementing menu theming
+### Implementing menu theming
 
 Using default style theme attributes (affects all menus but does not affect
 other components):
@@ -682,7 +686,7 @@ Material Theming.
 button 1 is grey,, button 2 has a pink
 outline](assets/menu/menus_exposed_dropdown_theming.png)
 
-#### Implementing exposed dropdown menu theming
+### Implementing exposed dropdown menu theming
 
 Using default style theme attributes, styles and theme overlays (themes all
 menus but does not affect other components):

docs/components/NavigationDrawer.md

@@ -300,7 +300,7 @@ Default style theme attribute: `?attr/navigationViewStyle`
 
 Default style theme attribute: `?attr/drawerLayoutStyle`
 
-## Types
+### Types
 
 There are three types of navigation drawers: 1\.
 [Standard navigation drawer](#standard-navigation-drawer), 2\.

docs/components/ProgressIndicator.md

@@ -134,20 +134,19 @@ to set the target visibility as `Visibiltiy.INVISIBLE` (default) or
 Progress indicators can have rounded corners via `app:trackCornerRadius` or the
 `setTrackCornerRadius` method.
 
-## Types
+### Types
 
-Material Design offers two visually distinct types of progress indicators:
-
-1.  [linear](#linear-progress-indicators)
-2.  [circular](#circular-progress-indicators)
+Material Design offers two visually distinct types of progress indicators: 1\.
+[linear](#linear-progress-indicators) 2\.
+[circular](#circular-progress-indicators)
 
 Only one type should represent each kind of activity in an app. For example, if
 a refresh action displays a circular indicator on one screen, that same action
 shouldn’t use a linear indicator elsewhere in the app.
 
-![Composite image of progress indicator types](assets/progressindicator/indeterminate_composite.gif)
+![Composite image of progress indicator types](assets/progressindicator/types.gif)
 
-### Linear progress indicators
+## Linear progress indicators
 
 Linear progress indicators display progress by animating an indicator along the
 length of a fixed, visible track. The behavior of the indicator is dependent on
@@ -204,7 +203,7 @@ For linear progress indicator, there are two indeterminate animation types:
 *   `contiguous` - animates as repeated cycles with three adjacent segments in
     iterative different colors.
 
-### Circular progress indicators
+## Circular progress indicators
 
 Circular progress indicators display progress by animating an indicator along an
 invisible circular track in a clockwise direction. They can be applied directly
@@ -264,33 +263,33 @@ indicators:
 
                          | Attribute                   | Related method(s)                                         | Default value
 ----------------------------- | --------------------------- | --------------------------------------------------------- | -------------
-**track thickness**           | `app:trackThickness`        | `setTrackThickness`</br>`getTrackThickness`               | `4dp`
-**indicator color**           | `app:indicatorColor`        | `setIndicatorColor`</br>`getIndicatorColor`               | `colorPrimary`
-**track color**               | `app:trackColor`            | `setTrackColor`</br>`getTrackColor`                       | `indicatorColor` at `disabledAlpha`
-**track corner radius**       | `app:trackCornerRadius`     | `setTrackCornerRadius`</br>`getTrackCornerRadius`         | `0dp`
-**show animation behavior**   | `app:showAnimationBehavior` | `setShowAnimationBehavior`</br>`getShowAnimationBehavior` | `none`
-**hide animation behavior**   | `app:hideAnimationBehavior` | `setHideAnimationBehavior`</br>`getHideAnimationBehavior` | `none`
-**delay (in ms) to show**     | `app:showDelay`             | N/A                                                       | 0
-**min delay (in ms) to hide** | `app:minHideDelay`          | N/A                                                       | 0
+**Track thickness**           | `app:trackThickness`        | `setTrackThickness`</br>`getTrackThickness`               | `4dp`
+**Indicator color**           | `app:indicatorColor`        | `setIndicatorColor`</br>`getIndicatorColor`               | `colorPrimary`
+**Track color**               | `app:trackColor`            | `setTrackColor`</br>`getTrackColor`                       | `indicatorColor` at `disabledAlpha`
+**Track corner radius**       | `app:trackCornerRadius`     | `setTrackCornerRadius`</br>`getTrackCornerRadius`         | `0dp`
+**Show animation behavior**   | `app:showAnimationBehavior` | `setShowAnimationBehavior`</br>`getShowAnimationBehavior` | `none`
+**Hide animation behavior**   | `app:hideAnimationBehavior` | `setHideAnimationBehavior`</br>`getHideAnimationBehavior` | `none`
+**Delay (in ms) to show**     | `app:showDelay`             | N/A                                                       | 0
+**Min delay (in ms) to hide** | `app:minHideDelay`          | N/A                                                       | 0
 
 #### Linear type specific attributes
 
 Linear type progress indicators also have the following attributes:
 
 &nbsp;                           | Attribute                        | Related method(s)                                                   | Default value
 -------------------------------- | -------------------------------- | ------------------------------------------------------------------- | -------------
-**indeterminate animation type** | `app:indeterminateAnimationType` | `setIndeterminateAnimationType`</br>`getIndeterminateAnimationType` | `disjoint`
-**indicator direction**          | `app:indicatorDirectionLinear`   | `setIndicatorDirection`</br>`getIndicatorDirection`                 | `leftToRight`
+**Indeterminate animation type** | `app:indeterminateAnimationType` | `setIndeterminateAnimationType`</br>`getIndeterminateAnimationType` | `disjoint`
+**Indicator direction**          | `app:indicatorDirectionLinear`   | `setIndicatorDirection`</br>`getIndicatorDirection`                 | `leftToRight`
 
 #### Circular type specific attributes
 
 Circular type progress indicators also have the following attributes:
 
 &nbsp;                            | Attribute                        | Related method(s)                                   | Default value
 --------------------------------- | -------------------------------- | --------------------------------------------------- | -------------
-**spinner size (outer diameter)** | `app:indicatorSize`              | `setIndicatorSize`</br>`getIndicatorSize`           | `40dp`
-**inset**                         | `app:indicatorInset`             | `setIndicatorInset`</br>`getIndicatorInset`         | `4dp`
-**indicator direction**           | `app:indicatorDirectionCircular` | `setIndicatorDirection`</br>`getIndicatorDirection` | `clockwise`
+**Spinner size (outer diameter)** | `app:indicatorSize`              | `setIndicatorSize`</br>`getIndicatorSize`           | `40dp`
+**Inset**                         | `app:indicatorInset`             | `setIndicatorInset`</br>`getIndicatorInset`         | `4dp`
+**Indicator direction**           | `app:indicatorDirectionCircular` | `setIndicatorDirection`</br>`getIndicatorDirection` | `clockwise`
 
 #### Styles
 

docs/components/Slider.md

@@ -168,7 +168,7 @@ rangeSlider.setLabelFormatter { value: Float ->
 }
 ```
 
-## Types
+### Types
 
 There are two types of sliders: 1\. [Continuous slider](#continuous-slider), 2\.
 [Discrete slider](#discrete-slider)
@@ -177,7 +177,7 @@ There are two types of sliders: 1\. [Continuous slider](#continuous-slider), 2\.
 
 A slider with two thumbs is called a range slider.
 
-### Continuous slider
+## Continuous slider
 
 Continuous sliders allow users to make meaningful selections that don’t require
 a specific value.
@@ -205,7 +205,7 @@ In the layout:
     android:valueTo="100.0" />
 ```
 
-#### Continuous range slider
+### Continuous range slider
 
 API and source code:
 
@@ -230,7 +230,7 @@ In the layout:
   android:valueTo="100.0" />
 ```
 
-### Discrete slider
+## Discrete slider
 
 Discrete sliders display a numeric value label upon pressing the thumb, which
 allows a user to input an exact value.
@@ -253,7 +253,7 @@ In the layout:
     android:stepSize="5.0" />
 ```
 
-#### Discrete range slider
+### Discrete range slider
 
 API and source code: