Zoosk Wearables

The first time the Zoosk Android Team got our hands on an Android watch was at Google I/O 2014. As soon as we saw it in action, we started thinking about how we could extend the Zoosk Dating experience to Wearables. A little while ago during one of our hack days, a coworker and I came up with the idea to implement Zoosk’s Carousel feature on Android Wear. Soon enough, our hack day project was taken on as an actual project and thus our sprint began.

HOW DID WE START?

Setting up the environment was easy with the Gradle build system in Android Studio. After creating a Wear module for Zoosk Wear, with the same application path name that we used for the Zoosk handheld app, the module was added via a single line in the app’s build.gradle file:

https://gist.github.com/yakdere/97fb49691d8a209f1b7d

EXTENDED AND CUSTOMIZED NOTIFICATIONS

When an Android Wear supported phone is connected to a wearable, Wear automatically syncs all notifications for you with two actions: “open on your phone” or “block the app”. However, we wanted Zoosk Wear to have a customized notification and extended action to give the user the opportunity to launch a Zoosk Wear app directly from the notification on the watch screen.

To do this, some small and large icons were added to have unique design into the NotificationCompat.Builder, just before the NotificationManager notifies the phone and Android Wear. This worked out nicely, but then the question was, how could the app be launched on the Wear itself directly from the notification?

First of all, it requires a layer-level communication in the Wearables. Next, a pending action was added so that the user can launch the app any time through the notification. Last, a message sent to the wear app which then creates a local notification. That notification has a pending action which launches the main activity of the wear app. In order to catch the message on the Wear app, WearableListenerService was used which delivers as a result of changes through DataApi and MessageApi.

https://gist.github.com/yakdere/21dcaa2f1256233d902b

CREATING CUSTOM UI

The first and most important step was creating a vision which stays in-line with the commonality of Wear design patterns without straying too far from the fundamentals of Zoosk’s other products. This was executed wonderfully by our UX and Product teams.

In order to create a full screen app, we added Google Play Services in order to use Android Wear UI components. The default wear project comes with WatchViewStub, which gives you the opportunity to support both round and rectangular screens.

https://gist.github.com/yakdere/146b73d72d5d851d39e3

COMMUNICATION WITH HANDHELD

The Wearable Data Layer API, which is part of Google Play Services, provides a communication channel between wear and handheld phone apps. MessageApi was used mostly for strings and DataApi was used for sending and receiving different types of objects.

To communicate with handheld and implement data layers, you need to create an instance of GoogleApiClient and a DataMap class. This approach lets you work with data items in the form of an Android Bundle, so you can manipulate data with key-value pairs by implementing a listener for data item events.

Since Wearables don’t have their own wifi (yet), the handheld app needs to download required user images for it and send them to Wear when they are available. Therefore asset object was used to send images in asset format. The most efficient and fastest way to handle this was reverting and caching them to a Bitmap as soon as Wear receives them. So, bitmaps can be ready for UI usages when they are required.

https://gist.github.com/yakdere/ed3d6b3f458cbe9ea313

HERE’S WHAT YOU CAN DO WITH THE FIRST VERSION OF ZOOSK WEAR

 Keep Connected

First of all, you will receive useful information – including notifications for interests, winks, connection requests and messages from other members, sent straight to your Android wearable. With pulse notifications, you’ll know exactly when someone has reached out to you, always keeping you connected to your dating life.

 Play Carousel

You can play the addictive Carousel feature directly through your Android Wear and simply reply back to your interests with one tap. You will see who is interested in you first and if the feelings are mutual, you will get a Mutual Match. At this point, you can either find more about the person or keep playing carousel!

Download the latest Zoosk Android app from Google Play today and the app will automatically pair with your Android Wearable. We hope you get a kick out of Zoosk Wear!