Question Detail

Installation and usage

1. To incorporate the library in your task, to begin with, include it by means of Gradle:

   dependencies {
   	compile 'com.ernestoyaquello.stepperform:vertical-stepper-form:0.9.9'
   }
   

2. Now, you have to add a VerticalStepperFormLayout view to your activity layout, which will contain the vertical stepper form. For configuration purposes, it is prescribed that you don't put whatever else than this view in your activity design (see the code below).

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    tools:context=".StepperExampleActivity">

    <ernestoyaquello.com.verticalstepperform.VerticalStepperFormLayout
        android:id="@+id/vertical_stepper_form"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"/>

</RelativeLayout>

1. In onCreate(), you should discover the view and introduce the form:

private VerticalStepperFormLayout verticalStepperForm;
...

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.your_activity_layout);
    
    String[] mySteps = {"UserID", "Email", "Phone"};
    int colorPrimary = ContextCompat.getColor(getApplicationContext(), R.color.colorPrimary);
    int colorPrimaryDark = ContextCompat.getColor(getApplicationContext(), R.color.colorPrimaryDark);
    
    // Finding the view
    verticalStepperForm = (VerticalStepperFormLayout) findViewById(R.id.vertical_stepper_form);
        
    // Setting up and initializing the form
    VerticalStepperFormLayout.Builder.newInstance(verticalStepperForm, mySteps, this, this)
        .primaryColor(colorPrimary)
        .primaryDarkColor(colorPrimaryDark)
        .displayBottomNavigation(true) // It is true by default, so in this case this line is not necessary
        .init();
    
    ...
    
}

NOTE: In this step, you may need to import ernestoyaquello.com.verticalstepperform.*.

1. Finally, edit your activity class to make it implement.VerticalStepperForm Then, implement the methods,createStepContentView() onStepOpening() and.sendData()

Implementing the methods

createStepContentView()

This method will be called automatically by the system to generate the view of the content of each step. You have to implement the generation of the corresponding step view and return it:

@Override
public View createStepContentView(int stepNumber) {
	View view = null;
	switch (stepNumber) {
		case 0:
			view = createNameStep();
			break;
		case 1:
			view = createEmailStep();
			break;
		case 2:
			view = createPhoneNumberStep();
			break;
	}
	return view;
}

private View createNameStep() {
	// Here we generate programmatically the view that will be added by the system to the step content layout
	name = new EditText(this);
	name.setSingleLine(true);
	name.setHint("Your name");
	...
	return name;
}

private View createEmailStep() {
	// In this case we generate the view by inflating a XML file
	LayoutInflater inflater = LayoutInflater.from(getBaseContext());
	LinearLayout emailLayoutContent = (LinearLayout) inflater.inflate(R.layout.email_step_layout, null, false);
	email = (EditText) emailLayoutContent.findViewById(R.id.email);
	...
	return emailLayoutContent;
}

private View createPhoneNumberStep() {
	LayoutInflater inflater = LayoutInflater.from(getBaseContext());
	LinearLayout phoneLayoutContent = (LinearLayout) inflater.inflate(R.layout.phone_step_layout, null, false);
	...
	return phoneLayoutContent;
}

onStepOpening()

This method will be called each time a step is open, so it can be utilized for checking conditions. It is critical that the catch "Continue" is incapacitated of course in each step, so it will just appear after certain client activities (for instance, after the presentation of a right name or email):

@Override
public void onStepOpening(int stepNumber) {
	switch (stepNumber) {
		case 0: 
			checkName();
			break;
		case 1:
			checkEmail();
			break;
		case 2: 
			// As soon as the phone number step is open, we mark it as completed in order to show the "Continue"
			// button (We do it because this field is optional, so the user can skip it without giving any info)
			verticalStepperForm.setStepAsCompleted(2);
			// In this case, the instruction above is equivalent to: 
			// verticalStepperForm.setActiveStepAsCompleted();
			break;
	}
}

private void checkName() {
	if(name.length() >= 3 && name.length() <= 40) {
		verticalStepperForm.setActiveStepAsCompleted();
	} else {
		// This error message is optional (use null if you don't want to display an error message)
		String errorMessage = "The name must have between 3 and 40 characters";
		verticalStepperForm.setActiveStepAsUncompleted(errorMessage);
	}
}

private void checkEmail() {
	...
}

NOTE: You can likewise utilize this method to trigger a few activities at whatever point a specific step is open.

sendData()

In this method, you have to implement the sending of the data.

Screen rotation

This library handles screen rotation by saving and restoring the state of the form. Therefore, if you want to use onSaveInstanceState() and onRestoreInstanceState(), don't forget to call super() at the end:

@Override
public void onSaveInstanceState(Bundle savedInstanceState) {
	...
	super.onSaveInstanceState(savedInstanceState);
}

@Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
	...
	super.onRestoreInstanceState(savedInstanceState);
}