Trending TimeSee what’s hot on Twitter - on your wrist!

A primer on data-driven watch face development for Android Wear

Project goals● Build a content-centric watch face● Use best practices, but steer slightly off-

course from conventions in Google’s sample app

● No user OAuth - just install, activate & enjoy!

A funny thing happened...● Watch Face API launched December 2014● Seemingly everyone built one ● Not many data-driven projects● I wanted to do a community tutorial ● I suck at art

Tons of amazing visualizations...

...but content is what I’m about

A utility delivering utility● Surfaces top trends● High entertainment

value● Usually hilarious, often

informative, sometimes helpful

This is where wearables rock● Microinteractions: <= 3-second sessions● Stay in the know without leaving the moment● Not bothered by constant notification pelting

Variation on a theme● The core element of designing watch faces

is the creative expression of time

But again...

Source:http://explodingdog.com/title/icantdraw.html

Variation on a theme● With Trending Time, the timekeeping

function takes a backseat to the watch being a portable stage for quick, relevant information

One line & you’re doneWatchFaceStyle.Builder(this)

.setShowSystemUiTime(true)

...

.build();

Account for the peek card

.setCardPeekMode(WatchFaceStyle.PEEK_MODE_SHORT)

Available canvas real estate

Immediate dividends :)

Immediate dividends :(

How is a watch face made?● If you said…

○ “It’s like building a live wallpaper!”○ “It’s like building a game!”○ “It’s like building an animation loop!”

Ding ding ding!

Source:http://canuckpost.

com/2013/10/tale-of-two-listings/

Under the hood: two apps● All cloudtalk happens on the phone

○ Background service calls Twitter’s API○ AlarmManager schedules hourly invocations○ Updated trending topics stored in a DataMap

● Data auto-syncs to watch over Bluetooth○ If devices lose pairing, data is buffered & sent when

connectivity is restored

● Wearable service listens for changes○ Content persisted in SharedPreferences○ (Will eventually migrate to a BroadcastReceiver)

● Redraws only when screen is active○ Invalidate display in onPropertiesChanged event

Under the hood: two apps

Usage1. Launch mobile app2. Tap “Start updater”3. Close mobile app4. Select “Trending

Time” watch face

The engineering trifecta● Performant

○ No need for FPS stress○ Avoids interval- or tick-based loops

● Scalable○ Proxy handler minimizes API calls; preserves quota

● Battery-friendly○ Diverts from AsyncTask-based timer pattern○ Same impact in interactive mode & ambient mode

Drawbacks● Watch faces aren’t interactive

○ A service, not an activity○ Read-only relay

● Let the user drill-down into actual tweets○ Trends selected on the watch handled on the phone

by Twitter’s app or Chrome

Roadmap: UI goodies● Topics presented

as a tag cloud while maintaining glanceable ethos

● User-defined trending regions

● Contextual inputs

100% free!play.google.com/store/apps/details?id=wearables.jasonsalas.com.trendingtime

github.com/jasonsalas/TrendingTimeForAndroidWear

100% open source!

Shameless product plug@jasonsalas

google.com/+JasonSalas

Designing & Developing for Google Glass