Skip to content

Commit 3c2bceb

Browse files
Piotr Zawadzkizawadz88
Piotr Zawadzki
authored and
zawadz88
committed
animated step number/done indicator when changing from warning state in StepTab
1 parent aaba706 commit 3c2bceb

File tree

9 files changed

+67
-46
lines changed

9 files changed

+67
-46
lines changed

‎material-stepper/src/main/java/com/stepstone/stepper/internal/widget/StepTab.java‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -305,12 +305,17 @@ protected void changeToWarning() {
305305

306306
private class WarningState extends AbstractState {
307307

308+
private static final float HALF_SIZE_SCALE = 0.5f;
309+
private static final float FULL_SIZE_SCALE = 1.0f;
310+
308311
@Override
309312
protected void changeToDone() {
310313
AnimatedVectorDrawableCompat avd = createWarningToCircleDrawable();
311314
mStepIconBackground.setImageDrawable(avd);
312315
avd.start();
313-
mStepDoneIndicator.setVisibility(View.VISIBLE);
316+
317+
animateViewIn(mStepDoneIndicator);
318+
314319
mStepIconBackground.setColorFilter(mSelectedColor);
315320
mStepTitle.setTextColor(mTitleColor);
316321
super.changeToDone();
@@ -321,7 +326,9 @@ protected void changeToInactiveNumber() {
321326
AnimatedVectorDrawableCompat avd = createWarningToCircleDrawable();
322327
mStepIconBackground.setImageDrawable(avd);
323328
avd.start();
324-
mStepNumber.setVisibility(View.VISIBLE);
329+
330+
animateViewIn(mStepNumber);
331+
325332
mStepIconBackground.setColorFilter(mUnselectedColor);
326333
mStepTitle.setTextColor(mTitleColor);
327334
mStepTitle.setAlpha(INACTIVE_STEP_TITLE_ALPHA);
@@ -334,11 +341,23 @@ protected void changeToActiveNumber() {
334341
AnimatedVectorDrawableCompat avd = createWarningToCircleDrawable();
335342
mStepIconBackground.setImageDrawable(avd);
336343
avd.start();
337-
mStepNumber.setVisibility(View.VISIBLE);
344+
345+
animateViewIn(mStepNumber);
346+
338347
mStepIconBackground.setColorFilter(mSelectedColor);
339348
mStepTitle.setTextColor(mTitleColor);
340349
super.changeToActiveNumber();
341350
}
351+
352+
private void animateViewIn(final View view) {
353+
view.setVisibility(View.VISIBLE);
354+
view.setScaleX(HALF_SIZE_SCALE);
355+
view.setScaleY(HALF_SIZE_SCALE);
356+
view.animate()
357+
.scaleX(FULL_SIZE_SCALE)
358+
.scaleY(FULL_SIZE_SCALE);
359+
360+
}
342361
}
343362

344363
}

‎material-stepper/src/main/res/drawable-v21/ms_avd_circle_to_warning.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
android:interpolator="@android:anim/accelerate_interpolator"
3434
android:propertyName="translateY"
3535
android:valueFrom="0"
36-
android:valueTo="@integer/ms_warning_translate_y" />
36+
android:valueTo="@integer/ms_warning_end_translate_y" />
3737
</aapt:attr>
3838
</target>
3939

‎material-stepper/src/main/res/drawable-v21/ms_avd_warning_to_circle.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
android:duration="@integer/ms_default_error_tab_animation_duration"
3333
android:interpolator="@android:anim/accelerate_interpolator"
3434
android:propertyName="translateY"
35-
android:valueFrom="@integer/ms_warning_translate_y"
35+
android:valueFrom="@integer/ms_warning_end_translate_y"
3636
android:valueTo="0" />
3737
</aapt:attr>
3838
</target>

‎material-stepper/src/main/res/drawable-v21/ms_vd_warning.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<group
88
android:name="container"
9-
android:translateY="@integer/ms_warning_translate_y">
9+
android:translateY="@integer/ms_warning_end_translate_y">
1010

1111
<path
1212
android:name="outer_layer"

‎material-stepper/src/main/res/drawable/ms_avd_circle_to_warning.xml‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
<target android:name="circle">
66
<aapt:attr name="android:animation">
7+
<!-- This hack is needed since setting duration to 0 and startOffset to 300 does not trigger the animation... -->
78
<objectAnimator
89
android:duration="1"
910
android:startOffset="299"
@@ -20,27 +21,27 @@
2021
<objectAnimator
2122
android:propertyName="scaleX"
2223
android:valueFrom="1"
23-
android:valueTo="0.5"
24+
android:valueTo="@integer/ms_circle_start_scale"
2425
android:interpolator="@android:anim/accelerate_interpolator"
2526
android:duration="@integer/ms_default_error_tab_animation_duration" />
2627

2728
<objectAnimator
2829
android:propertyName="scaleY"
2930
android:valueFrom="1"
30-
android:valueTo="0.5"
31+
android:valueTo="@integer/ms_circle_start_scale"
3132
android:interpolator="@android:anim/accelerate_interpolator"
3233
android:duration="@integer/ms_default_error_tab_animation_duration" />
3334
</set>
3435
</aapt:attr>
3536
</target>
3637

37-
<target android:name="warning">
38+
<target android:name="container">
3839
<aapt:attr name="android:animation">
3940
<objectAnimator
4041
android:duration="@integer/ms_default_error_tab_animation_duration"
4142
android:propertyName="translateY"
4243
android:valueFrom="0"
43-
android:valueTo="@integer/ms_warning_translate_y" />
44+
android:valueTo="@integer/ms_warning_end_translate_y" />
4445
</aapt:attr>
4546
</target>
4647

‎material-stepper/src/main/res/drawable/ms_avd_warning_to_circle.xml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,24 @@
1919
<objectAnimator
2020
android:duration="@integer/ms_default_error_tab_animation_duration"
2121
android:propertyName="scaleX"
22-
android:valueFrom="0.5"
22+
android:valueFrom="@integer/ms_circle_start_scale"
2323
android:valueTo="1" />
2424

2525
<objectAnimator
2626
android:duration="@integer/ms_default_error_tab_animation_duration"
2727
android:propertyName="scaleY"
28-
android:valueFrom="0.5"
28+
android:valueFrom="@integer/ms_circle_start_scale"
2929
android:valueTo="1" />
3030
</set>
3131
</aapt:attr>
3232
</target>
3333

34-
<target android:name="warning">
34+
<target android:name="container">
3535
<aapt:attr name="android:animation">
3636
<objectAnimator
3737
android:duration="@integer/ms_default_error_tab_animation_duration"
3838
android:propertyName="translateY"
39-
android:valueFrom="@integer/ms_warning_translate_y"
39+
android:valueFrom="@integer/ms_warning_end_translate_y"
4040
android:valueTo="0" />
4141
</aapt:attr>
4242
</target>

‎material-stepper/src/main/res/drawable/ms_vd_circle.xml‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,28 @@
44
android:viewportHeight="24.0"
55
android:viewportWidth="24.0">
66

7-
87
<group
9-
android:name="circle_group"
10-
android:pivotX="12"
11-
android:pivotY="12"
12-
android:scaleX="1"
13-
android:scaleY="1">
8+
android:name="container"
9+
android:translateY="0">
1410

15-
<path
16-
android:name="circle"
17-
android:fillAlpha="1"
18-
android:fillColor="#ff000000"
19-
android:pathData="@string/ms_circle_path" />
11+
<group
12+
android:name="circle_group"
13+
android:pivotX="12"
14+
android:pivotY="12"
15+
android:scaleX="1"
16+
android:scaleY="1">
2017

21-
</group>
18+
<path
19+
android:name="circle"
20+
android:fillAlpha="1"
21+
android:fillColor="#ff000000"
22+
android:pathData="@string/ms_circle_path" />
2223

23-
<group
24-
android:name="warning"
25-
android:translateY="0">
24+
</group>
2625

2726
<path
2827
android:fillColor="#ff000000"
29-
android:pathData="@string/ms_warning_default_path"/>
28+
android:pathData="@string/ms_warning_default_path" />
3029

3130
</group>
3231

‎material-stepper/src/main/res/drawable/ms_vd_warning.xml‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,24 @@
44
android:viewportHeight="24.0"
55
android:viewportWidth="24.0">
66

7-
<group
8-
android:name="circle_group"
9-
android:pivotX="12"
10-
android:pivotY="12"
11-
android:scaleX="0.5"
12-
android:scaleY="0.5">
7+
<group android:name="container"
8+
android:translateY="@integer/ms_warning_end_translate_y">
139

14-
<path
15-
android:name="circle"
16-
android:fillAlpha="0"
17-
android:fillColor="#ff000000"
18-
android:pathData="@string/ms_circle_path" />
10+
<group
11+
android:name="circle_group"
12+
android:pivotX="12"
13+
android:pivotY="12"
14+
android:scaleX="@integer/ms_circle_start_scale"
15+
android:scaleY="@integer/ms_circle_start_scale">
1916

20-
</group>
17+
<path
18+
android:name="circle"
19+
android:fillAlpha="0"
20+
android:fillColor="#ff000000"
21+
android:pathData="@string/ms_circle_path" />
22+
23+
</group>
2124

22-
<group
23-
android:name="warning"
24-
android:translateY="@integer/ms_warning_translate_y">
2525

2626
<path
2727
android:fillColor="#ff000000"

‎material-stepper/src/main/res/values/numbers.xml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33

44
<integer name="ms_default_error_tab_animation_duration">300</integer>
55

6-
<integer name="ms_warning_translate_y">2</integer>
6+
<integer name="ms_warning_end_translate_y">2</integer>
7+
8+
<item name="ms_circle_start_scale" type="integer" format="float">0.5</item>
79

810
</resources>

0 commit comments

Comments
 (0)