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:
| dependencies { | |
| … | |
| wearApp project(':ZooskWear) | |
| … | |
| } |
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.
| void sendLocalNotification() { | |
| PendingIntent pendingIntent = PendingIntent.getActivity(this, id , launcherIntent, 0); | |
| Notification notification = new NotificationCompat.Builder(this) | |
| .setContentTitle(title) | |
| .setContentText(body) | |
| .setSmallIcon(_icon_small) | |
| .setLargeIcon(_icon_large) | |
| .addAction(R.drawable.action, “action title”, pendingIntent).build(); | |
| NotificationManagerCompat.from(this).notify(id, notification); | |
| } |
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.
| WatchViewStub stub = (WatchViewStub) view.findViewById(R.id.watch_view_stub); | |
| stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() { | |
| @Override | |
| public void onLayoutInflated(WatchViewStub stub) { | |
| /* rectangular and round layouts are inflated and can be reachable by *stub.findViewById() | |
| * click listeners should also be here | |
| */ | |
| ... | |
| } | |
| } |
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.
| public class ListenerService extends WearableListenerService { | |
| private static final String WEARABLE_DATA_PATH = "/wearable_data"; | |
| @Override | |
| public void onDataChanged(DataEventBuffer dataEvents) { | |
| for (DataEvent event : dataEvents) { | |
| // Check the data type | |
| if (event.getType() == DataEvent.TYPE_CHANGED) { | |
| // Check the data path | |
| String path = event.getDataItem().getUri().getPath(); | |
| if (path.equals(WEARABLE_DATA_PATH)) {} | |
| DataMap dataMap = DataMapItem.fromDataItem(event.getDataItem()).getDataMap(); | |
| Asset asset = dataMap.getAsset(“asset_id”); | |
| Bitmap bitmap = loadBitmapFromAsset(asset); | |
| ... | |
| } | |
| ... | |
| } |
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!
