[NTC][ProgressIndicator] Update documentation

PiperOrigin-RevId: 597032677

Author: paulfthomas

docs/components/ProgressIndicator.md

@@ -12,7 +12,7 @@ path: /catalog/progress-indicators/
 [Progress indicators](https://material.io/components/progress-indicators)
 express an unspecified wait time or display the length of a process.
 
-![Animation of purple linear progress indicator beneath "My Recipes" top app bar](assets/progressindicator/indeterminate_hero.gif)
+![Animation of linear progress indicator beneath "Episodes" top app bar](assets/progressindicator/determinate_hero.gif)
 
 **Contents**
 
@@ -45,10 +45,6 @@ progress rather than the progress of each activity.
 
 ### Usage
 
-![Animation of determinate linear and circular progress indicators: purple
-indicators fill up grey
-tracks](assets/progressindicator/determinate_composite.gif)
-
 A determinate progress indicator can be added to a layout:
 
 ```xml
@@ -62,10 +58,6 @@ A determinate progress indicator can be added to a layout:
     android:layout_height="wrap_content" />
 ```
 
-![Animation of indeterminate linear and circular progress indicators: purple
-indicators travel along grey
-tracks](assets/progressindicator/indeterminate_composite.gif)
-
 An indeterminate progress indicator can be added:
 
 ```xml
@@ -81,11 +73,13 @@ An indeterminate progress indicator can be added:
     android:indeterminate="true" />
 ```
 
-### Switching from indeterminate to determinate
+![Animation of determinate and indeterminate linear and circular progress indicators: red
+indicators travel along pink tracks](assets/progressindicator/linear_circular_composite.gif)
 
-![Animation of linear and circular progress indicators: purple indicators travel
-along gray tracks then fill up
-tracks.](assets/progressindicator/switch_composite.gif)
+1. Determinate
+2. Indeterminate
+
+### Switching from indeterminate to determinate
 
 Indeterminate progress indicators can smoothly transit to determinate progress
 indicators by setting the `progress` programmatically:
@@ -131,6 +125,8 @@ The modes of behaviors are:
     edge and hides the view by collapsing to the baseline (bottom edge); for the
     circular type, shows the view by expanding from the outer edge and hides the
     view by collapsing to the inner edge.
+*   `escape` - for the linear type, escapes in the progression direction; for the
+    circular type, no effect.
 
 When the hide animation behavior is not none, the visibility of the view will be
 changed after the animation finishes. Please use `setVisibilityAfterHide` method
@@ -139,9 +135,6 @@ to set the target visibility as `Visibility.INVISIBLE` (default) or
 
 ### Rounded corners
 
-![Linear and circular progress indicators: tracks and indicators have rounded
-corners](assets/progressindicator/rounded_corner_composite.png)
-
 Progress indicators can have rounded corners via `app:trackCornerRadius` or the
 `setTrackCornerRadius` method.
 
@@ -155,7 +148,7 @@ 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 linear and circular progress indicator types](assets/progressindicator/types.gif)
+![Composite image of linear and circular progress indicator types](assets/progressindicator/types.png)
 
 ## Linear progress indicators
 
@@ -181,7 +174,7 @@ The following example shows a determinate linear progress indicator.
 
 ![Determinate linear progress indicator animation: purple indicator fills up
 grey
-track](assets/progressindicator/linear_determinate_compact.gif){width="600"}
+track](assets/progressindicator/linear_determinate.gif){width="600"}
 
 In the layout:
 
@@ -195,7 +188,7 @@ The following example shows an indeterminate linear progress indicator.
 
 ![Indeterminate linear progress indicator animation: purple indicator travels
 along grey
-track](assets/progressindicator/linear_indeterminate_compact.gif){width="600"}
+track](assets/progressindicator/linear_indeterminate.gif){width="600"}
 
 In the layout:
 
@@ -211,17 +204,14 @@ In the layout:
 For linear progress indicator, there are two indeterminate animation types:
 
 *   `disjoint` - animates as repeated cycles with two disjoint segments in the
-    same color at a time.
-
-![Disjointed indeterminate linear progress indicator animation: red indicator
+    same color at a time. ![Disjointed indeterminate linear progress indicator animation: red indicator
 travels along track 2x then switches to
 yellow](assets/progressindicator/linear_multicolor_disjoint.gif){width="600"}
 
 *   `contiguous` - animates as repeated cycles with three adjacent segments in
     different colors. ![Contiguous indeterminate linear progress indicator
     animation: red, yellow, blue indicators move sequentially and cover
-    track](assets/progressindicator/linear_multicolor_contiguous.gif)
-    {width="600"}
+    track](assets/progressindicator/linear_multicolor_contiguous.gif){width="600"}
 
 **Note:** There is a minimum requirement of 3 indicator colors to use the
 **contiguous** animation. Otherwise, an IllegalArgumentException will be thrown.
@@ -250,7 +240,7 @@ The following example shows a determinate circular progress indicator.
 
 ![Determinate circular progress indicator animation: purple indicator draws a
 circle clockwise from the
-top](assets/progressindicator/circular_determinate_compact.gif){width="600"}
+top](assets/progressindicator/circular_determinate.gif){width="600"}
 
 In the layout:
 
@@ -264,7 +254,7 @@ The following example shows an indeterminate circular progress indicator.
 
 ![Indeterminate circular progress indicator animation: purple indicator follows
 a circle clockwise from the
-top](assets/progressindicator/circular_indeterminate_compact.gif){width="600"}
+top](assets/progressindicator/circular_indeterminate.gif){width="600"}
 
 In the layout:
 
@@ -279,27 +269,28 @@ In the layout:
 
 A progress indicator consists of a track and an indicator.
 
-![Progress indicator anatomy composte](assets/progressindicator/anatomy.png)
+![Progress indicator anatomy composite](assets/progressindicator/anatomy.png)
 
-1.  Track
-2.  Indicator
+1. Active indicator
+2. Track
+3. Stop indicator
 
 #### Common attributes
 
 The following attributes are shared between linear and circular progress
 indicators:
 
-| Element                       | 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`                       | `colorSurfaceContainerHighest` (linear)</br>`@android:color/transparent` (circular) |
-| **Track corner radius**       | `app:trackCornerRadius`     | `setTrackCornerRadius`</br>`getTrackCornerRadius`         | `0dp`                                                                               |
-| **Indicator track gap size**  | `app:indicatorTrackGapSize` | `setIndicatorTrackGapSize`</br>`getIndicatorTrackGapSize` | `4dp`                                                                               |
-| **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                                                                                   |
+| Element                       | 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`                       | `colorPrimaryContainer` (linear)</br>`@android:color/transparent` (circular) |
+| **Track corner radius**       | `app:trackCornerRadius`     | `setTrackCornerRadius`</br>`getTrackCornerRadius`         | `2dp`                                                                        |
+| **Indicator track gap size**  | `app:indicatorTrackGapSize` | `setIndicatorTrackGapSize`</br>`getIndicatorTrackGapSize` | `4dp`                                                                        |
+| **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
 
@@ -340,6 +331,23 @@ See the full list of
 and
 [attributes](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/progressindicator/res/values/attrs.xml).
 
+#### Non-Text Contrast update
+
+In order to comply with the latest accessibility requirements, the
+`LinearProgressIndicator` and `CircularProgressIndicator` have been updated with
+additional attributes:
+
+- `app:indicatorTrackGapSize`: size of the gap between the indicator and the
+  track, 4dp by default.
+- `app:trackStopIndicatorSize`: size of the stop at the end of the track, 4dp by
+  default. Only applies to the linear determinate configuration.
+
+`*.Legacy` styles have been added to revert to the previous behavior (**not
+recommended**):
+
+- `Widget.Material3.LinearProgressIndicator.Legacy`
+- `Widget.Material3.CircularProgressIndicator.Legacy`
+
 ## Theming
 
 Progress indicators support Material theming which can customize color and size.
@@ -382,7 +390,7 @@ all circular progress indicators but does not affect other components:
     <item name="circularProgressIndicatorStyle">@style/Widget.App.CircularProgressIndicator</item>
 </style>
 
-<style name="Widget.App.CircularProgressIndicator" parent="Widget.Material3.CircularProgressIndicator">
+<style name="Widget.App.CircularProgressIndicator" parent="Widget.Material3.CircularProgressIndicator.Legacy">
     <item name="materialThemeOverlay">@style/ThemeOverlay.App.CircularProgressIndicator</item>
     <item name="trackThickness">20dp</item>
 </style>