A Library that allows you to implement android stepper in your application.
Steppers are used to display progress of logically separated sections normally referred to as steps. This library was inspired by stepstone-tech Android Material Stepper Library
Code & features mentioned in Getting started are showcased in the sample app.
- Customize labels for bottom navigation buttons
- Change drawable/images for the complete and exit buttons
- Change color for the toolbar and bottom navigation colors
- Change the drawables for the next and previous buttons
- Customize the above settings for individual steps
- Switch between dotted_indicator (Recommended for fewer fragments) and progress bar indicator (Supports many fragments)
- Customize the color for the progress indicator indicator
- Show or hide toolbar/bottom navigation
- minSdk 18
- targetSdk 35 (compileSdk 35)
- Kotlin/JVM target 17
Add JitPack to your repositories, then add the dependency.
Gradle settings (Gradle 7+ recommended):
// settings.gradle
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
maven { url 'https://jitpack.io' }
}
}Older Gradle (root build.gradle):
allprojects {
repositories {
google()
mavenCentral()
maven { url 'https://jitpack.io' }
}
}Add the dependency (use the badge above for the latest version/tag):
dependencies {
implementation "com.github.BlueCodeSystems:neat-android-stepper:1.0.6"
}The layout can only be used as a rootview and should not be nested inside other views.
<?xml version="1.0" encoding="utf-8"?>
<com.nerdstone.neatandroidstepper.core.widget.NeatStepperLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/neatStepperLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:bottom_navigation_background_color="@color/colorBlueGrey"
app:dot_indicator_default_color="@color/colorWhite"
app:dot_indicator_selected_color="@color/colorYellow"
app:indicator_type="dot_indicator" /> See complete list of supported attributes Neat Stepper layout attributes
Step fragments must extend androidx.fragment.app.Fragment
and implement com.nerdstone.neatandroidstepper.core.stepper.Step
class StepOneFragment : Step {
constructor()
constructor(stepModel: StepModel) : super(stepModel)
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
): View? {
val view = inflater.inflate(R.layout.fragment_step_one_fragment, container, false)
val linearLayout = view.findViewById<LinearLayout>(R.id.fragmentLinearLayout)
for (i in 1..200) {
val text = TextView(context)
text.setPadding(16, 16, 16, 16)
text.text = "Current count $i"
linearLayout.addView(text)
}
return view
}
override fun verifyStep(): StepVerificationState {
TODO("not implemented")
}
override fun onSelected() {
TODO("not implemented")
}
override fun onError(stepVerificationState: StepVerificationState) {
TODO("not implemented")
}
} Activity must extend androidx.fragment.app.FragmentActivity
You can also choose to implement stepper callback methods declared in com.nerdstone.neatandroidstepper.core.domain.StepperActionson the activity . The callback methods are called anytime the user interacts with the stepper for instance when the user clicks a button. Use the callbacks to handle any operations like saving data to database, requesting resource etc.
Call the method setUpViewWithAdapter of the stepper layout and pass the list of fragments to the constructor of com.nerdstone.neatandroidstepper.core.stepper.StepperPagerAdapter. This will set up the stepper view with the provided list of Fragments.
class MainActivity : FragmentActivity(), StepperActions {
lateinit var neatStepperLayout: NeatStepperLayout
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
neatStepperLayout = findViewById(R.id.neatStepperLayout)
neatStepperLayout.stepperActions = this
neatStepperLayout.setUpViewWithAdapter(
StepperPagerAdapter(
supportFragmentManager,
mutableListOf(
StepOneFragment(StepModel.Builder().title("Step Sample").subTitle("One").build()),
StepOneFragment(StepModel.Builder().title("Step Sample").subTitle("Two").build()),
StepOneFragment(StepModel.Builder().title("Step Sample").subTitle("Three").build())
)
)
)
}
override fun onStepError(stepVerificationState: StepVerificationState) {
}
override fun onButtonNextClick(step: Step) {
}
override fun onButtonPreviousClick(step: Step) {
}
override fun onStepComplete(step: Step) {
Toast.makeText(this, "Stepper completed", Toast.LENGTH_SHORT).show()
}
override fun onExitStepper() {
val confirmCloseDialog = AlertDialog.Builder(this)
confirmCloseDialog.apply {
setTitle("Confirm close")
setMessage("All the unsaved data will get lost if you quit")
setPositiveButton("Exit") { _, _ -> finish() }
setNegativeButton("Cancel") { _, _ -> return@setNegativeButton }
create()
}
confirmCloseDialog.show()
}
override fun onCompleteStepper() {
Toast.makeText(this, "Completed entire step", Toast.LENGTH_SHORT).show()
}
} In case you need different labels for the Next and Back buttons or if you want to change the images for the exit and complete button you can use the StepperModel Builder class. Alternative you can define the desired attributes on the xml layout.
To do this programmatically instantiate the StepperModel class using its builder and update the stepperModel property of NeatStepperLayout with the new class you just created.
neatStepperLayout = findViewById(R.id.neatStepperLayout)
val stepperModel: StepperModel= StepperModel.Builder()
.completeButtonLabel("DONE")
.nextButtonLabel("Foward")
.previousButtonLabel("Back")
.nextButtonDrawableResource(R.drawable.ic_arrow_forward)
.previousButtonDrawableResource(R.drawable.ic_arrow_back)
.toolbarColorResource(R.color.colorBlueGrey)
.changeDotIndicatorColors(R.color.colorWhite, R.color.colorYellow)
.bottomNavigationColorResource(R.color.colorBlueGrey)
.indicatorType(StepperModel.IndicatorType.DOT_INDICATOR)
.build()
neatStepperLayout.stepperModel = stepperModel In layout:
<?xml version="1.0" encoding="utf-8"?>
<com.nerdstone.neatandroidstepper.core.widget.NeatStepperLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/neatStepperLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:bottom_navigation_background_color="@color/colorBlueGrey"
app:dot_indicator_default_color="@color/colorWhite"
app:dot_indicator_selected_color="@color/colorYellow"
app:toolbar_color="@color/colorBlueGrey"
app:next_button_label="Forwad"
app:previous_button_label="Back"
app:next_button_drawable_end="@drawable/ic_arrow_forward"
app:previous_button_drawable_start="@drawable/ic_arrow_back"
app:complete_button_label="DONE"
app:indicator_type="dot_indicator" /> You can also customize the appearance of individual steps for instance change the the bottom navigation background color or even change the labels for the buttons per step. You can also pass the title and subTitle (optional) properties for the steps. This can be done through the step's Builder class com.nerdstone.neatandroidstepper.core.model.StepModel; passed to as parameter to the Fragment implementing com.nerdstone.neatandroidstepper.core.stepper.Step
//...
neatStepperLayout.setUpViewWithAdapter(
StepperPagerAdapter( supportFragmentManager,
mutableListOf(
StepOneFragment(StepModel.Builder()
.title("Step Sample")
.subTitle("One")
.bottomNavigationColorResource(R.color.colorBrown)
.build()),
StepOneFragment(StepModel.Builder()
.title("Step Sample")
.subTitle("Two")
.bottomNavigationColorResource(R.color.colorDarkBlue)
.build()),
StepOneFragment(StepModel.Builder()
.title("Step Sample")
.subTitle("Three")
.bottomNavigationColorResource(R.color.colorBlack)
.build())
)
)
)
//...
Bottom navigation bar and toolbar are shown by default. To
hide the bottom navigation bar you can do that by either setting
the show_bottom_navigation_buttons attribute in XML to false
or by setting it programmatically by calling StepperModel.Builder()#showBottomNavigationButtons(boolean)
with false.
A list of base Neat Stepper layout attributes used for UI configuration.
| Attribute name | Format | Description |
|---|---|---|
| previous_button_label | string | Label for the previous button |
| complete_button_label | string | Label for the complete button |
| toolbar_color | color | Android resource color for ToolBar Defaults to #3F51B5 |
| bottom_navigation_background_color | color | Android color resource id for bottom navigation bar defaults to android.R.color.transparent |
| next_button_drawable_end | reference | Image drawable for the next button |
| previous_button_drawable_start | reference | Image shown next to the previous button |
| exit_button_drawable | reference | Image for the button used to exit the stepper view |
| complete_button_drawable | reference | Image for the complete button available on the toolbar |
| show_bottom_navigation_buttons | boolean | Flag to indicate whether to display the bottom navigation bar |
| show_toolbar | boolean | |
| show_progress_indicator | boolean | Use to hide/show progress indicator |
| indicator_type | enum: either of dot_indicator progress_bar_indicator |
Used for choosing the type of progress indicator |
| dot_indicator_default_color | color | Android color resource applied on the unselected dots in the dot indicator |
| dot_indicator_selected_color | color | Android color resource set on the selected dot of the dot indicator |
All contributions are welcome and encouraged!
If you wish to contribute please create an issue first explaining the proposed changes or fixes.