[ProgressIndicator] Added demos for wave effects with new indetermina…

…te motion. PiperOrigin-RevId: 629767094
material-components · May 2, 2024 · c4cf6b2 · c4cf6b2
1 parent 5b6cf55
commit c4cf6b2
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 10 deletions.
diff --git a/catalog/java/io/material/catalog/progressindicator/ProgressIndicatorWaveDemoFragment.java b/catalog/java/io/material/catalog/progressindicator/ProgressIndicatorWaveDemoFragment.java
@@ -17,9 +17,13 @@
 
 import io.material.catalog.R;
 
+import static com.google.android.material.progressindicator.CircularProgressIndicator.INDETERMINATE_ANIMATION_TYPE_ADVANCE;
+import static com.google.android.material.progressindicator.CircularProgressIndicator.INDETERMINATE_ANIMATION_TYPE_RETREAT;
+
 import android.view.View;
 import androidx.annotation.LayoutRes;
 import androidx.annotation.NonNull;
+import com.google.android.material.button.MaterialButtonToggleGroup;
 import com.google.android.material.materialswitch.MaterialSwitch;
 import com.google.android.material.progressindicator.CircularProgressIndicator;
 import com.google.android.material.progressindicator.LinearProgressIndicator;
@@ -44,6 +48,8 @@ public void initDemoContents(@NonNull View view) {
  public void initDemoControls(@NonNull View view) {
  Slider progressSlider = view.findViewById(R.id.progress_slider);
  MaterialSwitch determinateSwitch = view.findViewById(R.id.determinate_mode_switch);
+ MaterialButtonToggleGroup circularAnimationMode =
+ view.findViewById(R.id.circular_animation_mode);
 
  progressSlider.addOnChangeListener(
  (slider, value, fromUser) -> {
@@ -66,6 +72,7 @@ public void initDemoControls(@NonNull View view) {
  linearIndicator.setIndeterminate(true);
  circularIndicator.setIndeterminate(true);
  }
+ circularAnimationMode.setEnabled(isChecked);
  });
 
  float pixelsInDp = view.getResources().getDisplayMetrics().density;
@@ -104,14 +111,26 @@ public void initDemoControls(@NonNull View view) {
  }
  });
 
- Slider circularSizeSlider = view.findViewById(R.id.circularSizeSlider);
+ Slider circularSizeSlider = view.findViewById(R.id.circular_size_slider);
  circularSizeSlider.addOnChangeListener(
  (slider, value, fromUser) -> {
  int newCornerRadius = (int) (value * pixelsInDp);
  if (circularIndicator.getIndicatorSize() != newCornerRadius) {
  circularIndicator.setIndicatorSize(newCornerRadius);
  }
  });
+
+ circularAnimationMode.addOnButtonCheckedListener(
+ (group, checkedId, isChecked) -> {
+ if (!isChecked) {
+ return;
+ }
+ if (checkedId == R.id.circular_advance_animation) {
+ circularIndicator.setIndeterminateAnimationType(INDETERMINATE_ANIMATION_TYPE_ADVANCE);
+ } else {
+ circularIndicator.setIndeterminateAnimationType(INDETERMINATE_ANIMATION_TYPE_RETREAT);
+ }
+ });
  }
 
  @Override

diff --git a/...io/material/catalog/progressindicator/res/layout/cat_progress_indicator_wave_controls.xml b/...io/material/catalog/progressindicator/res/layout/cat_progress_indicator_wave_controls.xml
@@ -15,14 +15,15 @@
  ~ limitations under the License.
  -->
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:clipChildren="false"
- android:clipToPadding="false"
- android:orientation="vertical"
- android:padding="16dp"
- android:showDividers="middle"
- android:divider="@drawable/layout_divider">
+ xmlns:app="http://schemas.android.com/apk/res-auto"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:clipChildren="false"
+ android:clipToPadding="false"
+ android:orientation="vertical"
+ android:padding="16dp"
+ android:showDividers="middle"
+ android:divider="@drawable/layout_divider">
 
  <com.google.android.material.materialswitch.MaterialSwitch
  android:id="@+id/determinate_mode_switch"
@@ -85,11 +86,36 @@
  android:layout_height="wrap_content"
  android:text="@string/cat_progress_indicator_circular_indicator_size"/>
  <com.google.android.material.slider.Slider
- android:id="@+id/circularSizeSlider"
+ android:id="@+id/circular_size_slider"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:value="40"
  android:valueFrom="20"
  android:valueTo="200"
  android:stepSize="5"/>
+
+ <TextView
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:text="@string/cat_progress_indicator_circular_animation_mode"/>
+ <com.google.android.material.button.MaterialButtonToggleGroup
+ android:id="@+id/circular_animation_mode"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ app:singleSelection="true"
+ app:selectionRequired="true"
+ app:checkedButton="@id/circular_advance_animation">
+ <Button
+ android:id="@+id/circular_advance_animation"
+ style="?attr/materialButtonOutlinedStyle"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:text="@string/cat_progress_indicator_circular_advance_animation_label"/>
+ <Button
+ android:id="@+id/circular_retreat_animation"
+ style="?attr/materialButtonOutlinedStyle"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:text="@string/cat_progress_indicator_circular_retreat_animation_label"/>
+ </com.google.android.material.button.MaterialButtonToggleGroup>
 </LinearLayout>
diff --git a/catalog/java/io/material/catalog/progressindicator/res/values/strings.xml b/catalog/java/io/material/catalog/progressindicator/res/values/strings.xml
@@ -107,6 +107,18 @@
  description="Text label above a slider for changing indicators' speed [CHAR LIMIT=NONE]">
  Wave speed (-50 - 50) dp/s
  </string>
+ <string name="cat_progress_indicator_circular_animation_mode"
+ description="The label to the button group on right for selecting circular indeterminate animation mode [CHAR LIMIT=NONE]">
+ Circular Indeterminate Animation
+ </string>
+ <string name="cat_progress_indicator_circular_advance_animation_label"
+ description="Select the Advance indeterminate motion for circular progress indicator [CHAR LIMIT=NONE]">
+ Advance
+ </string>
+ <string name="cat_progress_indicator_circular_retreat_animation_label"
+ description="Select the Retreat indeterminate motion for circular progress indicator [CHAR LIMIT=NONE]">
+ Retreat
+ </string>
 
  <!-- Descriptions of various examples of progress indicators -->