Skip to content

Commit edd8729

Browse files
Piotr Zawadzkizawadz88
Piotr Zawadzki
authored and
zawadz88
committed
smoother animations when showing an error in tabs
1 parent 3c2bceb commit edd8729

File tree

10 files changed

+64
-96
lines changed

10 files changed

+64
-96
lines changed

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

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
import android.util.AttributeSet;
2727
import android.view.LayoutInflater;
2828
import android.view.View;
29+
import android.view.animation.AccelerateInterpolator;
2930
import android.widget.ImageView;
3031
import android.widget.RelativeLayout;
3132
import android.widget.TextView;
@@ -41,9 +42,11 @@
4142
@RestrictTo(LIBRARY)
4243
public class StepTab extends RelativeLayout {
4344

44-
private static final float INACTIVE_STEP_TITLE_ALPHA = 0.54f;
45+
private static final float ALPHA_TRANSPARENT = 0.0f;
4546

46-
private static final int OPAQUE_ALPHA = 1;
47+
private static final float ALPHA_INACTIVE_STEP_TITLE = 0.54f;
48+
49+
private static final float ALPHA_OPAQUE = 1.0f;
4750

4851
@ColorInt
4952
private int mUnselectedColor;
@@ -76,6 +79,8 @@ public class StepTab extends RelativeLayout {
7679
*/
7780
private AbstractState mCurrentState = new InactiveNumberState();
7881

82+
private AccelerateInterpolator accelerateInterpolator = new AccelerateInterpolator();
83+
7984
public StepTab(Context context) {
8085
this(context, null);
8186
}
@@ -172,7 +177,7 @@ public void setDividerWidth(int dividerWidth) {
172177
: getResources().getDimensionPixelOffset(R.dimen.ms_step_tab_divider_length);
173178
}
174179

175-
// FIXME: 04/03/2017 fix animations on L+ (you can see the triangle inside of the circle if you look closely...)
180+
// FIXME: 05/03/2017 stop tabs from changing positions due to changing font type (does not happen e.g. on API 16, investigate further)
176181
private AnimatedVectorDrawableCompat createCircleToWarningDrawable() {
177182
return AnimatedVectorDrawableCompat.create(getContext(), R.drawable.ms_avd_circle_to_warning);
178183
}
@@ -247,21 +252,21 @@ private class InactiveNumberState extends AbstractNumberState {
247252
protected void changeToInactiveNumber() {
248253
mStepIconBackground.setColorFilter(mUnselectedColor);
249254
mStepTitle.setTextColor(mTitleColor);
250-
mStepTitle.setAlpha(INACTIVE_STEP_TITLE_ALPHA);
255+
mStepTitle.setAlpha(ALPHA_INACTIVE_STEP_TITLE);
251256
super.changeToInactiveNumber();
252257
}
253258

254259
@Override
255260
protected void changeToActiveNumber() {
256261
mStepIconBackground.setColorFilter(mSelectedColor);
257-
mStepTitle.setAlpha(OPAQUE_ALPHA);
262+
mStepTitle.setAlpha(ALPHA_OPAQUE);
258263
super.changeToActiveNumber();
259264
}
260265

261266
@Override
262267
protected void changeToDone() {
263268
mStepIconBackground.setColorFilter(mSelectedColor);
264-
mStepTitle.setAlpha(OPAQUE_ALPHA);
269+
mStepTitle.setAlpha(ALPHA_OPAQUE);
265270
super.changeToDone();
266271
}
267272
}
@@ -271,7 +276,7 @@ private class ActiveNumberState extends AbstractNumberState {
271276
@Override
272277
protected void changeToInactiveNumber() {
273278
mStepIconBackground.setColorFilter(mUnselectedColor);
274-
mStepTitle.setAlpha(INACTIVE_STEP_TITLE_ALPHA);
279+
mStepTitle.setAlpha(ALPHA_INACTIVE_STEP_TITLE);
275280
super.changeToInactiveNumber();
276281
}
277282
}
@@ -283,7 +288,7 @@ protected void changeToInactiveNumber() {
283288
mStepDoneIndicator.setVisibility(GONE);
284289
mStepNumber.setVisibility(VISIBLE);
285290
mStepIconBackground.setColorFilter(mUnselectedColor);
286-
mStepTitle.setAlpha(INACTIVE_STEP_TITLE_ALPHA);
291+
mStepTitle.setAlpha(ALPHA_INACTIVE_STEP_TITLE);
287292
super.changeToInactiveNumber();
288293
}
289294

@@ -331,7 +336,7 @@ protected void changeToInactiveNumber() {
331336

332337
mStepIconBackground.setColorFilter(mUnselectedColor);
333338
mStepTitle.setTextColor(mTitleColor);
334-
mStepTitle.setAlpha(INACTIVE_STEP_TITLE_ALPHA);
339+
mStepTitle.setAlpha(ALPHA_INACTIVE_STEP_TITLE);
335340

336341
super.changeToInactiveNumber();
337342
}
@@ -351,9 +356,12 @@ protected void changeToActiveNumber() {
351356

352357
private void animateViewIn(final View view) {
353358
view.setVisibility(View.VISIBLE);
359+
view.setAlpha(ALPHA_TRANSPARENT);
354360
view.setScaleX(HALF_SIZE_SCALE);
355361
view.setScaleY(HALF_SIZE_SCALE);
356362
view.animate()
363+
.setInterpolator(accelerateInterpolator)
364+
.alpha(ALPHA_OPAQUE)
357365
.scaleX(FULL_SIZE_SCALE)
358366
.scaleY(FULL_SIZE_SCALE);
359367

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

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,23 @@
22
xmlns:aapt="http://schemas.android.com/aapt"
33
android:drawable="@drawable/ms_vd_circle">
44

5-
<target android:name="outer_layer">
5+
<target android:name="icon">
66
<aapt:attr name="android:animation">
77
<objectAnimator
88
android:duration="@integer/ms_default_error_tab_animation_duration"
9-
android:interpolator="@android:anim/accelerate_interpolator"
9+
android:interpolator="@android:anim/decelerate_interpolator"
1010
android:propertyName="pathData"
11-
android:valueFrom="@string/ms_warning_outer_layer_expanded_path"
12-
android:valueTo="@string/ms_warning_outer_layer_collapsed_path"
11+
android:valueFrom="@string/ms_circle_path"
12+
android:valueTo="@string/ms_warning_path"
1313
android:valueType="pathType" />
1414
</aapt:attr>
1515
</target>
1616

17-
<target android:name="original_warning">
17+
<target android:name="icon_container">
1818
<aapt:attr name="android:animation">
1919
<objectAnimator
2020
android:duration="@integer/ms_default_error_tab_animation_duration"
21-
android:interpolator="@android:anim/accelerate_interpolator"
22-
android:propertyName="pathData"
23-
android:valueFrom="@string/ms_warning_filled_path"
24-
android:valueTo="@string/ms_warning_default_path"
25-
android:valueType="pathType" />
26-
</aapt:attr>
27-
</target>
28-
29-
<target android:name="container">
30-
<aapt:attr name="android:animation">
31-
<objectAnimator
32-
android:duration="@integer/ms_default_error_tab_animation_duration"
33-
android:interpolator="@android:anim/accelerate_interpolator"
21+
android:interpolator="@android:anim/decelerate_interpolator"
3422
android:propertyName="translateY"
3523
android:valueFrom="0"
3624
android:valueTo="@integer/ms_warning_end_translate_y" />

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

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,23 @@
22
xmlns:aapt="http://schemas.android.com/aapt"
33
android:drawable="@drawable/ms_vd_warning">
44

5-
<target android:name="outer_layer">
5+
<target android:name="icon">
66
<aapt:attr name="android:animation">
77
<objectAnimator
88
android:duration="@integer/ms_default_error_tab_animation_duration"
9-
android:interpolator="@android:anim/accelerate_interpolator"
9+
android:interpolator="@android:anim/decelerate_interpolator"
1010
android:propertyName="pathData"
11-
android:valueFrom="@string/ms_warning_outer_layer_collapsed_path"
12-
android:valueTo="@string/ms_warning_outer_layer_expanded_path"
11+
android:valueFrom="@string/ms_warning_path"
12+
android:valueTo="@string/ms_circle_path"
1313
android:valueType="pathType" />
1414
</aapt:attr>
1515
</target>
1616

17-
<target android:name="original_warning">
18-
<aapt:attr name="android:animation">
19-
<objectAnimator
20-
android:duration="0"
21-
android:interpolator="@android:anim/accelerate_interpolator"
22-
android:propertyName="pathData"
23-
android:valueFrom="@string/ms_warning_default_path"
24-
android:valueTo="@string/ms_warning_filled_path"
25-
android:valueType="pathType" />
26-
</aapt:attr>
27-
</target>
28-
29-
<target android:name="container">
17+
<target android:name="icon_container">
3018
<aapt:attr name="android:animation">
3119
<objectAnimator
3220
android:duration="@integer/ms_default_error_tab_animation_duration"
33-
android:interpolator="@android:anim/accelerate_interpolator"
21+
android:interpolator="@android:anim/decelerate_interpolator"
3422
android:propertyName="translateY"
3523
android:valueFrom="@integer/ms_warning_end_translate_y"
3624
android:valueTo="0" />

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

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,13 @@
55
android:viewportWidth="24.0">
66

77
<group
8-
android:name="container"
8+
android:name="icon_container"
99
android:translateY="0">
1010

1111
<path
12-
android:name="outer_layer"
12+
android:name="icon"
1313
android:fillColor="#ff000000"
14-
android:pathData="@string/ms_warning_outer_layer_expanded_path" />
15-
16-
<path
17-
android:name="original_warning"
18-
android:fillColor="#ff000000"
19-
android:pathData="@string/ms_warning_filled_path" />
14+
android:pathData="@string/ms_circle_path" />
2015

2116
</group>
2217

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

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,13 @@
55
android:viewportWidth="24.0">
66

77
<group
8-
android:name="container"
8+
android:name="icon_container"
99
android:translateY="@integer/ms_warning_end_translate_y">
1010

1111
<path
12-
android:name="outer_layer"
12+
android:name="icon"
1313
android:fillColor="#ff000000"
14-
android:pathData="@string/ms_warning_outer_layer_collapsed_path" />
15-
16-
<path
17-
android:name="original_warning"
18-
android:fillColor="#ff000000"
19-
android:pathData="@string/ms_warning_default_path" />
14+
android:pathData="@string/ms_warning_path" />
2015

2116
</group>
2217

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,21 @@
2121
<objectAnimator
2222
android:propertyName="scaleX"
2323
android:valueFrom="1"
24+
android:interpolator="@android:anim/decelerate_interpolator"
2425
android:valueTo="@integer/ms_circle_start_scale"
25-
android:interpolator="@android:anim/accelerate_interpolator"
2626
android:duration="@integer/ms_default_error_tab_animation_duration" />
2727

2828
<objectAnimator
2929
android:propertyName="scaleY"
3030
android:valueFrom="1"
3131
android:valueTo="@integer/ms_circle_start_scale"
32-
android:interpolator="@android:anim/accelerate_interpolator"
32+
android:interpolator="@android:anim/decelerate_interpolator"
3333
android:duration="@integer/ms_default_error_tab_animation_duration" />
3434
</set>
3535
</aapt:attr>
3636
</target>
3737

38-
<target android:name="container">
38+
<target android:name="icon_container">
3939
<aapt:attr name="android:animation">
4040
<objectAnimator
4141
android:duration="@integer/ms_default_error_tab_animation_duration"

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,20 +18,22 @@
1818

1919
<objectAnimator
2020
android:duration="@integer/ms_default_error_tab_animation_duration"
21+
android:interpolator="@android:anim/decelerate_interpolator"
2122
android:propertyName="scaleX"
2223
android:valueFrom="@integer/ms_circle_start_scale"
2324
android:valueTo="1" />
2425

2526
<objectAnimator
2627
android:duration="@integer/ms_default_error_tab_animation_duration"
28+
android:interpolator="@android:anim/decelerate_interpolator"
2729
android:propertyName="scaleY"
2830
android:valueFrom="@integer/ms_circle_start_scale"
2931
android:valueTo="1" />
3032
</set>
3133
</aapt:attr>
3234
</target>
3335

34-
<target android:name="container">
36+
<target android:name="icon_container">
3537
<aapt:attr name="android:animation">
3638
<objectAnimator
3739
android:duration="@integer/ms_default_error_tab_animation_duration"

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
android:viewportWidth="24.0">
66

77
<group
8-
android:name="container"
8+
android:name="icon_container"
99
android:translateY="0">
1010

1111
<group
@@ -25,7 +25,7 @@
2525

2626
<path
2727
android:fillColor="#ff000000"
28-
android:pathData="@string/ms_warning_default_path" />
28+
android:pathData="@string/ms_warning_path" />
2929

3030
</group>
3131

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

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

7-
<group android:name="container"
7+
<group
8+
android:name="icon_container"
89
android:translateY="@integer/ms_warning_end_translate_y">
910

1011
<group
@@ -25,7 +26,7 @@
2526

2627
<path
2728
android:fillColor="#ff000000"
28-
android:pathData="@string/ms_warning_default_path" />
29+
android:pathData="@string/ms_warning_path" />
2930

3031
</group>
3132

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

Lines changed: 18 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,21 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<resources>
3-
<string name="ms_warning_filled_path">m 1.576635,18.003995
4-
l 20.84673,0
5-
L 12,0 1.576635,18.003995 Z
6-
m 11.370944,-2.842736
7-
l 0,0 0,0 0,0 0,0 Z
8-
m 0,-3.790315
9-
l 0,0 0,0 0,0 0,0 Z</string>
10-
<string name="ms_warning_default_path">m 1.576635,18.003995
11-
l 20.84673,0
12-
L 12,0 1.576635,18.003995 Z
13-
m 11.370944,-2.842736
14-
l -1.895158,0 0,-1.895157 1.895158,0 0,1.895157 Z
15-
m 0,-3.790315
16-
l -1.895158,0 0,-3.7903149 1.895158,0 0,3.7903149 Z</string>
17-
<string name="ms_warning_outer_layer_collapsed_path">m 1.6113281,18.003906
18-
c 6.920573,-0.692164 13.8411459,-0.709162 20.7617189,0
19-
C 12.469726,17.869462 16.279501,17.964934 12,17.971 7.7149163,17.970508 11.558733,17.87429 1.6113281,18.003906 Z
20-
M 12,0
21-
C 9.1435796,6.5144454 5.5387173,12.387369 1.596,17.970703 6.5843095,9.6222834 7.5675805,8.0032136 12,0 Z
22-
C 16.889462,8.9623905 16.872117,8.9627143 22.398438,17.960938 18.054656,12.372884 14.631219,6.3664918 12,0 Z</string>
23-
<string name="ms_warning_outer_layer_expanded_path">m 1.6113281,18.003906
24-
c 6.920573,-0.692164 13.8411459,-0.709162 20.7617189,0
25-
C 20.231906,21.709264 16.279501,23.993934 12,24 7.7149163,23.999508 3.7552647,21.714092 1.6113281,18.003906 Z
26-
M 12,0
27-
C 9.1435796,6.5144454 5.5387173,12.387369 1.596,17.970703 -2.9917031,9.9726253 2.7795742,0.00373968 12,0 Z
28-
C 21.210345,0.01252246 26.973642,9.9673078 22.398438,17.960938 18.054656,12.372884 14.631219,6.3664918 12,0 Z</string>
29-
<string name="ms_circle_path">M12,0 A 12,12 0 0,1 12,24 A 12,12 0 0,1 12,0</string>
3+
<string name="ms_circle_path">M 12,0
4+
C 2.7795742,0.00373968 -2.992,9.9726253 1.5957031,17.970703
5+
C 3.7552647,21.714092 7.7149163,23.999508 12,24
6+
c 4.279501,-0.0061 8.231906,-2.290736 10.373047,-5.996094
7+
C 26.973642,9.9673078 21.210345,0.01252246 12,0
8+
M 12.947579,15.161259
9+
l 0,0 0,0 0,0 0,0 Z
10+
m 0,-3.790315
11+
l 0,0 0,0 0,0 0,0 Z</string>
12+
<string name="ms_warning_path">M 12,0
13+
C 1.5957031,17.970703 12,0 1.5957031,17.970703
14+
C 12,17.971 7.7149163,17.970508 12,17.971
15+
c 4.279501,-0.0061 0,0 10.373047,0.03291
16+
C 12,0 22.423827,18.003906 12,0
17+
M 12.947579,15.161259
18+
l -1.895158,0 0,-1.895157 1.895158,0 0,1.895157 Z
19+
m 0,-3.790315
20+
l -1.895158,0 0,-3.7903149 1.895158,0 0,3.7903149 Z</string>
3021
</resources>

0 commit comments

Comments
 (0)