46
MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA LEAD APP DEVELOPER CAPITAL ONE

MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

MAKING APPS FOR ANDROID WEARLUIS DE LA ROSALEAD APP DEVELOPER

CAPITAL ONE

Page 2: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

WEAR OVERVIEWCurrently targeting only watches

Several manufacturers and modelsBuilds upon your Android experience

Page 3: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

WHAT IS NOT IN WEARwebkitprint

appwidgethardware.usb

Page 4: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

WHAT IS ONLY IN WEARWearable UI Library

Wearable Data Layer

Page 5: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

SETUP DEV FOR WEARAndroid Studio

SDK 20 4.4W KITKAT_WATCHPair with Emulator

adb -d forward tcp:5601 tcp:5601bluetooth

Page 6: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

ANDROID WEAR PROJECTwear module

handheld modulesubclass Activity, not WatchActivity (fixed in Studio 0.8.1)

Page 7: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

DESIGN + UXsmall screen: roughly 320x320

timeout -> homeStream of CardsSwipes and Taps

Page 8: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

GLANCEABLE UI

Page 9: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

PATTERNSCard

Action Button1D Picker2D Picker

Selection ListConfirmation

Exit

Page 10: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

NOTIFICATIONS AND APPS

Page 11: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

HANDHELD AND WEARABLE APPS

Page 12: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

HELLO WEAR WORLD APP

Page 13: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

SQUARE VS ROUNDWatchViewStub

rectLayout / roundLayoutBoxInsetLayout

app:layout_box="bottom" (or all, top|left, etc)

Page 14: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

EMULATORRound

Workaround: Use Host GPU off to truly roundSquare

Can make custom 320x320HAXM + Intel image

Page 15: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

VOICEvoice trigger

custom voice trigger with label attribute and launcher intent-filterspeech input

Page 16: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

WEAR LIBRARIESInside of Google Play Services

com.google.android.gms.wearable17 Interfaces12 Classes

Page 17: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

WEAR UI LIBRARYaka Wearable Support Library

android.support.wearable2 Classes in .activity

7 Interfaces and 19 Classes in .view

Page 18: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

CARDSCardFragment

CardFrameCardScrollView

Page 19: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

GRIDVIEWPAGERFragmentGridPagerAdapter

getBackground(row, column) - parallaxgetRowCount() / getColumnCount(row)

getFragment(row, column)getCurrentColumnForRow(row, currentColumn)

Page 20: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

LISTS

Page 21: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

LISTSWearableListView

.Item.ViewHolder

.Adapter.ClickListener

Page 22: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

EXITINGswipeToDismiss

DeviceDefault theme<style name="AppTheme" parent="@android:style/Theme.DeviceDefault.Light"> <item name="android:windowSwipeToDismiss">false</item></style>

DismissOverlayView + GestureDetector for long press

Page 23: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

ALLOWING USER TO CANCELDelayedConfirmationView

Page 24: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

SHOWING CONFIRMATION ANIMATIONConfirmationActivity

Page 25: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

UI EXAMPLES

Page 26: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

WEARABLE DATA LAYER APIPurpose

GoogleApiClientData Items

AssetMessage

NodeWearableListenerService

DataListener / MessageListener / NodeListener

Page 27: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

GOOGLEAPICLIENTbuild with Wearable.API

attach callbacks and listenersconnect

@Overridepublic void onCreate(Bundle b) { super.onCreate(b); mGoogleApiClient = new GoogleApiClient.Builder(this) .addApi(Wearable.API) .addConnectionCallbacks(this) .addOnConnectionFailedListener(this) .build();}

Page 28: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

CONNECTING@Overrideprotected void onStart() { super.onStart(); mGoogleApiClient.connect();}

@Override //ConnectionCallbackspublic void onConnected(Bundle connectionHint) { Wearable.DataApi.addListener(mGoogleApiClient, this); Wearable.MessageApi.addListener(mGoogleApiClient, this); Wearable.NodeApi.addListener(mGoogleApiClient, this);}

Page 29: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

DISCONNECTING@Overrideprotected void onStop() { Wearable.DataApi.removeListener(mGoogleApiClient, this); Wearable.MessageApi.removeListener(mGoogleApiClient, this); Wearable.NodeApi.removeListener(mGoogleApiClient, this); mGoogleApiClient.disconnect(); super.onStop();}

Page 30: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

DECIDING WHICH TO USEReplicate data?

Less than 100KB, use Data*100KB or more, use Asset

Message-based

Page 31: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

DATAITEM (SENDING SMALL ITEMS)Payload

Path

Page 32: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

DATAMAP (SENDING SMALL ITEMS #2)Like a Bundle

public void syncCount() { PutDataMapRequest dataMap = PutDataMapRequest.create("/count"); dataMap.getDataMap().putInt(COUNT_KEY, count++); PutDataRequest request = dataMap.asPutDataRequest(); PendingResult<DataApi.DataItemResult> pendingResult = Wearable.DataApi .putDataItem(mGoogleApiClient, request);}

Page 33: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

ASSET (SENDING LARGE BINARY DATA)createFrom*

PutDataRequest.putAsset()PutDataMapRequest.getDataMap().putAsset()

Asset.createFromBytes(byteStream.toByteArray());

private void sendPhoto(Asset asset) { PutDataMapRequest dataMap = PutDataMapRequest.create(IMAGE_PATH); dataMap.getDataMap().putAsset(IMAGE_KEY, asset); dataMap.getDataMap().putLong("time", new Date().getTime()); PutDataRequest request = dataMap.asPutDataRequest(); Wearable.DataApi.putDataItem(mGoogleApiClient, request) .setResultCallback(new ResultCallback<DataItemResult>() { @Override public void onResult(DataItemResult dataItemResult) { LOGD(TAG, "Sending image was successful: " + dataItemResult.getStatus() } });

}

Page 34: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

MESSAGEWearable.MessageApi.sendMessage()

private void sendStartActivityMessage(String node) { Wearable.MessageApi.sendMessage( mGoogleApiClient, node, START_ACTIVITY_PATH, new byte[0]).setResultCallback( new ResultCallback<SendMessageResult>() { @Override public void onResult(SendMessageResult sendMessageResult) { if (!sendMessageResult.getStatus().isSuccess()) { Log.e(TAG, "Failed to send message with status code: " + sendMessageResult.getStatus().getStatusCode()); } } } );}

Page 35: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

PENDINGRESULTasync

setResultCallback();

syncawait();

Page 36: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

WEARABLELISTENERSERVICEcreate in both wearable and handheld apps

<service android:name=".YourListenerService"> <intent-filter> <action android:name="com.google.android.gms.wearable.BIND_LISTENER" /> </intent-filter></service>

Binder.clearCallingIdentity() / restoreCallingIdentity()

Page 37: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

LISTENING FOR DATAMAPSonDataChanged()

@Overridepublic void onDataChanged(DataEventBuffer dataEvents) { LOGD(TAG, "onDataChanged: " + dataEvents); final List<DataEvent> events = FreezableUtils.freezeIterable(dataEvents); dataEvents.release(); // Loop through the events for (DataEvent event : events) { Uri uri = event.getDataItem().getUri(); String path = uri.getPath(); // Find the path we're interested in and work with that event if (COUNT_PATH.equals(path)) { } }}

Page 38: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

LISTENING FOR MESSAGESonMessageReceived()

public void onMessageReceived(final MessageEvent messageEvent) { LOGD(TAG, "onMessageReceived() A message from watch was received:" + messageEvent .getRequestId() + " " + messageEvent.getPath());}

Page 39: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

LISTENING FOR PEERSonPeerConnected() / onPeerDisconnected()

@Overridepublic void onPeerConnected(Node peer) { LOGD(TAG, "onPeerConnected: " + peer);}

@Overridepublic void onPeerDisconnected(Node peer) { LOGD(TAG, "onPeerDisconnected: " + peer);}

Page 40: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

LISTENING IN AN ACTIVITYDataApi.DataListener

MessageApi.MessageListenerNodeApi.NodeListener

GoogleApiClient build / connect / addListener / removeListener/ disconnect

onDataChanged() / onMessageReceived() /onPeerConnected() / onPeerDisconnected()

Page 41: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

FREEZABLEInterface for data objects that support being frozen into

immutable representations..freeze();

FreezableUtils.freezeIterable();

Page 42: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

DATA LAYER EXAMPLES

Page 43: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

PACKAGING WEAR APP

Page 44: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

PROGUARDWearableListView

Page 45: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

NEXT STEPSStack Overflow - use android-wear tag

SDK ExamplesSet up Emulators (and maybe buy a Watch)

Send feedbackStop by our booth

Page 46: MAKING APPS FOR ANDROID WEAR LUIS DE LA ROSA€¦ · Currently targeting only watches Several manufacturers and models Builds upon your Android experience. WHAT IS NOT IN WEAR webkit

THANKS!Luis de la Rosa

twitter.com/@louielouiegoogle.com/+luisdelarosa

luisdelarosa.com/wear