Top Related Projects
Android-StepsView
Quick Overview
The stepper-indicator
project is a lightweight and customizable Android library that provides a step-by-step progress indicator. It can be used to display the progress of a multi-step process, such as a signup flow or a tutorial.
Pros
- Lightweight and Customizable: The library is lightweight and provides a wide range of customization options, allowing developers to easily integrate it into their Android applications.
- Smooth Animation: The library offers smooth animations when transitioning between steps, providing a polished user experience.
- Flexible Step Configuration: Developers can easily configure the number of steps, the text and icon for each step, and the overall appearance of the indicator.
- Accessibility Support: The library includes support for accessibility features, making it easier to integrate into applications that cater to users with disabilities.
Cons
- Limited Functionality: The library is focused solely on providing a step-by-step progress indicator, and does not include additional features or functionality beyond this core purpose.
- Dependency on Android SDK: The library is designed specifically for Android and requires the use of the Android SDK, which may limit its cross-platform compatibility.
- Potential Performance Issues: Depending on the complexity of the application and the number of steps being displayed, the library may have performance implications, especially on older or lower-end devices.
- Lack of Extensive Documentation: While the project includes some documentation, it may not be as comprehensive as some developers would prefer, which could make it more challenging to integrate into complex projects.
Code Examples
Here are a few examples of how to use the stepper-indicator
library in your Android application:
- Initializing the Stepper Indicator:
val stepperIndicator = StepperIndicator(context)
stepperIndicator.setStepCount(5) // Set the number of steps
- Configuring the Stepper Indicator:
stepperIndicator.setCurrentStep(2) // Set the current step
stepperIndicator.setCompletedCircleColor(Color.GREEN) // Set the color of completed steps
stepperIndicator.setUncompletedCircleColor(Color.GRAY) // Set the color of uncompleted steps
stepperIndicator.setStepNumberTextSize(16f) // Set the text size of the step numbers
- Handling Step Changes:
stepperIndicator.addStepChangeListener { currentStep ->
// Handle the change in the current step
// (e.g., update the UI, load the next screen)
}
- Integrating the Stepper Indicator into a Layout:
<com.badoualy.stepperindicator.StepperIndicator
android:id="@+id/stepper_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp" />
Getting Started
To get started with the stepper-indicator
library, follow these steps:
- Add the library to your project's
build.gradle
file:
dependencies {
implementation 'com.badoualy:stepper-indicator:1.0.7'
}
- Create a
StepperIndicator
instance in your Android activity or fragment:
val stepperIndicator = StepperIndicator(this)
stepperIndicator.setStepCount(5) // Set the number of steps
- Customize the appearance and behavior of the stepper indicator as needed:
stepperIndicator.setCurrentStep(2) // Set the current step
stepperIndicator.setCompletedCircleColor(Color.GREEN) // Set the color of completed steps
stepperIndicator.setUncompletedCircleColor(Color.GRAY) // Set the color of uncompleted steps
stepperIndicator.setStepNumberTextSize(16f) // Set the text size of the step numbers
- Add the
StepperIndicator
to your layout:
<com.badoualy.stepperindicator.StepperIndicator
android:id="@+id/stepper_indicator
Competitor Comparisons
Android-StepsView
Pros of Android-StepsView
- More customizable appearance with options for line color, text size, and step size
- Supports both horizontal and vertical orientations
- Includes animation options for step transitions
Cons of Android-StepsView
- Less actively maintained (last update in 2017)
- Fewer stars and forks on GitHub, indicating potentially less community support
- Limited documentation and usage examples
Code Comparison
Android-StepsView:
StepsView mStepsView = (StepsView) findViewById(R.id.stepsView);
mStepsView.setLabels(new String[]{"Step 1", "Step 2", "Step 3"})
.setBarColorIndicator(Color.BLUE)
.setProgressColorIndicator(Color.GREEN)
.setLabelColorIndicator(Color.BLACK)
.drawView();
stepper-indicator:
StepperIndicator indicator = (StepperIndicator) findViewById(R.id.stepper_indicator);
ViewPager pager = (ViewPager) findViewById(R.id.pager);
indicator.setViewPager(pager);
// or keep last page as "end page"
indicator.setViewPager(pager, pager.getAdapter().getCount() - 1);
Both libraries offer easy-to-use APIs for implementing step indicators in Android applications. Android-StepsView provides more customization options out of the box, while stepper-indicator focuses on simplicity and integration with ViewPager. The choice between the two depends on specific project requirements and desired features.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Stepper indicator
Designed by the awesome https://dribbble.com/LeslyPyram :)
iOS (swift) version available at https://github.com/chenyun122/StepIndicator
Sample
You can checkout the Sample Application on the Play Store
Setup
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.badoualy:stepper-indicator:1.0.7'
Now go do some awesome stuff!
Usage
<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 |
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);
Licence
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.
Top Related Projects
Android-StepsView
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot