Pages

Tuesday 1 October 2013

Saffron Digital Vanilla Platform

Saffron Digital were a subsidiary of HTC when I began to work with them in January 2013, but were subsequently acquired by Najafi Companies the following September.

The app I worked on was originally commissioned to be the video platform for the then upcoming HTC One smartphone. It was subsequentl rolled into the Vanilla platform, and has been used for a number of projects including the Carrefour Nolim service, KDDI Animepass and the Paula Deen Network.
Most of my development effort was focused on the app's UI. I became responsible for the architecture of the fragments and activities such that they were part of an object hierarchy. This reduced the amount of repeated code, which is always a good thing.

The most visible component that I was responsible for was the slider custom control, shown in the images below.

Slider in the down position showing the pack shot in the background Slider in the up position showing the content details

The Android drawer control had been deprecated, and so it was necessary to roll my own. The starting point was a series of blog posts on the development of the Prixing app by Cyril Mottier. Part 1, part 2, and part 3 were useful, but part 4 is worth a look to complete the series.

Cyril didn't give any code examples, as it was part of a copyrighted app, but his descriptions were easy to follow. In particular, I adopted his trick of using a floating layer that is offset, and then moved up the screen as it's swiped in, rather than resizing it. This is more efficient because it doesn't need to be redrawn every time it's repositioned.

The trouble was that when the layer moved, the co-ordinate system would also move, and so the touch events would go all over the place. The solution was to handle gestures in the background layer, which had a fixed coordinate system.

Of course, that had a knock-on effect. See the “Watch trailer” button? Android handles events on a top-down basis, and that was catching and interfering with gestures on the slider both for opening and closing it, and also scrolling its contents.


I added a custom listener interface which responded to an event triggered when the slider had moved past the midpoint. This disabled the button, so that gestures weren't getting consumed by the incorrect view.