Simple Step Bar

General

Category
Free
Tag
Wizards
License
N/A
Min SDK
21 (Android 5.0–5.0.2 Lollipop)
Registered
Mar 17, 2018
Favorites
1
Link
https://github.com/roubertedgar/step-bar
See also
Material Design Steppers
WizarDroid
Stepper
WizardPager
AWizard

Additional

Language
Kotlin
Version
1.0.3 (Feb 25, 2019)
Created
Feb 18, 2018
Updated
Aug 7, 2019
Owner
Roubert Edgar (roubertedgar)
Contributor
Roubert Edgar (roubertedgar)
1
Activity
Badge
Generate
Download
Source code
APK file

Commercial

Step Bar

With this library you can have a step bar that allows you to manage multiple fragment steps in a simple way.


Implementation of view

Here you have to give a view pager to the step bar. After complete all steps, the step bar will call the onComplete of your onCompleteListener. It gives you a bundle with all values of your steps. You can see an simple implementation of it below:

    override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContentView(R.layout.step_container_activity)

          val steps = listOf<Step>(FirstStepFragment(), SecondStepFragment())

          viewPager.adapter = SampleStepAdapter(steps, supportFragmentManager)
          stepBar.setViewPager(viewPager)
      }

Getting results

To get the results after done all steps, you can use:

  //After compleet the stpes, onComplete will be called
  stepBar.setOnCompleteListener({
      val intent = Intent(this,ResultActivity::class.java)
      intent.putExtras(it)
      startActivity(intent)

  //Where 'it' is a bundle that concat all bundles of 'value' variable, returned by each step
  })

The Fragment

All the step fragments has to Extends support.v4.app.Fragment and implements Step:

class FirstStepFragment : Fragment(), Step {

with this, you have to provide a implementation to var value:Bundle, like this:

  override var value: Bundle
  get() = getValues()
  set(value) {}

  private fun getValues(): Bundle {
      val bundle = Bundle()
      bundle.putString("keyStepExample", "some value")
      return bundle
  }

//this value variable will be concat on done all steps and returned to
//onCompleteListener that you set in stepBar.setOnCompleteListener()

And implements invalidateStep method to, like this:

    override fun invalidateStep(invalidate: (isValid: Boolean?) -> Unit{
        invalidate(true) //this step will be ever valid
     }

For example, if you want to validate the step checking if some edit text is empty or not, you could do this:

    override fun invalidateStep(invalidate: (isValid: Boolean?) -> Unit) {
        this.invalidate = invalidate

        validate() //This is for validate when step back, it keeps the previous valid step valid
    }

    private fun validate() = invalidate(editText?.text?.let { !it.isEmpty() })

StepAdapter

To work with step bar, your adapter has to extends the StepAdapter and implements getCount and getStep

class SampleStepAdapter constructor(private val steps: List<Step>, fm:FragmentManager) : StepAdapter(fm) {

    override fun getCount(): Int = steps.size

    override fun getStep(position: Int): Step = steps[position]
}

Customize

For now you can customize 3 attributes of step bar.

First, import custom attributes

 xmlns:step="http://schemas.android.com/apk/res-auto"

buttons_tint: this attribute changes the drawable color of back and next step buttons

<com.steps.StepBar
      android:id="@+id/stepBar"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      step:buttons_tint="@color/colorAccent"/>

done_text_tint: Using this, you can customize the color of done button text

<com.steps.StepBar
        android:id="@+id/stepBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        step:done_text_tint="@color/colorPrimary"/>

if you don't customize the button text tint, the tint of done text will be the same of back and next step buttons

done_button_text : You can change the text of done button, that comes by default as "DONE"

<com.steps.StepBar
        android:id="@+id/stepBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        step:done_button_text="Some other text" />