Cosc 5/4730

Android Wear

Note

• This is all for Android Wear v5.x– V1.x was very limited by comparison• It was very difficult to even create a watchface.

devices and emulators

• You can setup a wear emulator, but you need to connect a physical device/phone to it.– Directions: https://

developer.android.com/training/wearables/apps/creating.html

– You will need android wear app installed on the device.

Notifications

• For many of the applications, it is as simple a sending a notification to the wearable device– As well as device.

• Clearing a notification on wearable clears it on the phone as well.

– You MUST use the NotificationCompat from the support lib v4 (20 and above) and import the following:

import android.support.v4.app.NotificationCompat;import android.support.v4.app.NotificationManagerCompat;import android.support.v4.app.NotificationCompat.WearableExtender;

Simple notification

• A simple one looks just like a normal notification– But the user will get on the wearable, and when

they swipe left o reveal the Open action, which invokes the intent on the handheld device

Simple notification code//create the intent to launch the notiactivity, then the pentingintent.Intent viewIntent = new Intent(this, NotiActivity.class);PendingIntent viewPendingIntent = PendingIntent.getActivity(this, 0, viewIntent, 0);

//Now create the notification. We must use the NotificationCompat or it will not work on the wearable.NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this).setSmallIcon(R.drawable.ic_launcher) .setContentTitle("Simple Noti").setContentText("This is a simple notification") .setContentIntent(viewPendingIntent);

// Get an instance of the NotificationManager serviceNotificationManagerCompat notificationManager = NotificationManagerCompat.from(this);

// Build the notification and issues it with notification manager.NotificationManager.notify(notificationID, notificationBuilder.build());

Simple notification result

• The notification will look this this and then swipe left to an open button

Adding your own button.• Same as before, but use the addAction(…)

method.– Both the device and wearable will show the action.

.addAction(R.drawable.ic_action_time, "take Picutre", cameraPendingIntent);

– Where the Camera intent launches the camera.

Wearable only actions.

• Allows us to change the notification so it’s different from the device and wearable– Instead of addaction, we use .extend(…)– .extend(new WearableExtender().addAction(action)• Where action is already build action

– NotificationCompat.Action action = new NotificationCompat.Action.Builder(R.drawable.ic_action_time,"take a Picutre", cameraPendingIntent).build();

– So the take a picture action only shows on the wearable.

Other styles.

• As with notifications, we can also use a BigTextStyle or InboxStyle (see notification inbox before).– BigTextStyles allows more text room and the

notification takes up most of the space on the wearable.• BigTextStyle bigStyle = new

NotificationCompat.BigTextStyle();• bigStyle.bigText(eventDescription);

– And then in the builder• .setStyle(bigStyle)

Voice Actions

• If the wear device accepts voice input, then you can also add to your notifications.– The user will talk to the wearable, because there is

no keyboard.• Uses the RemoteInput class, via an intent and

add it as an action.– This intent can be captured via the onCreate or

onNewIntent• Note this can also be done with a broadcast receiver and

intent-filter not shown here.

Voice Actions (2)

• For the notification:– With need id/key for this, so using this:

String EXTRA_VOICE_REPLY = "extra_voice_reply";

– create the remote input part for the notification.RemoteInput remoteInput = new RemoteInput.Builder(EXTRA_VOICE_REPLY).setLabel("Reply").build();

– Create the reply action and add the remote inputNotificationCompat.Action action = new notificationCompat.Action.Builder( R.drawable.ic_action_map, "Reply", replyPendingIntent).addRemoteInput(remoteInput).build();

– And add the action to the notification as before..extend(new WearableExtender().addAction(action)

Voice Actions example

Voice Actions (3)

• Now you get the intent in your activity and pull out the string of text. It uses the Id/Key from before.

Bundle remoteInput = RemoteInput.getResultsFromIntent(getIntent());if (remoteInput != null) {

info = remoteInput.getCharSequence( EXTRA_VOICE_REPLY ).toString();

}

Example code

• WearNotiDemo – Shows the code via a subroutine for each of the

notifications that I listed.

• You can run this via a wearable emulator and phone or with a wearable and phone.– Note that the wearable emulator will need the

physical keyboard present checked, because there is no voice, you have to type.

Wearable Apps

• This is a little bit of gmagic here.– Much of there api are undocumented and are sort

of described in there training material.• There a document for the API, but it only tells you the

names, parameters, and return values of the API. But NOT actually what it does… really helpful.

• Also not setup for eclipse.– Github for this lecture has the wearable library

needed.

Wearable Apps

• First issue: Round or Square?

Round or Square? Both!• In the main activity layout your can use WatchViewStub<android.support.wearable.view.WatchViewStub

…android:id="@+id/watch_view_stub"app:rectLayout="@layout/rect"app:roundLayout="@layout/round"tools:deviceIds="wear" >

</android.support.wearable.view.WatchViewStub>• Where the rectLayout and roundLayout point to layouts you can

created for each device.– Likely they will have the same Widgets/IDs for each layout, but the way

it looks will be different to deal with square or round.

Round or Square? Both! (2)• Rect.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"… tools:deviceIds="wear_square" > <TextView android:id="@+id/text“ … android:text="@string/hello_square" /></LinearLayout>

• Round.xml<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"… tools:deviceIds="wear_round" > <TextView android:id="@+id/text" … android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="@string/hello_round" /></RelativeLayout>

Round or Square? Both! (2)• In the activity, OnCreate:

setContentView(R.layout.activity_main);WatchViewStub stub = (WatchViewStub) findViewById(R.id.watch_view_stub);stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() {@Overridepublic void onLayoutInflated(WatchViewStub stub) { mTextView = (TextView) stub.findViewById(R.id.text);}});

• In the onLayoutInflated, we know which layout has been inflated and we use stub to find the widgets and setup like normal.

• But I’m skipping a lot of different layout and “new” widgets that you have access to via the wearable library.– Many are new to lollipop, in google glass as well. Like cards.

• Some widgets “sort of” described in the training. Others are not.

Example code

• DemoWearApp– Is my code based on DemoWearApp, where you

can a random number (click the checkmark for another number).

Creating your Wearable Application

• Andriod studio 1.1.0 has a template to create a wear app. – It will create a default round and square template

for you.

– To create an installer without signing your app, follow the directions on the next couple of slides.

Wrapper app

• To install it on the physical device you will need a wrapper activity to install on the phone.– Requires google-play-service-lib see http://

developer.android.com/google/play-services/setup.html#Install to import it into your work space.

Wrapper app

• This is a shell app.– First take note of 3 things from the wearable app.

– Package name, versionCode, and VersionName• We will need all three.

– So create a new project.• The Package name must match the wearable app.

• Uncheck the create activity, not needed.– Delete the following if they exist: res/menu directory and any layout/ files if they

exist.

• Create res/raw and res/xml directories.

• Copy the apk from the wearable application• See /bin/ directory of that project.

– And copy into res/raw directory. Rename to all lower case, no special characters.• Example: weardemo1.apk

Wrapper app xml file

• Xml/wearable_app_desc.xml file– This describe the apk to be installed onto the device.

<wearableApp package="edu.cs4730.weardemo1"> <versionCode>2</versionCode><versionName>1.1</versionName><rawPathResId>weardemo1</rawPathResId></wearableApp>

– This match the androidManifest.xml information for the wearable app.• And weardemo1 is the filename of the apk in raw/

Wrapper app androidManifest.xml• This file will look something like this. No activity is listed, because it

not needed. The 4 lines in red are required.<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="edu.cs4730.weardemo1" …> <uses-sdk …/>

<application …> <meta-data android:name="com.google.android.wearable.beta.app" android:resource="@xml/wearable_app_desc"/> <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> </application></manifest>

Wrapper app finally!

• “compile” and install it on the phone connected to the wearable device.

• Not nothing will actually happen on the phone, because there is no activity.

– Now check in the start section of the wearable for the name of you wearable app.• Hopefully you tested it thoroughly on the emulator, so

it doesn’t just crash!

WatchFaces

• Studio will provide you with two possible watch face apps. – Digital and analog. From there you can change them up as

needed, or create your own.– You watchface must deal with ambient mode.

• There is where the screen is “darkened” and save battery life. Normally remove all color and changes over to 1 minute update.

– Otherwise the layout and code is very similar to a standard android app.

• Very helpful: http://developer.android.com/training/wearables/watch-faces/index.html

WatchFaces (2)

• 3 example watch face are provided– BeerWatchFace• Doesn’t show the time, instead “Beer time”

– Yellow in normal mode, gray in Ambient mode.» Show the min needed to get a watch face working.» Only updates once a minute.

– Digital• Shows digital time,

– Normal mode, shows seconds, ambient mode just hour and minute

WatchFaces (3)

– Batman watchface• Show date and time, plus a graphic

– In ambient mode, seconds are not shown and graphic is gray.

Data communication.

• The device and wear can send messages via the DataLayer, which comes from the GooglePlay services.– In the build.gradle for both wear and mobile

• compile 'com.google.android.gms:play-services-wearable:6.5.87‘ (or current version)

– To send a message• You will need build a GoogleApiClient, that includes the

wearable API and the necessary listeners.– Onconnected, onconnectionsuspeneded, and onconnectionfailed.

– And you send the message via your “message path”, which I called, “/message_path”, but you can create your own path name.

Sending a message

• Build a new GoogleApiClient that includes the Wearable APIgoogleClient = new GoogleApiClient.Builder(this) .addApi(Wearable.API) .addConnectionCallbacks(this) .addOnConnectionFailedListener(this) .build();

• Then you must use a thread to send the message, since this is a blocking call.MessageApi.SendMessageResult result = Wearable.MessageApi.sendMessage(googleClient, node.getId(), path, message.getBytes()).await();– See the code for the whole thread.

Receiving a message

• Requires a WearableListenerService• Simple service that has a onMessageReceived

method.– Check to see if it’s on your “message path”– Then deal with the message.• In my code, it uses a local broadcast receiver to send a

message to the activity code, so it can be displayed on the wearable and device screens.

Important note

• Both the mobile and wear code MUST have the same applicationId in their build.gradle files– Otherwise it won’t work.

Example code

• There is an WearableDatalayer example that sends and receives messages between a “phone” device and wearable device.

• Very useful references.• http://android-wear-docs.readthedocs.org/en/latest/sy

nc.html • https://github.com/LarkspurCA/WearableMessage • There are more references in the project as well.

References

• Android’s training site– http://developer.android.com/training/building-wearables.html – https://

developer.android.com/training/wearables/apps/index.html – http://developer.android.com/design/wear/principles.html

• https://medium.com/@tangtungai/how-to-develop-and-package-android-wear-app-using-eclipse-ef1b34126a5d

• http://blog.benjamin-cabe.com/2014/07/04/how-to-setup-eclipse-for-android-wear-development

QA&