How Cookbook became the first cooking app on Android TV?
We started work on Material design with Amrit Sanjeev in early March 2015. At the Google Dev Summit in Bangalore, we met Michael Young and Tony Chan; two awesome Googlers evangelising the Android Wear and Android TV.
In the code-lab at GDS, the task was to create an app for the Android TV. Our team coded a bare-bones version of Cookbook for android tv that night. To our delight, we were the only team successful in creating the app. People were quite impressed by the voice search in the TV app. It was an adaptation of our ‘What to Cook — voice assistant for cooking’.
To our luck, there we met Chaithanya Joshi from Sony India. Sony was working on Android TVs for India at the time. They were looking at a June-July 2015 launch. He loved the app and felt there’s great potential for it on the smart tv.
Cookbook was already on the Android Wear at the time. We saw the opportunity to be the first cooking app on Android TV.
Our team returned from Bangalore with a Nexus player in hand; all ready to create a production version of Cookbook on Android tv.
Challenges of developing for Android TV
We had been working on the small screens for quite some time. The screen space on offer on the TV was quite over-whelming. There were far too many pixels to be filled without cluttering things too much.
- Image quality
Android TVs have resolutions running upto 4K. The image quality had to be top notch to give our users the premium experience they craved for.
Cookbook has a very image-centric UI; and hence memory management is critical. Even with high-quality images, the app should be able to run smoothly without jitters.
The high-quality images that were required to ensure quality were too large for network transfer. The images had to be compressed efficiently not only to speed up network transfer, but also to reduce memory usage.
The size of the canvas available was more challenging that I had first imagined. We tried several iterations of the UI. In most of them, we were trying to utilise as much of the screen as possible.
The photo shows one of the UI we tried with lots of colour and clutter!
We later realised the idea wasn’t to flood the display with content. Bigger screens look stunning when they are least cluttered. We reworked the UI to include more empty spaces and stunning images.
Image quality / Size / Memory / Network Speed
We tried several image compression algorithms, but none of them yielded satisfying results. We settled for a specific configuration of JPEG that provided decent quality at a relatively okay size. Once we started testing the app, the Nexus player kept crashing due to high memory usage. The home page had far too much visual content for the app to run smoothly.
We then stumbled upon webp. The compression was superb; the quality even better. We did several tests with varying resolutions to find the perfect balance between size and quality. Webp solved all the 4 problems in one go!
Note — Webp (with transparency) support on Android starts from 4.2.1
We used leanback library to incorporate the tv app into the existing Cookbook’s apk. Android TV was just coming out, and hence required strong vetting by the Google Play team. We had several rounds of testing — dog-food as they call it. After a several weeks of testing, it was official. Cookbook became the first cooking app on Android tv.
Cookbook then went on to be showcased at Google I/O 2015 for ubiquitous computing. Its presence on Andorid wear and tv was very well received.
During this time, we opened up our dialog with Sony. We were working together with their android teams here in India and in Japan. By June 2015, contracts had been sketched up. Sony Android TVs started coming out by early August and every one of them had Cookbook app bundled inside.
At times, the thought of having partnered with Sony; whose TVs we had grown up watching was quite overwhelming. Nevertheless, it was quite a ride with everything falling into place at the right time.
Every time we pass by a Sony store, we take a peek inside to see our app on the home screen. :)