Introducing SlideView, our sliding button implementation.

Kizito Nwose TECH 0 Comments

At MAX, we always strive to make user experience great for our users and our ever-capable champions. If you don’t know this already, at MAX, the word “champions” is used to refer to our dispatch riders. Over time, we have worked towards making the MAX Champion app and our other products as efficient as possible.

The problem

Buttons! Yes, regular buttons are nice and allow users convey intent to an app, but the problem is buttons are prone to false intents.
If you use a smartphone, you most likely have accidentally tapped a button when you didn’t intend to. We didn’t want our champions carrying out actions within in our app unless they really intended to.

The solution

The SlideView is a custom android widget that registers a click only when the user slides across the view. No more false clicks! The SlideView solves the problem in a very simple but effective way.
We’ve open-sourced this library as we think it can help some people who might be in the same situation. The code is available on github along with necessary information to integrate it into your apps. The library is actually very easy to use.

An implementation of this library would look like this:

<ng.max.slideview.SlideView
android:id="@+id/slideView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:buttonBackgroundColor="@color/button_bg_color"
app:buttonImage="@drawable/button_img"
app:slideBackgroundColor="@color/slide_bg_color"
app:slideText="@string/slide_text"
app:slideTextColor="@color/slide_text_color"
app:animateSlideText="true"
app:reverseSlide="false"
app:strokeColor="@color/slide_stroke_color"
app:buttonImageDisabled="@drawable/button_img_disabled" />

Below are samples of the view:

SlideView Samples

You can also listen to be notified for slide actions on the view. Here’s an example:

((SlideView) findViewById(R.id.slide)).setOnSlideCompleteListener(new SlideView.OnSlideCompleteListener() {
@Override
public void onSlideComplete(SlideView slideView) {
// the user performed a slide action on the view
}
});

A complete setup and usage guide is available on the library’s github page, so head over there and start adding sliding buttons in your apps today!

Facebook Comments

Leave a Reply

Your email address will not be published. Required fields are marked *