Designed by the awesome https://dribbble.com/LeslyPyram :)
iOS (swift) version available at https://github.com/chenyun122/StepIndicator
First, add jitpack in your build.gradle at the end of repositories:
repositories {
// ...
maven { url "https://jitpack.io" }
}Then, add the library dependency:
compile 'com.github.saleniuk:stepper-indicator:2.0.0-alpha'Now go do some awesome stuff!
<com.badoualy.stepperindicator.StepperIndicator
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:stpi_stepCount="5"/>Attributes:
| Name | Description | Default value |
|---|---|---|
| stpi_animDuration | duration of the line tracing animation | 250 ms |
| stpi_stepCount | number of pages/steps | |
| stpi_circleColor | color of the stroke circle | #b3bdc2 (grey) |
| stpi_circleRadius | radius of the circle | 10dp |
| stpi_circleStrokeWidth | width of circle's radius | 4dp |
| stpi_indicatorColor | color for the current page indicator | #00b47c (green) |
| stpi_indicatorRadius | radius for the circle of the current page indicator | 4dp |
| stpi_lineColor | color of the line between indicators | #b3bdc2 (grey) |
| stpi_lineDoneColor | color of a line when step is done | #00b47c (green) |
| stpi_lineStrokeWidth | width of the line stroke | 2dp |
| stpi_lineMargin | margin at each side of the line | 5dp |
| stpi_showDoneIcon | show the done check icon or not | true |
| stpi_doneIconDrawable | drawable of the done check icon | |
| stpi_useBottomIndicator | display the indicator for the current step at the bottom instead of inside bullet | false |
| stpi_useBottomIndicatorWithStepColors | use the same color for the bottom indicator as the step color | false |
| stpi_bottomIndicatorHeight | set the height for the bottom indicator component | 3dp |
| stpi_bottomIndicatorWidth | set the width for the bottom indicator component | 50dp |
| stpi_bottomIndicatorMarginTop | set the top margin for the bottom indicator component | 10dp |
| stpi_stepsCircleColors | use multiple colors for each step (array of colors with the size at least the same size as the stpi_stepCount value) | |
| stpi_stepsIndicatorColors | use multiple colors for each step indicator (array of colors with the size at least the same size as the stpi_stepCount value) | |
| stpi_labels | supply an array of strings to show labels for every step indicator | |
| stpi_showLabels | Show labels for each step indicator. Useful for timelines or checkpoints. | false |
| stpi_labelMarginTop | Top margin for the labels | 2dp |
| stpi_labelSize | Size for the labels | 12sp |
| stpi_labelColor | Color for the labels | android:textColorSecondary defined in your project |
Added attributes:
| Name | Description | Default value |
|---|---|---|
| stpi_expandScale | the size of the zoom during the animation | 1.3 |
| stpi_circleStyle | style of circle: 0 - FILL, 1 - STROKE | 0 - FILL |
| stpi_indicatorStrokeWidth | stroke width of current page indicator | 4dp |
| stpi_indicatorStyle | style of the circle of the current page indicator: 0 - FILL, 1 - STROKE | 0 - FILL |
| stpi_useOnlyIndicatorStyle | if set to true then uses current step indicator styling for cleared steps | true |
| stpi_doneColor | color for the cleared page indicator | #00b47c (green) |
| stpi_doneStrokeWidth | stroke width of cleared page indicator | 4dp |
| stpi_doneRadius | radius for the circle of the cleared page indicator | 12dp |
| stpi_doneStyle | style of the circle of the cleared page indicator: 0 - FILL, 1 - STROKE | 0 - FILL |
| stpi_showStepNumber | display text number for each step (replaced the showStepNumberInstead attribute) to allow displaying both current step indicator bullet and number | false |
| stpi_showDoneStepNumber | show page numbers also on cleared page indicators | false |
| stpi_stepNumberColor | color of page numbers | #00b47c (green) |
| stpi_stepNumberSize | size of page numbers text | 12sp |
| stpi_doneIconSize | size of done icon | 18dp |
| stpi_stepsDoneColors | use multiple colors for each cleared step indicator (array of colors with the size at least the same size as the stpi_stepCount value) | |
| stpi_stepsNumberColors | use multiple colors for each number (array of colors with the size at least the same size as the stpi_stepCount value) |
indicator.setViewPager(pager);
// or keep last page as "end page"
indicator.setViewPager(pager, pager.getAdapter().getCount() - 1); //
// or manual change
indicator.setStepCount(3);
indicator.setCurrentStep(2);The MIT License (MIT)
Copyright (c) 2016 Yannick Badoual
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.