Skip to content

Commit

Permalink
Merge pull request #170 from stepstone-tech/develop
Browse files Browse the repository at this point in the history
Release 4.0.0
  • Loading branch information
zawadz88 authored Aug 1, 2017
2 parents 2007d5b + 51f9dfd commit 6664a84
Show file tree
Hide file tree
Showing 65 changed files with 2,105 additions and 347 deletions.
21 changes: 21 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# Changelog
All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).

## [4.0.0]
### Added
- `setEndButtonVisible` and `setBackButtonVisible` methods in `StepViewModel.Builder` for toggling button visibility (issue #104)
- New stepper type `none` which shows no progress indicator for the steps (issue #154)
- New stepper feedback type `disabled_content_interaction` which intercepts touch events on the steps' content and ignores them during operation.
- New stepper feedback type `content_overlay` which shows a dimmed overlay over the content.
- An option to specify the background drawable for `content_overlay` stepper feedback type via `ms_stepperFeedback_contentOverlayBackground`.
- An option to specify the fade out alpha for `content_fade` stepper feedback type via `ms_stepperFeedback_contentFadeAlpha` attribute.

### Changed
- **Breaking change:** Updated Android Support Library version to `25.4.0` to support vector animations without a pre-Lollipop fallback (issue #154)
- **Breaking change:** Changed `setNextButtonLabel` methods in `StepViewModel.Builder` to `setEndButtonLabel` so that it works for both Next and Complete buttons (issue #107)
- **Breaking change:** Split `content` stepper feedback type into `content_progress` and `content_fade`.

[4.0.0]: https://github.com/stepstone-tech/android-material-stepper/compare/v3.3.0...4.0.0
59 changes: 39 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,18 +31,24 @@ Moreover, you can find there other examples, e.g. how to persist state on rotati
- [StepperLayout attributes](#stepperlayout-attributes)
- [View attributes](#view-attributes)
- [StepperLayout style attributes](#stepperlayout-style-attributes)
- [Changelog](#changelog)
- [License](#license)

## Supported steppers

### Mobile stepper with dots <br/>
<img src ="./gifs/dotted-progress-bar.gif" width="360" height="640"/>&nbsp;&nbsp;<img src ="./gifs/dotted-progress-bar-styled.gif" width="360" height="640"/>
<img src ="./gifs/dotted-progress-bar.gif" width="360" />&nbsp;&nbsp;<img src ="./gifs/dotted-progress-bar-styled.gif" width="360" />

### Mobile stepper with progress bar <br/>
<img src ="./gifs/linear-progress-bar.gif" width="360" height="640"/>&nbsp;&nbsp;<img src ="./gifs/linear-progress-bar-styled.gif" width="360" height="640"/>
<img src ="./gifs/linear-progress-bar.gif" width="360" />&nbsp;&nbsp;<img src ="./gifs/linear-progress-bar-styled.gif" width="360" />

### Mobile stepper without a progress indicator <br/>
<img src ="./gifs/none.gif" width="360" />

### Horizontal stepper <br/>
<img src ="./gifs/tabs.gif" width="640" height="360"/>
<img src ="./gifs/tabs-styled.gif" width="640" height="360"/>
<img src ="./gifs/tabs.gif" width="640" />
<img src ="./gifs/tabs-styled.gif" width="640" />


## Supported features
- color customisation of individual widgets inside of the stepper via View attributes or a style from a theme
Expand All @@ -57,7 +63,7 @@ Moreover, you can find there other examples, e.g. how to persist state on rotati

### Download (from JCenter)
```groovy
compile 'com.stepstone.stepper:material-stepper:3.3.0'
compile 'com.stepstone.stepper:material-stepper:4.0.0'
```

### Create layout in XML
Expand Down Expand Up @@ -207,7 +213,7 @@ After clicking on the Next button if the user wants to e.g.:
he can perform these operations and then invoke the `goToNextStep()` method of the `StepperLayout.OnNextClickedCallback` in the current Step.
If the user wants to perform these operations on the final step, when clicking on the Complete button, he needs to invoke the `complete()` method of the `StepperLayout.OnCompleteClickedCallback`.
While operations are performed, and the user would like to go back you can cancel them and then invoke `onBackClicked()` method of the `StepperLayout.OnBackClickedCallback`.
<p><img src ="./gifs/delayed-transition.gif" width="360" height="640"/></p>
<p><img src ="./gifs/delayed-transition.gif" width="360" /></p>

To do so the fragment/view must implement `BlockingStep` instead of `Step`.
Also, make sure that `goToNextStep()` and/or `complete()` get called on the main thread.
Expand Down Expand Up @@ -252,10 +258,10 @@ public class DelayedTransitionStepFragmentSample extends Fragment implements Blo
```

### Changing button labels & compound drawables per step
Sometimes you might want to have different labels on the Next and/or Back navigation buttons on different steps e.g. use the default labels on the first few steps,
Sometimes you might want to have different labels on the Next/Complete and/or Back navigation buttons on different steps e.g. use the default labels on the first few steps,
but display 'Summary' just before the last page.
You might also want to use your custom icons instead of the default navigation button compound drawables or not show the compound drawables for some of the buttons.
<p><img src ="./gifs/custom-navigation-buttons.gif" width="360" height="640"/></p>
<p><img src ="./gifs/custom-navigation-buttons.gif" width="360" /></p>
In such case you need to override the `getViewModel(int)` method from the `StepAdapter` e.g.

```java
Expand All @@ -267,19 +273,21 @@ In such case you need to override the `getViewModel(int)` method from the `StepA
switch (position) {
case 0:
builder
.setNextButtonLabel("This way")
.setEndButtonLabel("This way")
.setBackButtonLabel("Cancel")
.setNextButtonEndDrawableResId(R.drawable.ms_forward_arrow)
.setBackButtonStartDrawableResId(StepViewModel.NULL_DRAWABLE);
break;
case 1:
builder
.setNextButtonLabel(R.string.go_to_summary)
.setEndButtonLabel(R.string.go_to_summary)
.setBackButtonLabel("Go to first")
.setBackButtonStartDrawableResId(R.drawable.ms_back_arrow);
break;
case 2:
builder.setBackButtonLabel("Go back");
builder
.setBackButtonLabel("Go back")
.setEndButtonLabel("I'm done!");
break;
default:
throw new IllegalArgumentException("Unsupported position: " + position);
Expand All @@ -288,14 +296,16 @@ In such case you need to override the `getViewModel(int)` method from the `StepA
}
```

NOTE: To change Complete button's label you need use `ms_completeButtonText` attribute from StepperLayout.
It is also possible to hide Back/Next/Complete buttons on each step if needed.
To do so you need to call `setBackButtonVisible(false)` and/or `setEndButtonVisible(false)` on
`StepViewModel.Builder` in your adapter.

### Custom styling
Basic styling can be done by choosing the active and inactive step colors.
There are some additional properties which can be changed directly from StepperLayout's attributes e.g. the background of bottom navigation buttons (see [StepperLayout attributes](#stepperlayout-attributes))
For advanced styling you can use `ms_stepperLayoutTheme` StepperLayout's attribute and provide your custom style to be used.
See 'Custom StepperLayout theme' in the sample app for an example.
<p><img src ="./gifs/custom-theme.gif" width="360" height="640"/></p>
<p><img src ="./gifs/custom-theme.gif" width="360" /></p>

### Using same stepper styling across the application
If you have many steppers in your application in different activities/fragments you might want to set a common style in a theme.
Expand Down Expand Up @@ -339,23 +349,26 @@ For an example of how to use it with views please see the sample app.

### Showing an error on tabs if step verification failed
To show an error in the tabbed stepper if step verification fails you need to set `ms_showErrorStateEnabled` attribute to `true`.
<p><img src ="./gifs/error-on-tabs.gif" width="640" height="360"/></p>
<p><img src ="./gifs/error-on-tabs.gif" width="640" /></p>

If you want to keep the error displayed when going back to the previous step you need to also set `ms_showErrorStateOnBackEnabled` to `true`.

### Stepper feedback
It is possible to show stepper feedback for ongoing operations (see [Stepper feedback](https://material.io/guidelines/components/steppers.html#steppers-types-of-steppers)).
To do so you firstly need to set ```ms_stepperFeedbackType``` to one or more of:
* ```tabs``` - shows a progress message instead of the tabs during operation,
* ```content``` - shows a progress bar on top of the steps' content and partially fades the content out during operation,
* ```tabs``` - shows a progress message instead of the tabs during operation.
* ```content_progress``` - shows a progress bar on top of the steps' content.
* ```content_fade``` - partially fades the content out during operation (should not be used together with ```content_overlay```). You can change the default fade amount with `ms_stepperFeedback_contentFadeAlpha` attribute.
* ```content_overlay``` - shows a dimmed overlay over the content during the operation (should not be used together with ```content_fade```). You can change the overlay background with `ms_stepperFeedback_contentOverlayBackground` attribute.
* ```disabled_bottom_navigation``` - disables the buttons in the bottom navigation during operation. In order to see that the buttons are disabled on the bottom navigation bar, make sure that the button colors are assigned using color selectors with a disabled state (see the sample app).
* ```disabled_content_interaction``` - intercepts touch events on the steps' content and ignores them during operation.

The default is ```none``` which does nothing. It is possible to use multiple flags together.

After setting this to show the feedback you need to call ```StepperLayout#showProgress(@NonNull String progressMessage)```
and do hide the progress indicator you need to call ```StepperLayout#hideProgress()```.

<p><img src ="./gifs/stepper-feedback.gif" width="640" height="360"/></p>
<p><img src ="./gifs/stepper-feedback.gif" width="640" /></p>

E.g.
In layout:
Expand Down Expand Up @@ -451,7 +464,7 @@ For advanced styling please see [StepperLayout style attributes](#stepperlayout-

| Attribute name | Format | Description |
| --------------------------------|---------------------------------------------------------------------|-------------|
| *ms_stepperType* | one of `dots`, `progress_bar` or `tabs` | **REQUIRED:** Type of the stepper |
| *ms_stepperType* | one of `dots`, `progress_bar`, `tabs` or `none` | **REQUIRED:** Type of the stepper |
| *ms_backButtonColor* | color or reference | BACK button's text color |
| *ms_nextButtonColor* | color or reference | NEXT button's text color |
| *ms_completeButtonColor* | color or reference | COMPLETE button's text color |
Expand All @@ -470,7 +483,9 @@ For advanced styling please see [StepperLayout style attributes](#stepperlayout-
| *ms_showErrorStateEnabled* | boolean | Flag indicating whether to show the error state. Only applicable for 'tabs' type. False by default. |
| *ms_showErrorStateOnBackEnabled*| boolean | Flag indicating whether to keep showing the error state when user moves back. Only applicable for 'tabs' type. False by default. |
| *ms_tabNavigationEnabled* | boolean | Flag indicating whether step navigation is possible by clicking on the tabs directly. Only applicable for 'tabs' type. True by default. |
| *ms_stepperFeedbackType* | flag(s): `none` or `tabs`, `content` & `disabled_bottom_navigation` | Type(s) of stepper feedback. Can be a combination of `tabs`, `content` & `disabled_bottom_navigation`. Default is `none`.|
| *ms_stepperFeedbackType* | flag(s): `none` or `tabs`, `content_progress`, `content_fade`, `content_overlay`, `disabled_bottom_navigation` & `disabled_content_interaction` | Type(s) of stepper feedback. Can be a combination of `tabs`, `content_progress`, `content_fade`, `content_overlay`, `disabled_bottom_navigation` & `disabled_content_interaction`. Default is `none`.|
| *ms_stepperFeedback_contentFadeAlpha* | float | An alpha value from 0 to 1.0f to be used for the faded out view if `content_fade` stepper feedback type is set. 0.5f by default. |
| *ms_stepperFeedback_contentOverlayBackground* | reference | Background to be used for the overlay on top of the content if `content_overlay` stepper feedback type is set. |
| *ms_showBottomNavigation* | boolean | Flag indicating if the Bottom Navigation bar should be shown on the layout. True by default. |
| *ms_stepperLayoutTheme* | reference | Theme to use for even more custom styling of the stepper layout. It is recommended that it should extend @style/MSDefaultStepperLayoutTheme, which is the default theme used. |
Expand All @@ -486,6 +501,7 @@ A list of `ms_stepperLayoutTheme` attributes responsible for styling of StepperL
| *ms_completeNavigationButtonStyle*| Used by ms_stepCompleteButton in layout/ms_stepper_layout |
| *ms_colorableProgressBarStyle* | Used by ms_stepProgressBar in layout/ms_stepper_layout |
| *ms_stepPagerProgressBarStyle* | Used by ms_stepPagerProgressBar in layout/ms_stepper_layout |
| *ms_stepPagerOverlayStyle* | Used by ms_stepPagerOverlay in layout/ms_stepper_layout |
| *ms_stepTabsScrollViewStyle* | Used by ms_stepTabsScrollView in layout/ms_tabs_container |
| *ms_stepTabsInnerContainerStyle* | Used by ms_stepTabsInnerContainer in layout/ms_tabs_container |
| *ms_stepTabsProgressMessageStyle* | Used by ms_stepTabsProgressMessage in layout/ms_tabs_container|
Expand All @@ -495,7 +511,10 @@ A list of `ms_stepperLayoutTheme` attributes responsible for styling of StepperL
| *ms_stepTabIconBackgroundStyle* | Used by ms_stepIconBackground in layout/ms_step_tab |
| *ms_stepTabTitleStyle* | Used by ms_stepTitle in layout/ms_step_tab |
| *ms_stepTabDividerStyle* | Used by ms_stepDivider in layout/ms_step_tab |


## Changelog
See [changelog](CHANGELOG.md)

## License
Copyright 2016 StepStone Services

Expand Down
9 changes: 6 additions & 3 deletions build.gradle
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
buildscript {
ext.gradleAndroidVersion = '2.3.2'
ext.kotlinVersion = '1.1.2-3'
ext.gradleAndroidVersion = '2.3.3'
ext.kotlinVersion = '1.1.3-2'
ext.bintrayVersion = '1.4'
ext.mavenGradlePluginVersion = '1.4.1'

Expand All @@ -19,6 +19,9 @@ allprojects {
repositories {
jcenter()
mavenCentral()
maven {
url "https://maven.google.com"
}
}
}

Expand All @@ -29,7 +32,7 @@ configure(allprojects) {
androidTargetSdkVersion = 25
androidCompileSdkVersion = 25
androidBuildToolsVersion = '25.0.2'
androidSupportLibraryVersion = '25.3.1'
androidSupportLibraryVersion = '25.4.0'

junitVersion = '4.12'
mockitoVersion = '2.7.21'
Expand Down
3 changes: 0 additions & 3 deletions config/quality/quality.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,6 @@ task findbugs(type: FindBugs,
xml {
destination "$reportsDir/findbugs/findbugs.xml"
}
html {
destination "$reportsDir/findbugs/findbugs.html"
}
}

classpath = files()
Expand Down
Binary file added gifs/none.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion gradle.properties
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,4 @@

POM_GROUP_ID=com.stepstone.stepper
POM_ARTIFACT_ID=material-stepper
POM_VERSION=3.3.0
POM_VERSION=4.0.0
Loading

0 comments on commit 6664a84

Please sign in to comment.