Implementing Horizontal Stepper In Open Event Orga App
Currently while event creation the user has to fill a form, all of which is present on a single screen. This process is a bit cumbersome. To improve the user interface and make the app more interactive, a horizontal stepper is implemented in the app. Implementing this would also make it consistent with the frontend project. Horizontal stepper actually divides the current fragment into 3 different fragments and the contents are distributed over all of them. The user can navigate through these fragments either by swiping or by using NEXT and PREV button which are present on the screen.
To implement this the following steps are taken:
- I am using the following library in the app. This is added to the build.gradle file and sync is done.
//stepper implementation ‘com.github.badoualy:stepper-indicator:1.0.7’ |
- Now changes need to be made to the CreateEventActivity which acts as the base activity for the 3 fragments which we will be implementing later. We hover over to the activity_create.xml where we will add the Stepper tag and the viewpager. Following code is written there.
<android.support.v4.view.ViewPager android:id=“@+id/pager” android:layout_width=“match_parent” android:layout_height=“wrap_content” android:layout_alignParentLeft=“true” android:layout_alignParentStart=“true” android:layout_alignParentTop=“true” android:layout_marginTop=“100dp” /> <com.badoualy.stepperindicator.StepperIndicator android:id=“@+id/stepper_indicator” android:layout_width=“match_parent” android:layout_height=“wrap_content” android:layout_marginLeft=“16dp” android:layout_marginRight=“16dp” android:layout_marginTop=“32dp” app:stpi_animDuration=“200” app:stpi_circleColor=“@color/blue_200” app:stpi_circleRadius=“10dp” app:stpi_indicatorColor=“@color/green_500” app:stpi_labels=“@array/stepLabels” app:stpi_showDoneIcon=“true” /> |
- To add the NEXT, PREVIOUS and SUBMIT buttons on the screen for navigation we will add the following code.
<LinearLayout android:layout_width=“match_parent” android:layout_height=“wrap_content” android:layout_gravity=“bottom” android:orientation=“horizontal” android:background=“@color/color_accent”> <Button android:id=“@+id/btn_prev” android:layout_width=“0dp” android:layout_weight=“0.5” android:layout_height=“wrap_content” android:background=“@color/color_accent” android:text=“Previous” android:layout_gravity=“bottom|start” android:textColor=“@android:color/white” /> <Button android:id=“@+id/btn_next” android:layout_width=“0dp” android:layout_height=“wrap_content” android:background=“@color/color_accent” android:text=“Next” android:layout_weight=“0.5” android:layout_gravity=“bottom” android:textColor=“@android:color/white” /> <Button android:id=“@+id/btn_submit” android:layout_width=“0dp” android:layout_height=“wrap_content” android:background=“@color/color_accent” android:text=“Create” android:layout_weight=“0.5” android:visibility=“gone” android:layout_gravity=“bottom” android:textColor=“@android:color/white” /> </LinearLayout> |
- A pager adapter class is made which extends the FragmentPagerAdapter. This class handles the position of the adapter and the fragments which need to be displayed at each step. All this is handled in the getItem( ) method.
public class PagerAdapter extends FragmentPagerAdapter { public PagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { switch (position) { case 0: return EventDetailsStepOne.newInstance(); case 1: return EventDetailsStepTwo.newInstance(); case 2: return EventDetailsStepThree.newInstance(); default: return null; } } @Override public int getCount() { return 3; } } |
- To link stepper indicator with the view pager the following code is added
assert pager != null; pager.setAdapter(new PagerAdapter(getSupportFragmentManager())); indicator.setViewPager(pager, pager.getAdapter().getCount()); |
- A page listener is added to the viewpager so that the visibility of the buttons can be handled easily.
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { if (position == 0) { btnPrev.setVisibility(View.GONE); btnNext.setVisibility(View.VISIBLE); btnSubmit.setVisibility(View.GONE); } else if (position == 1) { btnPrev.setVisibility(View.VISIBLE); btnNext.setVisibility(View.VISIBLE); btnSubmit.setVisibility(View.GONE); } else if (position == 2) { btnPrev.setVisibility(View.VISIBLE); btnNext.setVisibility(View.GONE); btnSubmit.setVisibility(View.VISIBLE); } } |
- Now 3 different fragments are created along with their layouts and a SharedViewModel is also added which is shared by the fragments. SharedViewModel is different from a normal ViewModel where we need to provide the Activity context in the ViewModelProviders.of(context).
- The current CreateEventFragment is divided into 3 fragments namely EventDetailsStepOne, EventDetailsStepTwo and EventDetailsStepThree and the code for all of them is redistributed to all of these fragments. So each and every fragment now has a different responsibility which is handled separately.
- Now the current CreateEventFragment is changed to UpdateEventFragment. This will now only handle the editing of events when the Edit Event is selected.
Resources:
- Library for implementing horizontal stepper