Skip to content

Commit

Permalink
[ProgressIndicator] Added demos for wave effects.
Browse files Browse the repository at this point in the history
PiperOrigin-RevId: 620297129
  • Loading branch information
pekingme authored and paulfthomas committed Apr 2, 2024
1 parent b61ab85 commit b32512a
Show file tree
Hide file tree
Showing 4 changed files with 226 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,20 @@ public Fragment createFragment() {
});
additionalDemos.add(
new Demo(R.string.cat_progress_indicator_demo_standalone_title) {
@Nullable
@Override
public Fragment createFragment() {
return new ProgressIndicatorStandaloneDemoFragment();
}
});
additionalDemos.add(
new Demo(R.string.cat_progress_indicator_wave_demo_title) {
@Nullable
@Override
public Fragment createFragment() {
return new ProgressIndicatorWaveDemoFragment();
}
});
return additionalDemos;
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
/*
* Copyright 2024 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package io.material.catalog.progressindicator;

import io.material.catalog.R;

import android.view.View;
import androidx.annotation.LayoutRes;
import androidx.annotation.NonNull;
import com.google.android.material.materialswitch.MaterialSwitch;
import com.google.android.material.progressindicator.CircularProgressIndicator;
import com.google.android.material.progressindicator.LinearProgressIndicator;
import com.google.android.material.slider.Slider;

/**
* This is the fragment to demo wave effects in {@link LinearProgressIndicator} and {@link
* CircularProgressIndicator}.
*/
public class ProgressIndicatorWaveDemoFragment extends ProgressIndicatorDemoFragment {

@NonNull private LinearProgressIndicator linearIndicator;
@NonNull private CircularProgressIndicator circularIndicator;

@Override
public void initDemoContents(@NonNull View view) {
linearIndicator = view.findViewById(R.id.linear_indicator);
circularIndicator = view.findViewById(R.id.circular_indicator);
}

@Override
public void initDemoControls(@NonNull View view) {
Slider progressSlider = view.findViewById(R.id.progress_slider);
MaterialSwitch determinateSwitch = view.findViewById(R.id.determinate_mode_switch);

progressSlider.addOnChangeListener(
(slider, value, fromUser) -> {
if (!linearIndicator.isIndeterminate()) {
linearIndicator.setProgressCompat((int) value, true);
}
if (!circularIndicator.isIndeterminate()) {
circularIndicator.setProgressCompat((int) value, true);
}
});
determinateSwitch.setOnCheckedChangeListener(
(v, isChecked) -> {
if (isChecked) {
float progress = progressSlider.getValue();
linearIndicator.setProgressCompat((int) progress, true);
circularIndicator.setProgressCompat((int) progress, true);
} else {
linearIndicator.setProgressCompat(0, false);
circularIndicator.setProgressCompat(0, false);
linearIndicator.setIndeterminate(true);
circularIndicator.setIndeterminate(true);
}
});

float pixelsInDp = view.getResources().getDisplayMetrics().density;

Slider amplitudeSlider = view.findViewById(R.id.amplitude_slider);
amplitudeSlider.addOnChangeListener(
(slider, value, fromUser) -> {
int newAmplitude = (int) (value * pixelsInDp);
if (linearIndicator.getAmplitude() != newAmplitude) {
linearIndicator.setAmplitude(newAmplitude);
}
if (circularIndicator.getAmplitude() != newAmplitude) {
circularIndicator.setAmplitude((int) (value * pixelsInDp));
}
});
Slider waveLengthSlider = view.findViewById(R.id.wavelength_slider);
waveLengthSlider.addOnChangeListener(
(slider, value, fromUser) -> {
int newWaveLength = (int) (value * pixelsInDp);
if (linearIndicator.getWavelength() != newWaveLength) {
linearIndicator.setWavelength(newWaveLength);
}
if (circularIndicator.getWavelength() != newWaveLength) {
circularIndicator.setWavelength(newWaveLength);
}
});

Slider circularSizeSlider = view.findViewById(R.id.circularSizeSlider);
circularSizeSlider.addOnChangeListener(
(slider, value, fromUser) -> {
int newCornerRadius = (int) (value * pixelsInDp);
if (circularIndicator.getIndicatorSize() != newCornerRadius) {
circularIndicator.setIndicatorSize(newCornerRadius);
}
});
}

@Override
@LayoutRes
public int getProgressIndicatorContentLayout() {
return R.layout.cat_progress_indicator_main_content;
}

@Override
@LayoutRes
public int getProgressIndicatorDemoControlLayout() {
return R.layout.cat_progress_indicator_wave_controls;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
~ Copyright (C) 2024 The Android Open Source Project
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ 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">

<com.google.android.material.materialswitch.MaterialSwitch
android:id="@+id/determinate_mode_switch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checked="true"
android:text="@string/cat_progress_indicator_set_to_determinate_mode"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cat_progress_indicator_determinate_progress"/>
<com.google.android.material.slider.Slider
android:id="@+id/progress_slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:value="50"
android:valueFrom="0"
android:valueTo="100"
android:stepSize="1"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cat_progress_indicator_wave_amplitude"/>
<com.google.android.material.slider.Slider
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/amplitude_slider"
android:valueFrom="0"
android:valueTo="30"
android:stepSize="1"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cat_progress_indicator_wave_length"/>
<com.google.android.material.slider.Slider
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/wavelength_slider"
android:valueFrom="0"
android:valueTo="100"
android:stepSize="1"/>

<TextView
android:layout_width="wrap_content"
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:layout_width="match_parent"
android:layout_height="wrap_content"
android:value="40"
android:valueFrom="20"
android:valueTo="200"
android:stepSize="5"/>
</LinearLayout>
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@
description="Title of demo for other components using progress indicator standalone drawables [CHAR LIMIT=NONE]">
Standalone Drawable Progress Indicator Demo
</string>
<string name="cat_progress_indicator_wave_demo_title"
description="Title of demo for applying wave effects on progress indicators [CHAR LIMIT=NONE]">
Wavy Progress Indicator Demo
</string>
<string name="cat_progress_indicator_description"
description="Body text describing the MaterialProgressIndicator widget within the design system [CHAR LIMIT=NONE]">
ProgressIndicator shows the progress of an undergoing process.
Expand All @@ -41,27 +45,27 @@

<string name="cat_progress_indicator_track_thickness"
description="Text label above a slider for adjusting indicators' track thickness [CHAR LIMIT=NONE]">
Track Thickness (1-15) dp
Track Thickness (1 - 15) dp
</string>
<string name="cat_progress_indicator_corner_size"
description="Text label above a slider for adjusting indicators' corner size [CHAR LIMIT=NONE]">
Corner Size (0-5) dp
Corner Size (0 - 5) dp
</string>
<string name="cat_progress_indicator_gap_size"
description="Text label above a slider for adjusting indicators' gap size [CHAR LIMIT=NONE]">
Gap Size (0-10) dp
Gap Size (0 - 10) dp
</string>
<string name="cat_progress_indicator_reverse_direction"
description="Switch label for reversing indicators' direction [CHAR LIMIT=NONE]">
Inverse Direction
</string>
<string name="cat_progress_indicator_linear_stop_indicator_size"
description="Text label above a slider for adjusting stop indicator size in linear progress indicator [CHAR LIMIT=NONE]">
Linear Stop Indicator Size (0-10) dp
Linear Stop Indicator Size (0 - 10) dp
</string>
<string name="cat_progress_indicator_circular_indicator_size"
description="Text label above a slider for adjusting circular indicator's size [CHAR LIMIT=NONE]">
Circular Indicator Size (20-200) dp
Circular Indicator Size (20 - 200) dp
</string>
<string name="cat_progress_indicator_hide_behavior"
description="Hint label of a dropdown to select hide behavior [CHAR LIMIT=NONE]">
Expand All @@ -85,12 +89,20 @@
</string>
<string name="cat_progress_indicator_determinate_progress"
description="Text label above a slider for changing indicators' progress [CHAR LIMIT=NONE]">
Progress (0-100)
Progress (0 - 100)
</string>
<string name="cat_progress_indicator_set_to_determinate_mode"
description="Set the displayed progress indicators to the determinate mode. [CHAR LIMIT=NONE]">
Determinate Mode
</string>
<string name="cat_progress_indicator_wave_amplitude"
description="Text label above a slider for changing indicators' amplitude [CHAR LIMIT=NONE]">
Amplitude (0 - 30) dp
</string>
<string name="cat_progress_indicator_wave_length"
description="Text label above a slider for changing indicators' wavelength [CHAR LIMIT=NONE]">
Wave length (0 - 100) dp
</string>

<!-- Descriptions of various examples of progress indicators -->

Expand Down

0 comments on commit b32512a

Please sign in to comment.