Adv

Android Steppers

Steppers display progress through a sequence by breaking it up into multiple logical and numbered steps. Android does not provide a stepper widget by default. Steppers allow you go through various stages in a predefined order. They are very common in the web especially in creation of registeration forms.

If you want design guidelines for a stepper widget find it here.

Go ahead and post some stepper creation code or libraries as examples below.

Share

Related Concepts

Adv

4 Examples

  1. VerticalStepperForm

    Vertical Stepper Form Library for Android. It follows Google Material Design guidelines.

    Installation

    Install this library via the following statement:

    dependencies {
        implementation 'com.ernestoyaquello.stepperform:vertical-stepper-form:2.3.0'
    }

    Usage

    Start by adding it in your layout:

    <!-- new_user_form_activity.xml -->
    <ernestoyaquello.com.verticalstepperform.VerticalStepperFormView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/stepper_form"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:form_circle_background_color="@color/colorPrimary"
        app:form_next_button_background_color="@color/colorPrimary"
        app:form_next_button_pressed_background_color="@color/colorPrimaryDark"/>

    Define a step by extending the Step class:

    public class UserNameStep extends Step<String> {
    
        private EditText userNameView;
    
        public UserNameStep(String stepTitle) {
            super(stepTitle);
        }
    
        @Override
        protected View createStepContentLayout() {        
            // Here we generate the view that will be used by the library as the content of the step.
            // In this case we do it programmatically, but we could also do it by inflating an XML layout.
            userNameView = new EditText(getContext());
            userNameView.setSingleLine(true);
            userNameView.setHint("Your Name");
            ...
            userNameView.addTextChangedListener(new TextWatcher() {
                ...
                @Override
                public void onTextChanged(CharSequence s, int start, int before, int count) {                
                    // Whenever the user updates the user name text, we update the state of the step.
                    // The step will be marked as completed only if its data is valid, which will be
                    // checked automatically by the form with a call to isStepDataValid().
                    markAsCompletedOrUncompleted(true);
                }
            });
    
            return userNameView;
        }
        
        @Override
        protected IsDataValid isStepDataValid(String stepData) {        
            // The step's data (i.e., the user name) will be considered valid only if it is longer than 
            // three characters. In case it is not, we will display an error message for feedback.
            // In an optional step, you should implement this method to always return a valid value.
            boolean isNameValid = stepData.length() >= 3;
            String errorMessage = !isNameValid ? "3 characters minimum" : "";
    
            return new IsDataValid(isNameValid, errorMessage);
        }
    
        @Override
        public String getStepData() {        
            // We get the step's data from the value that the user has typed in the EditText view.
            Editable userName = userNameView.getText();        
            return userName != null ? userName.toString() : "";
        }
    
        @Override
        public String getStepDataAsHumanReadableString() {        
            // Because the step's data is already a human-readable string, we don't need to convert it.
            // However, we return "(Empty)" if the text is empty to avoid not having any text to display.
            // This string will be displayed in the subtitle of the step whenever the step gets closed.
            String userName = getStepData();        
            return !userName.isEmpty() ? userName : "(Empty)";
        }
    
        @Override
        protected void onStepOpened(boolean animated) {        
            // This will be called automatically whenever the step gets opened.
        }
    
        @Override
        protected void onStepClosed(boolean animated) {        
            // This will be called automatically whenever the step gets closed.
        }
        
        @Override
        protected void onStepMarkedAsCompleted(boolean animated) {
            // This will be called automatically whenever the step is marked as completed.
        }
    
        @Override
        protected void onStepMarkedAsUncompleted(boolean animated) {
            // This will be called automatically whenever the step is marked as uncompleted.
        }
    
        @Override
        public void restoreStepData(String stepData) {        
            // To restore the step after a configuration change, we restore the text of its EditText view.
            userNameView.setText(stepData);
        }
    }

    Then setup form and initialize it:

    public class CreateUserAccountActivity extends Activity implements StepperFormListener {
    
        private UserNameStep userNameStep;
        private UserEmailStep userEmailStep;
        private UserAgeStep userAgeStep;
        
        private VerticalStepperFormView verticalStepperForm;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.new_user_form_activity);
    
            // Create the steps.
            userNameStep = new UserNameStep("User Name");
            userEmailStep = new UserEmailStep("User Email");
            userAgeStep = new UserAgeStep("User Age");
    
            // Find the form view, set it up and initialize it.
            verticalStepperForm = findViewById(R.id.stepper_form);
            verticalStepperForm
                .setup(this, userNameStep, userEmailStep, userAgeStep)
                .init();
        }
    
        @Override
        public void onCompletedForm() {
            // This method will be called when the user clicks on the last confirmation button of the 
            // form in an attempt to save or send the data.
        }
    
        @Override
        public void onCancelledForm() {
            // This method will be called when the user clicks on the cancel button of the form.
        }
    }

     

    Demo

    Here is the demo:

    Find comlete documentation and example here.

  2. Adv
  3. Android Material Stepper

    Here is another library that allows you to use Material steppers inside Android applications.

    • color customisation of individual widgets inside of the stepper via View attributes or a style from a theme
    • custom texts of individual widgets inside of the stepper via View attributes or a style from a theme
    • embedding the stepper anywhere in the view hierarchy and changing the stepper type for various device configurations, e.g. phone/tablet, portrait/landscape
    • step validation
    • use with Fragments or Views
    • showing errors in tabs
    • showing stepper feedback for ongoing operations.

    Installation

    This library is hosted in jcenter. You install via the following statement:

    implementation 'com.stepstone.stepper:material-stepper:4.3.1'

    Usage

    First add the following code in your layout:

    <?xml version="1.0" encoding="utf-8"?>
    <com.stepstone.stepper.StepperLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/stepperLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:ms_stepperType="progress_bar" />

    To create a step, you extend the  fragment class and implement the Step interface:

    public class StepFragmentSample extends Fragment implements Step {
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View v = inflater.inflate(R.layout.step, container, false);
    
            //initialize your UI
    
            return v;
        }
    
        @Override
        public VerificationError verifyStep() {
            //return null if the user can go to the next step, create a new VerificationError instance otherwise
            return null;
        }
    
        @Override
        public void onSelected() {
            //update UI when selected
        }
    
        @Override
        public void onError(@NonNull VerificationError error) {
            //handle error inside of the fragment, e.g. show error on EditText
        }
        
    }

     

    Then you extend the AbstractFragmentStepAdapter class:

    public static class MyStepperAdapter extends AbstractFragmentStepAdapter {
    
        public MyStepperAdapter(FragmentManager fm, Context context) {
            super(fm, context);
        }
    
        @Override
        public Step createStep(int position) {
            final StepFragmentSample step = new StepFragmentSample();
            Bundle b = new Bundle();
            b.putInt(CURRENT_STEP_POSITION_KEY, position);
            step.setArguments(b);
            return step;
        }
    
        @Override
        public int getCount() {
            return 3;
        }
    
        @NonNull
        @Override
        public StepViewModel getViewModel(@IntRange(from = 0) int position) {
            //Override this method to set Step title for the Tabs, not necessary for other stepper types
            return new StepViewModel.Builder(context)
                    .setTitle(R.string.tab_title) //can be a CharSequence instead
                    .create();
        }
    }

    Then finally in your activity:

    public class StepperActivity extends AppCompatActivity {
    
        private StepperLayout mStepperLayout;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
            mStepperLayout = (StepperLayout) findViewById(R.id.stepperLayout);
            mStepperLayout.setAdapter(new MyStepperAdapter(getSupportFragmentManager(), this));
        }
    }

     

     

    Demo

    Here is demo:

    Find more including the full example here.

  4. Adv
  5. MaterialStepperView

    This is a strictly vertical stepper for android. It supports android API 17+.

    Installation

    First add the following in the root level build gradle:

    allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

    Then install it:

    implementation 'moe.feng:MaterialStepperView:0.2.5'

     

    Demo

    Example

     

    Find example here.

  6. Adv
  7. MaterialStepper

    This is a library that provides a view instead of activity classes, thus making it simple and lightweight. Here are some of its features:

    1. You can customize the functionality of **Next**, **Back** and **Skip** buttons and decide manually when to go to next/ previous step.
    2.  You can visually customize **Next**, **Back** and **Skip** buttons for each step individually.
    3. You can customize the TextColor, CircleColor, IconDrawable of the **StepTab** in top bar (StatusBar)

    Installation

    Install it:

    implementation 'com.sonu.libraries.materialstepper:material-stepper:0.0.4'

    Then add the stepper widget in your layout:

    <com.sonu.libraries.materialstepper.MaterialStepper
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/materialStepper"/>

    Every step you create needs a corresponding Fragment class. You need to make those fragments by extending the StepFragment class and overriding a couple of methods.

     

    import com.sonu.libraries.materialstepper.StepFragment;
    /*
     * N = 1, 2, 3...
     */
    public class SampleFragmentN extends StepFragment {
    
        public SampleFragmentN(){
            //do anything you wan't in the constructor
        }
    
        /*
         * return the title of the step in this method
         * this title will be shown in the Tab of your step (StepTab) in the Top Bar (StatusBar) 
         */
        @Override
        public String getStepTitle() {
            return "Title of step";
        }
    
        /*
         * this method decides if the user can go back from this step or not
         * this method toggles the visiblity of back button in the bottom bar (NavigationBar)
         * return true for VISIBLE and false for GONE
         */
        @Override
        public boolean canGoBack() {
            return true;
        }
    
        /*
         * this method decides if the user can skip this step or not
         * this method toggles the visiblity of skip button in the bottom bar (NavigationBar)
         * return true for VISIBLE and false for GONE
         */
        @Override
        public boolean canSkip() {
            return true;
        }
    
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            View v = inflater.inflate(R.layout.fragment_sample, container, false);
            return v;
        }
    }

     

    Then finally in your activity:

     

    public class MainActivity extends AppCompatActivity {
    
        MaterialStepper materialStepper;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            materialStepper = (MaterialStepper) findViewById(R.id.materialStepper);
            
            //adding fragment manager for ViewPager Adapter
            materialStepper.setFragmentManager(getSupportFragmentManager());
            
            //adding steps
            materialStepper.addStep(new SampleFragment1());
            materialStepper.addStep(new SampleFragment2());
            materialStepper.addStep(new SampleFragment3());
            
            //adding functionality when NEXT button is clicked on last step
            materialStepper.setOnLastStepNextListener(new OnLastStepNextListener() {
                @Override
                public void onLastStepNext() {
                    //some action
                }
            });
        }
    
        @Override
        public void onBackPressed() {
            //calling onBackPressed for handling back presses in MaterialStepper View
            //onBackPressed() returns step index of currently displayed step
            //if the return value is 0 then call super for default functionality
            if( materialStepper.onBackPressed() == 0) {
                super.onBackPressed();
            }
        }
    }

     

    The library and source code are here.




Share an Example

Share an Example

Browse
What is the capital of Egypt? ( Cairo )