Skip to content

Commit 93b4108

Browse files
committed
Added styling to error color and flag to show or not the error state.
1 parent 7751ec6 commit 93b4108

File tree

7 files changed

+66
-8
lines changed

7 files changed

+66
-8
lines changed

material-stepper/src/main/java/com/stepstone/stepper/StepperLayout.java

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,9 @@ public final void goToPrevStep() {
175175
@ColorInt
176176
private int mSelectedColor;
177177

178+
@ColorInt
179+
private int mErrorColor;
180+
178181
@DrawableRes
179182
private int mBottomNavigationBackground;
180183

@@ -205,6 +208,8 @@ public final void goToPrevStep() {
205208

206209
private int mCurrentStepPosition;
207210

211+
private boolean mShowErrorState;
212+
208213
private boolean mShowErrorStateOnBack;
209214

210215
@NonNull
@@ -297,6 +302,10 @@ public int getUnselectedColor() {
297302
return mUnselectedColor;
298303
}
299304

305+
public int getErrorColor() {
306+
return mErrorColor;
307+
}
308+
300309
public int getTabStepDividerWidth() {
301310
return mTabStepDividerWidth;
302311
}
@@ -329,13 +338,21 @@ public void setCompleteButtonVerificationFailed(boolean verificationFailed) {
329338
}
330339

331340
/**
332-
* Set whether when going backwards should clear the error state from the Tab. Default is false
341+
* Set whether when going backwards should clear the error state from the Tab. Default is false.
333342
* @param mShowErrorStateOnBack
334343
*/
335344
public void setShowErrorStateOnBack(boolean mShowErrorStateOnBack) {
336345
this.mShowErrorStateOnBack = mShowErrorStateOnBack;
337346
}
338347

348+
/**
349+
* Set whether the tab should display error or not. Default false.
350+
* @param mShowErrorState
351+
*/
352+
public void setShowErrorState(boolean mShowErrorState) {
353+
this.mShowErrorState = mShowErrorState;
354+
}
355+
339356
private void init(AttributeSet attrs, @AttrRes int defStyleAttr) {
340357
initDefaultValues();
341358
extractValuesFromAttributes(attrs, defStyleAttr);
@@ -425,13 +442,15 @@ private void extractValuesFromAttributes(AttributeSet attrs, @AttrRes int defSty
425442
if (a.hasValue(R.styleable.StepperLayout_ms_completeButtonColor)) {
426443
mCompleteButtonColor = a.getColorStateList(R.styleable.StepperLayout_ms_completeButtonColor);
427444
}
428-
429445
if (a.hasValue(R.styleable.StepperLayout_ms_activeStepColor)) {
430446
mSelectedColor = a.getColor(R.styleable.StepperLayout_ms_activeStepColor, mSelectedColor);
431447
}
432448
if (a.hasValue(R.styleable.StepperLayout_ms_inactiveStepColor)) {
433449
mUnselectedColor = a.getColor(R.styleable.StepperLayout_ms_inactiveStepColor, mUnselectedColor);
434450
}
451+
if (a.hasValue(R.styleable.StepperLayout_ms_errorColor)) {
452+
mErrorColor = a.getColor(R.styleable.StepperLayout_ms_errorColor, mErrorColor);
453+
}
435454
if (a.hasValue(R.styleable.StepperLayout_ms_bottomNavigationBackground)) {
436455
mBottomNavigationBackground = a.getResourceId(R.styleable.StepperLayout_ms_bottomNavigationBackground, mBottomNavigationBackground);
437456
}
@@ -462,6 +481,8 @@ private void extractValuesFromAttributes(AttributeSet attrs, @AttrRes int defSty
462481

463482
mShowBackButtonOnFirstStep = a.getBoolean(R.styleable.StepperLayout_ms_showBackButtonOnFirstStep, false);
464483

484+
mShowErrorState = a.getBoolean(R.styleable.StepperLayout_ms_showErrorState, false);
485+
465486
if (a.hasValue(R.styleable.StepperLayout_ms_stepperType)) {
466487
mTypeIdentifier = a.getInt(R.styleable.StepperLayout_ms_stepperType, DEFAULT_TAB_DIVIDER_WIDTH);
467488
}
@@ -477,6 +498,7 @@ private void initDefaultValues() {
477498
ContextCompat.getColorStateList(getContext(), R.color.ms_bottomNavigationButtonTextColor);
478499
mSelectedColor = ContextCompat.getColor(getContext(), R.color.ms_selectedColor);
479500
mUnselectedColor = ContextCompat.getColor(getContext(), R.color.ms_unselectedColor);
501+
mErrorColor = ContextCompat.getColor(getContext(), R.color.ms_errorColor);
480502
mBottomNavigationBackground = R.color.ms_bottomNavigationBackgroundColor;
481503
mBackButtonText = getContext().getString(R.string.ms_back);
482504
mNextButtonText = getContext().getString(R.string.ms_next);
@@ -511,7 +533,7 @@ private void onNext() {
511533
}
512534

513535
//if moving forward and got no errors, set hasError to false, so we can have the tab with the check mark.
514-
if(mStepperType instanceof TabsStepperType)
536+
if(mShowErrorState && mStepperType instanceof TabsStepperType)
515537
mTabsContainer.setErrorStep(mCurrentStepPosition, false);
516538

517539
OnNextClickedCallback onNextClickedCallback = new OnNextClickedCallback();
@@ -537,7 +559,7 @@ private void onError(@NonNull VerificationError verificationError) {
537559
step.onError(verificationError);
538560

539561
//if moving forward and got errors, set hasError to true, showing the error drawable.
540-
if(mStepperType instanceof TabsStepperType)
562+
if(mShowErrorState && mStepperType instanceof TabsStepperType)
541563
mTabsContainer.setErrorStep(mCurrentStepPosition, true);
542564

543565
}

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

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,14 @@
1717
package com.stepstone.stepper.internal;
1818

1919
import android.content.Context;
20+
import android.content.res.ColorStateList;
2021
import android.graphics.Typeface;
2122
import android.graphics.drawable.Drawable;
2223
import android.support.annotation.ColorInt;
2324
import android.support.annotation.StringRes;
2425
import android.support.v4.content.ContextCompat;
26+
import android.support.v4.graphics.drawable.DrawableCompat;
27+
import android.support.v7.widget.AppCompatImageView;
2528
import android.util.AttributeSet;
2629
import android.view.LayoutInflater;
2730
import android.view.View;
@@ -48,6 +51,9 @@ public class StepTab extends RelativeLayout {
4851
@ColorInt
4952
private int mSelectedColor;
5053

54+
@ColorInt
55+
private int mErrorColor;
56+
5157
private final TextView mStepNumber;
5258

5359
private final View mStepDivider;
@@ -56,7 +62,7 @@ public class StepTab extends RelativeLayout {
5662

5763
private final ImageView mStepDoneIndicator;
5864

59-
private final ImageView mStepErrorIndicator;
65+
private final AppCompatImageView mStepErrorIndicator;
6066

6167
private int mDividerWidth = StepperLayout.DEFAULT_TAB_DIVIDER_WIDTH;
6268

@@ -76,10 +82,11 @@ public StepTab(Context context, AttributeSet attrs, int defStyleAttr) {
7682

7783
mSelectedColor = ContextCompat.getColor(context, R.color.ms_selectedColor);
7884
mUnselectedColor = ContextCompat.getColor(context, R.color.ms_unselectedColor);
85+
mErrorColor = ContextCompat.getColor(context, R.color.ms_errorColor);
7986

8087
mStepNumber = (TextView) findViewById(R.id.ms_stepNumber);
8188
mStepDoneIndicator = (ImageView) findViewById(R.id.ms_stepDoneIndicator);
82-
mStepErrorIndicator = (ImageView) findViewById(R.id.ms_stepErrorIndicator);
89+
mStepErrorIndicator = (AppCompatImageView) findViewById(R.id.ms_stepErrorIndicator);
8390
mStepDivider = findViewById(R.id.ms_stepDivider);
8491
mStepTitle = ((TextView) findViewById(R.id.ms_stepTitle));
8592
}
@@ -109,6 +116,7 @@ public void updateState(final boolean done, final boolean showErrorOnBack, final
109116

110117
this.hasError = false;
111118

119+
mStepTitle.setTextColor(ContextCompat.getColor(getContext(), R.color.ms_black));
112120
mStepTitle.setTypeface(current ? Typeface.DEFAULT_BOLD : Typeface.DEFAULT);
113121
mStepTitle.setAlpha(done || current ? OPAQUE_ALPHA : INACTIVE_STEP_TITLE_ALPHA);
114122
}
@@ -122,6 +130,8 @@ public void updateErrorState(boolean hasError) {
122130
mStepDoneIndicator.setVisibility(View.GONE);
123131
mStepNumber.setVisibility(View.GONE);
124132
mStepErrorIndicator.setVisibility(VISIBLE);
133+
mStepErrorIndicator.setColorFilter(mErrorColor);
134+
mStepTitle.setTextColor(mErrorColor);
125135
}
126136

127137
this.hasError = hasError;
@@ -159,6 +169,10 @@ public void setSelectedColor(int selectedColor) {
159169
this.mSelectedColor = selectedColor;
160170
}
161171

172+
public void setErrorColor(int errorColor) {
173+
this.mErrorColor = errorColor;
174+
}
175+
162176
private void colorViewBackground(View view, boolean selected) {
163177
Drawable d = view.getBackground();
164178
TintUtil.tintDrawable(d, selected ? mSelectedColor : mUnselectedColor);

material-stepper/src/main/java/com/stepstone/stepper/internal/TabsContainer.java

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,9 @@ public void onTabClicked(int position) {
6767
@ColorInt
6868
private int mSelectedColor;
6969

70+
@ColorInt
71+
private int mErrorColor;
72+
7073
private int mDividerWidth = StepperLayout.DEFAULT_TAB_DIVIDER_WIDTH;
7174

7275
private final int mContainerLateralPadding;
@@ -95,6 +98,7 @@ public TabsContainer(Context context, AttributeSet attrs, int defStyleAttr) {
9598

9699
mSelectedColor = ContextCompat.getColor(context, R.color.ms_selectedColor);
97100
mUnselectedColor = ContextCompat.getColor(context, R.color.ms_unselectedColor);
101+
mErrorColor = ContextCompat.getColor(context, R.color.ms_errorColor);
98102
if (attrs != null) {
99103
final TypedArray a = getContext().obtainStyledAttributes(
100104
attrs, R.styleable.TabsContainer, defStyleAttr, 0);
@@ -106,6 +110,10 @@ public TabsContainer(Context context, AttributeSet attrs, int defStyleAttr) {
106110
mUnselectedColor = a.getColor(R.styleable.TabsContainer_ms_inactiveTabColor, mUnselectedColor);
107111
}
108112

113+
if (a.hasValue(R.styleable.StepperLayout_ms_errorColor)) {
114+
mErrorColor = a.getColor(R.styleable.StepperLayout_ms_errorColor, mErrorColor);
115+
}
116+
109117
a.recycle();
110118
}
111119
mContainerLateralPadding = context.getResources().getDimensionPixelOffset(R.dimen.ms_tabs_container_lateral_padding);
@@ -122,6 +130,10 @@ public void setSelectedColor(@ColorInt int selectedColor) {
122130
this.mSelectedColor = selectedColor;
123131
}
124132

133+
public void setErrorColor(@ColorInt int mErrorColor) {
134+
this.mErrorColor = mErrorColor;
135+
}
136+
125137
public void setDividerWidth(int dividerWidth) {
126138
this.mDividerWidth = dividerWidth;
127139
}
@@ -184,6 +196,7 @@ private View createStepTab(final int position, @StringRes int title) {
184196
view.setStepTitle(title);
185197
view.setSelectedColor(mSelectedColor);
186198
view.setUnselectedColor(mUnselectedColor);
199+
view.setErrorColor(mErrorColor);
187200
view.setDividerWidth(mDividerWidth);
188201

189202
view.setOnClickListener(new View.OnClickListener() {

material-stepper/src/main/java/com/stepstone/stepper/type/TabsStepperType.java

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ public TabsStepperType(StepperLayout stepperLayout) {
4141
mTabsContainer.setVisibility(View.VISIBLE);
4242
mTabsContainer.setSelectedColor(stepperLayout.getSelectedColor());
4343
mTabsContainer.setUnselectedColor(stepperLayout.getUnselectedColor());
44+
mTabsContainer.setErrorColor(stepperLayout.getErrorColor());
4445
mTabsContainer.setDividerWidth(stepperLayout.getTabStepDividerWidth());
4546
mTabsContainer.setListener(stepperLayout);
4647
}

material-stepper/src/main/res/values/attrs.xml

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ limitations under the License.
2929
<attr name="ms_inactiveStepColor" format="color|reference" />
3030
<!-- Background of the bottom navigation -->
3131
<attr name="ms_bottomNavigationBackground" format="reference" />
32+
<!-- Error's color -->
33+
<attr name="ms_errorColor" format="color|reference" />
3234

3335
<!-- BACK button's background -->
3436
<attr name="ms_backButtonBackground" format="reference" />
@@ -50,7 +52,10 @@ limitations under the License.
5052
<!-- Flag indicating if the Back (Previous step) button should be shown on the first step. False by default. -->
5153
<attr name="ms_showBackButtonOnFirstStep" format="boolean" />
5254

53-
<!-- Flag indicating wheter to keep showing the error state when user moves back. Only available with 'tabs' type. False by default. -->
55+
<!-- Flag indicating whether to show the error state. Only available with 'tabs' type. False by default. -->
56+
<attr name="ms_showErrorState" format="boolean" />
57+
58+
<!-- Flag indicating whether to keep showing the error state when user moves back. Only available with 'tabs' type. False by default. -->
5459
<attr name="ms_showErrorStateOnBack" format="boolean" />
5560

5661
<!-- REQUIRED: Type of the stepper-->

sample/src/main/res/layout/activity_no_frag.xml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@
55
android:layout_width="match_parent"
66
android:layout_height="match_parent"
77
android:orientation="vertical"
8-
app:ms_stepperType="dots"/>
8+
app:ms_stepperType="tabs"
9+
app:ms_showErrorState="true"
10+
app:ms_showErrorStateOnBack="true"/>

sample/src/main/res/values/styles.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
<item name="ms_inactiveStepColor">#006867</item>
1717
<item name="ms_backButtonColor">@color/ms_custom_button_text_color</item>
1818
<item name="ms_nextButtonColor">@color/ms_custom_button_text_color</item>
19+
<item name="ms_errorColor">@color/ms_errorColor</item>
1920
<item name="ms_completeButtonColor">@color/ms_custom_button_text_color</item>
2021
<item name="ms_bottomNavigationBackground">?attr/colorAccent</item>
2122
</style>

0 commit comments

Comments
 (0)