Where Branding Meets Tech: Developing the Unique Selling Point Gestures in the Android App
We need to think about what the 3 best deciding factors are for new app visitors to join the Vestiaire Collective and how to get this information to them as easily and smoothly as possible as soon as they open the app. In this article, I will explain how the USP feature works in the Vestiaire Collective Android app and walk you through each step of my development process to enable gestures despite all the technical challenges.
What is the USP feature?
The USP feature is the first thing users see when they open the Vestiaire mobile applications; well, after the orange splash screen. On Wikipedia, USP is defined as the marketing strategy of informing customers about how one’s own brand or product is superior to its competitors (in addition to its other values). On the Vestiaire Collective mobile applications, it is designed with a set of screens, automatically sliding after some seconds telling users about what to expect when they use the product.
Simple gestures go a long way
We received positive results after releasing this feature as well as feedback for users to be more in control while using it. Users want to be able to pause a slide and absorb its content, its beautiful images and its thoughtful descriptions. The USP feature already looked similar to Instagram stories but in order for it to function in the same way, they needed the gestures. If you have ever viewed stories on apps that offer it, you must have noticed some gestures have become intuitive with this feature we have come to love. You could hold any part of the screen to pause the current slide, you could click the right side of the screen to go to the next slide, and the left side, the previous. We needed to give our users those same features.
Key Android terms to understand the technical context
Before jumping into implementation details, let’s have a quick overview of the main Android terms that were at the core of this project. These words will be helpful to understand the work explained in the next sections.
Fragment — A single screen in Android, like one of the slides for USP.
ViewPager — A kind of UI View in Android that can host multiple fragments; internally including the capability to slide among them.
View Hierarchy — Screens you see in Android are made up of a lot of UI Views stacked on top of one another; like a text on an image. The View Hierarchy can be perceived as these stacked views.
Don’t hesitate to come back to these definitions to refresh your memory.
How we implemented the USP feature
First approach: Intercepting interactions from the ViewPager
The USP’s first iteration already introduced the ViewPager hosting the slides, we just needed to add the gesture support it.
My first thought was; I am going to intercept clicks from the ViewPager; If a single click was detected, we swipe left or right depending on the position clicked, or hold if a long one is detected. Simple enough. Imagine my surprise when I discovered the ViewPager class does not allow you to intercept touch events from the user. And to make it worse, the ViewPager class which was from Google’s Material library was made final for some reason, which means that I couldn’t extend from it and override some of its functionality. I still don’t know why some library projects make components final. That’s a conversation for another day.
Second approach: Delegating tap and pause gestures management to two superimposed views
Alright, it’s fine. It’s all good. I have another idea. I can create 2 transparent views on top of the ViewPager. One on the left and another on the right. These views will handle gestures such as left and right tap gestures. They would also handle the hold to pause gesture. While the ViewPager goes about its normal business of handling swipe gestures. However, this approach ran into the problem of the views getting confused trying to handle clicks from the user. The left and right views intercepted the clicks trying to check for what kind of action the user was performing before it could get to the ViewPager. The ViewPager could no longer perform its sliding actions. Apparently, Android handles user clicks by passing the touch action down the view hierarchy until one of the views handles the click. Once the click is handled, the views below don’t get the click event.
This meant we had to aggregate all these user actions in a single view. A Single view or in my case, two non-overlapping views that have to handle all possible actions and gestures from a user; the taps and the swipes. The transparent views already handled the left click, right click and hold gesture. Could they also handle the swiping gesture? Here is how it was done.
The winning solution: managing tap, pause and swipe gestures using the two superimposed views
As I am already listening to a couple of events on these views, namely when they touch the view and when they release the view, I decided to also listen to events where they click on one of these views and then drag on the screen. As soon as this event is received, I calculate the horizontal distance between the current touch position and the previous touch position, then programmatically drag the ViewPager by this distance. As soon as the users release this drag action, the ViewPager does the physics of determining whether the current motion of the ViewPager is enough to finish the movement of the drag to the next slide, or stay on the current page. The Listener receives multiple events during the course of this drag so the resulting ViewPager drag is smooth like it was being done on the ViewPager itself.
Check out the result in your VC Android app!
This is how we successfully bypassed constraints relative to Google’s Material library and Android’s event dispatching mechanism to give users what they wanted: the full freedom to discover Vestiaire Collective app’s unique value proposition in a few taps and swipes.
So when the new USP iteration goes live, make sure you check it out and interact with these fun gestures. You would know that you aren’t actually interacting with the ViewPager but shhhh, keep it a secret, our users won’t know that. Below is a preview of what you can expect.
Thank you for reading.
