With recent advances in wearable technology, it's now possible to create novel fitness experiences without building custom hardware. In this talk we take you through creating a fitness tracker in C# on Android Wear, covering Google Play Services and watch-faces along the way. If this piques your interest, you can build your own Android Wear-based fitness tracker in our code lab!

1. Google Fit, Wear & Xamarin
Peter Friese @peterfriese
Matt Sullivan @mjohnsullivan

5. Code Lab

6. Food for Thought

7. Are Fitness apps just for
runners, cyclists, athletes?
Or for those on a mission to get
fit and stay healthy?

8. Can we add elements of fitness
to everyday apps?

10. http://handy-games.com/games/kitty-my-fitness-cat/

14. Positive impact on physical and
emotional wellbeing
==
positive impact on user
experience and happiness

15. Android Wear

16. Create a Wear app module
Design the watch face UI
Extend WatchFaceService.Engine
Create a companion app
1
2
3
4

17. Watch Face Architecture
Wearable App
CanvasWatchFaceService
Engine
WearableConfigActivity
WearableListenerService
Mobile App
MobileConfigActivity

18. Design for square
and round
Interactive and
Ambient Modes
Gestures

19. CanvasWatchFaceService.Engine
UI Drawing
Manually draw onto
a Canvas Object
Ambient Mode Changes
Reduced color space
Burn protection
Redraw Intervals
Once a minute in
Ambient – OnTimeTick()
Custom for interactive
– use a System Timer
TimeZone Changes
Use a BroadcastReceiver
Interactive Watch Faces
.SetAcceptsTapEvents() in Builder
Override OnTapCommand()

20. Drawing the watch face
Background
Hour Ticks
Step Count
Minutes Hand
Seconds Hand
Hours Hand

21. backgroundScaledBitmap =
Bitmap.CreateScaledBitmap(backgroundBitmap,
width, height, true);
canvas.DrawBitmap(backgroundScaledBitmap, 0, 0, null);
Drawing the Watch Face - Background

23. var innerTickRadius = centerX - 10;
var outerTickRadius = centerX;
for (var tickIndex = 0; tickIndex < 12; tickIndex++)
{
var tickRot = (float)(tickIndex * Math.PI * 2 / 12);
var innerX = (float)Math.Sin(tickRot) * innerTickRadius;
var innerY = (float)-Math.Cos(tickRot) * innerTickRadius;
var outerX = (float)Math.Sin(tickRot) * outerTickRadius;
var outerY = (float)-Math.Cos(tickRot) * outerTickRadius;
canvas.DrawLine(centerX + innerX, centerY + innerY,
centerX + outerX, centerY + outerY, tickPaint);
}
Drawing the Watch Face - Ticks

24. var width = bounds.Width();
var height = bounds.Height();
var steps = stepCount.ToString();
var stepsWidth = stepcountPaint.MeasureText(steps);
var x = width - stepsWidth - stepCountOffset;
var y = (height + stepCountTextSize) / 2.0f;
canvas.DrawText(steps, x, y, stepcountPaint);
Drawing the Watch Face - Step Count

25. Ambient mode
Reduce color depth
Reduce number of non-black pixels
Use color for < 5% pixels
Watch face updates
once a minute -
don’t show seconds
Save power
Interactive Ambient

26. public override void OnDraw(Canvas canvas, Rect bounds)
{
DrawFace(canvas, bounds);
DrawHands(canvas, bounds);
}
void DrawHands(Canvas canvas, Rect bounds)
{
if (!IsInAmbientMode) {
canvas.DrawLine(centerX, centerY,
centerX + secX, centerY + secY, secondPaint);
}
canvas.DrawLine(centerX, centerY,
centerX + minX, centerY + minY, minutePaint);
}
Ambient Mode

27. public override void OnDraw(Canvas canvas, Rect bounds)
{
DrawFace(canvas, bounds);
DrawHands(canvas, bounds);
}
void DrawHands(Canvas canvas, Rect bounds)
{
if (!IsInAmbientMode) {
canvas.DrawLine(centerX, centerY,
centerX + secX, centerY + secY, secondPaint);
}
canvas.DrawLine(centerX, centerY,
centerX + minX, centerY + minY, minutePaint);
}
Ambient Mode
No seconds hand
in ambient mode

28. void UpdateTimer()
{
if (timerSeconds == null) {
timerSeconds = new System.Threading.Timer(
state => {
Invalidate();
},
null, dueTime, period
}
else {
if (IsVisible && !IsInAmbientMode) {
timerSeconds.Change(0, InteractiveUpdateRateMs);
}
else {
timerSeconds.Change(System.Threading.Timeout.Infinite, 0);
}
}
}
Ambient Mode / 2

29. void UpdateTimer()
{
if (timerSeconds == null) {
timerSeconds = new System.Threading.Timer(
state => {
Invalidate();
},
null, dueTime, period
}
else {
if (IsVisible && !IsInAmbientMode) {
timerSeconds.Change(0, InteractiveUpdateRateMs);
}
else {
timerSeconds.Change(System.Threading.Timeout.Infinite, 0);
}
}
}
Ambient Mode / 2
Redraw every second when
in interactive mode

30. void UpdateTimer()
{
if (timerSeconds == null) {
timerSeconds = new System.Threading.Timer(
state => {
Invalidate();
},
null, dueTime, period
}
else {
if (IsVisible && !IsInAmbientMode) {
timerSeconds.Change(0, InteractiveUpdateRateMs);
}
else {
timerSeconds.Change(System.Threading.Timeout.Infinite, 0);
}
}
}
Ambient Mode / 2
Turn timer
on in interactive mode
off in ambient mode

31. Configuration Activities
WEARABLE_CONFIGURATION on Wear
COMPANION_CONFIGURATION on Phone
DataLayer API
Listen for Data Item Events
Write DataItems to URI Paths

32. void SaveStepCountStatus(GoogleApiClient googleApiClient, bool stepCountOn)
{
var putDataMapRequest = PutDataMapRequest.Create("/xfit_watchface");
putDataMapRequest.DataMap.PutBoolean("stepcount", stepCountOn);
var putDataRequest = putDataMapRequest.AsPutDataRequest();
putDataRequest.SetUrgent();
WearableClass.DataApi.PutDataItem(googleApiClient, putDataRequest);
}
Syncing configuration /1

33. void SaveStepCountStatus(GoogleApiClient googleApiClient, bool stepCountOn)
{
var putDataMapRequest = PutDataMapRequest.Create("/xfit_watchface");
putDataMapRequest.DataMap.PutBoolean("stepcount", stepCountOn);
var putDataRequest = putDataMapRequest.AsPutDataRequest();
putDataRequest.SetUrgent();
WearableClass.DataApi.PutDataItem(googleApiClient, putDataRequest);
}
Syncing configuration /1
URI Path
Data Item Key
Sync now

34. void OnDataChanged(DataEventBuffer dataEvents)
{
foreach (var dataEvent in dataEvents)
{
var dataItem = dataEvent.DataItem;
if (dataItem.Uri.Path == "/xfit_watchface")
{
var dataMap = DataMapItem.FromDataItem(dataItem).DataMap;
displayStepCount = dataMap.GetBoolean(“stepcount”);
Invalidate(); // force redraw
}
}
}
Syncing configuration /2

35. void OnDataChanged(DataEventBuffer dataEvents)
{
foreach (var dataEvent in dataEvents)
{
var dataItem = dataEvent.DataItem;
if (dataItem.Uri.Path == "/xfit_watchface")
{
var dataMap = DataMapItem.FromDataItem(dataItem).DataMap;
displayStepCount = dataMap.GetBoolean(“stepcount”);
Invalidate(); // force redraw
}
}
}
Implements IDataApiDataListener
Syncing configuration /2
URI Path
Data Item Key

36. Watch face drawing code
GoogleAPIClient code
Configuration code
Reading the step count code
1
2
3
4

37. Clean Code

38. Partial Classes
XFitWatchfaceService
XFitWatchFaceEngine
(Drawing Code)
XFitWatchFaceEngine
(Config Code)
XFitWatchFaceEngine
(Google API Client Code)
XFitWatchFaceEngine
(Step Count Code)
XFitWatchFaceEngine

39. Partial Classes
XFitWatchfaceService
XFitWatchFaceEngine
(Drawing Code)
XFitWatchFaceEngine
(Config Code)
XFitWatchFaceEngine
(Google API Client Code)
XFitWatchFaceEngine
(Step Count Code)
XFitWatchFaceEngine
[Service(Label = "XFit Watchface 4",
Permission = "android.permission.BIND_WALLPAPER")]
[IntentFilter(new[] { "android.service.wallpaper.WallpaperService" },
Categories = new[]
{ "com.google.android.wearable.watchface.category.WATCH_FACE" })]
public partial class XFitWatchfaceService: CanvasWatchFaceService
{
public override WallpaperService.Engine OnCreateEngine()
{
return new XFitWatchfaceEngine(this);
}
partial class XFitWatchfaceEngine : Engine
{
// drawing code
}
}
XFitWatchfaceService.cs (Drawing Code)

40. Partial Classes
XFitWatchfaceService
XFitWatchFaceEngine
(Drawing Code)
XFitWatchFaceEngine
(Config Code)
XFitWatchFaceEngine
(Google API Client Code)
XFitWatchFaceEngine
(Step Count Code)
XFitWatchFaceEngine
[MetaData(
"com.google.android.wearable.watchface.wearableConfigurationAction",
Value = "XFitWatchface.CONFIG")]
[MetaData(
"com.google.android.wearable.watchface.companionConfigurationAction",
Value = "XFitWatchface.CONFIG")]
public partial class XFitWatchfaceService : CanvasWatchFaceService
{
partial class XFitWatchfaceEngine : Engine, IDataApiDataListener
{
void ConnectWatchfaceConfigUpdates()
{
}
}
}
XFitWatchfaceServiceConfig.cs (Config Code)

41. Partial Classes
XFitWatchfaceService
XFitWatchFaceEngine
(Drawing Code)
XFitWatchFaceEngine
(Config Code)
XFitWatchFaceEngine
(Google API Client Code)
XFitWatchFaceEngine
(Step Count Code)
XFitWatchFaceEngine
public partial class XFitWatchfaceService : CanvasWatchFaceService
{
partial class XFitWatchfaceEngine : Engine
{
GoogleApiClient googleApiClient;
void ConnectGoogleApiClient()
{
googleApiClient = new GoogleApiClient.Builder(owner)
.AddApi(FitnessClass.HISTORY_API)
.AddApi(FitnessClass.RECORDING_API)
.AddApi(WearableClass.API)
.Build();
googleApiClient.Connect();
}
}
}
XFitWatchfaceServiceGoogleApiClient.cs (Google API Client)

42. Google Fit

44. Activity Read/Write
Body Read/Write
Location Read/Write
Nutrition Read/Write

45. Sleep Duration & Type
Calories Consumed, Macronutrients
Height, Weight, BMI, Body Fat %
Heart Rate
Distance Traveled
Steps
Calories Burned
Activity Segments (walking, running, biking)
Gym Activities
ACTIVITY
NUTRITION
BODY
SLEEP

46. SENSORS API
RECORDING API
HISTORY API
SESSIONS API

47. SENSORS API
Find all sensors, both on and off-device
FindDataSources (GoogleApiClient c, DataSourcesRequest r)
Register for sensor data
Add (GoogleApiClient c, SensorRequest r, IOnDataPointListener l);
Unregister for sensor data
Remove (GoogleApiClient c, IOnDataPointListener l);

48. RECORDING API
Stop recording data types/sources
Unsubscribe (GoogleApiClient c, DataType t)
Unsubscribe (GoogleApiClient c, DataSource s)
What data is being recorded
ListSubscriptions (GoogleApiClient c)
Record from data types/sources
Subscribe (GoogleApiClient c, DataType t)
Subscribe (GoogleApiClient c, DataSource s)

49. HISTORY API
Manually add data
InsertData (GoogleApiClient c, DataSet d)
Remove data
DeleteData (GoogleApiClient c, DeleteDataRequest r)
Retrieve data
void ReadData (GoogleApiClient c, DataReadRequest r)

50. SESSIONS API
Start recording a live session
void StartSession(GoogleApiClient client, Session session);
Stop recording a live session
void StopSession (GoogleApiClient client, String identifier);
Insert a session
void InsertSession (GoogleApiClient client, SessionInsertRequest request)

51. curl
-H "Content-Type: application/json"
-H "Authorization: Bearer $ACCESS_TOKEN"
https://www.googleapis.com/fitness/v1/users/me/dataSources/
derived:com.google.step_count.delta:...:estimated_steps/
datasets/1438701040000000000-143930584000000000
REST API

52. Reading Steps

53. Create a GoogleApiClient
Ensure device is recording steps
Build an aggregated query
Read and extract the data
1
2
3
4

54. void BuildApiClient ()
{
googleApiClient = new GoogleApiClient.Builder (this)
.AddApi (FitnessClass.HISTORY_API)
.AddApi (FitnessClass.RECORDING_API)
.AddScope (FitnessClass.ScopeActivityReadWrite)
.EnableAutoManage (this, AuthClientId,
result => {
// Unresolvable error, handle or fail silently
})
.Build ();
SubscribeToSteps ();
ReadSteps ();
}
Read before connection
established
Auto manage
connection
Build API Client

55. void SubscribeToSteps ()
{
FitnessClass.RecordingApi.Subscribe (googleApiClient,
TypeStepCountDelta)
.SetResultCallback( (IResult result) => {
if (!result.Status.IsSuccess)
{
// Error subscribing, handle
}
});
}
Subscribing

56. // Read step count deltas from the History API
DataReadRequest DailyStepsForWeek()
{
long midnight = TimeUtility.MidnightLocalPosix ();
long midnightWeekAgo = TimeUtility.DaysAgoPosix (midnight, 7);
return new DataReadRequest.Builder ()
.Aggregate (DataType.TypeStepCountDelta,
DataType.AggregateStepCountDelta)
.BucketByTime (1, TimeUnit.Days)
.SetTimeRange (midnightWeekAgo, midnight,
TimeUnit.Milliseconds)
.Build();
}
Data
Aggregation
Data Read Request

57. // Reads and extracts step data
void ReadDailySteps ()
{
DataReadRequest readRequest = RequestBuilder.DailyStepsForWeek ();
FitnessClass.HistoryApi.ReadData (googleApiClient, readRequest)
.SetResultCallback ( (IResult result) => {
IList<Bucket> buckets = ((DataReadResult)result).Buckets;
foreach (var bucket in buckets)
{
var stepCount = bucket.DataSets.Sum(dataSet =>
dataSet.DataPoints.Sum (dp =>
dp.DataType.Fields.Sum (f =>
dp.GetValue (f).AsInt())));
Log.Info (Tag, $"Step Count: {stepCount}");
}
});
}
Reading
Data
Extracting
Data
Read Daily Steps

58. Writing Data

59. // Writing data
googleApiClient = new GoogleApiClient.Builder(context)
.AddApi(...)
.AddConnectionCallbacks(
connectionHint => { // Connected! },
cause => { // Suspended }
).Build();
Writes require
an established
connection
Writing Data

60. Reading Today’s
Steps

61. Create a GoogleApiClient
Ensure device is recording steps
Build an aggregated query
Read and extract the data
1
2
3
3

62. Create a GoogleApiClient
Ensure device is recording steps
Read and extract the data
1
2
2

63. // All in one reading steps
void AllInOne()
{
var client = new GoogleApiClient.Builder (this)
.AddApi (FitnessClass.HISTORY_API)
.UseDefaultAccount ()
.Build ();
client.Connect ();
FitnessClass.HistoryApi.ReadDailyTotal (client, TypeStepCountDelta)
.SetResultCallback ( (IResult result) => {
DataSet ds = ((DailyTotalResult) result).Total;
int stepCount = ds.DataPoints.Sum (
dp => dp.DataType.Fields.Sum (
f => dp.GetValue (f).AsInt()));
});
}
Default
Account Read Daily Total
Read Today’s Steps

64. Code Lab

65. Thank You!
https://developers.google.com/fit/
https://developer.android.com/wear/
http://developer.android.com/training/wearables/watch-faces/