In the first part of the tutorial we've covered the basics of creating a digital Android Wear watchface. In this part we will see how one can add a settings panel for her watchface in the Android Wear mobile application. By the end of this article you will be able to control the background colour and the time and date colours of your watchface from inside the Android Wear application on your mobile device.

In order to establish a communication channel between the watch and the mobile device, you must use the Wearable Data Layer API which is part of Google Play services. As the official documentation states:

Because these APIs are designed for communication between handhelds and wearables, these are the only APIs you should use to set up communication between these devices. For instance, don't try to open low-level sockets to create a communication channel.

With the help of the Wearable Data Layer API you can send accross your devices multiple types of objects:

For our communication channel we will be using the DataApi to send DataItems from the mobile device to the data layer while the watchface will be listening for any modifications.

Creating the mobile settings activity

As we have seen above, the API we will be using is part of Google Play services, so you will have to specify a meta-data entry in your mobile/src/main/AndroidManifest.xml file under the <application> tag:

Next, create an empty activity in mobile/src/main/java/your_package that will serve as the settings activity for your watchface. Let's call it SimpleWatchFaceConfigurationActivity. In order the activity to be perceived as a settings activity for your watch face, you will have to specify an <intent-filter> in your mobileAndroidManifest.xml:

As you can see, you have to specify a custom <action> for your intent filter alongside the categories. In our case, the action name is formed out of the package name and a config string: com.catinean.simpleandroidwatchface.CONFIG_DIGITAL.

On the wear module side, you will have to add an additional <meta-data> field to your previously created <service> entry in the AndroidManifest.xml file:

See how the meta data value corresponds with the action name of our activity.

For now, our activity is empty. Let's populate it with two entries in order the user to be able to configure the watchface background colour and the date and time colours. It's layout will be simple, formed of a LinearLayout with two elements (one for the background colour and one for the date and time colours). The mobile/src/main/res/layout/activity_configuration.xml will look like this:

The toolbar element will act as an action bar for our activity (here you can find more information about toolbar). Below the toolbar we have our vertical LinearLayout that contains two RelativeLayouts as the rows (each of them containing a TextView and a preview colour represented by a simple View).

Going back to our activity, we would want to display a dialog with colour names for each of the elements. For this, we will create a simple ColourChooserDialog that will contain a simple list of colours and will be displayed whenever the user clicks on an element from the activity.

You can see that it is a simple DialogFragment that displays a list AlertDialog backed by a string arrayR.array.colors_array (for more information about dialogs in general, you can read here the official documentation).

The string array is just a resource inside mobile/src/main/res/values/arrays.xml:

The dialog provides an interface in order to notify the activity of the chosen colour. Since we will have multiple dialogs created (one for the background colour and one for the date and time colours) we will have to differentiate them by their tag.

If now you run your wear module on your wear device and then the mobile module on the mobile device, navigate to the Android Wear application, you will be able to access the settings activity.

Sending data to the Data Layer API

Now that we are able to capture the chosen colour, it is time to see how we can send it to the Data Layer API. You will have to use the GoogleApiClient class in order to connect and to send the data. In onCreate() of our activity we create the object, in onStart() we connect to the data layer and in onStop() we disconnect. Our enhanced activity will look like this:

You can see how a PutDataRequest is created on the specific path and every time we receive a colour we populate the map with it at a specific key. In the end, we send the request with the help of Wearable.DataApi.putDataItem(googleApiClient, putDataReq) method.

Now that we are able to send the colours, we have to handle them into the wear module, specifically in the previously created SimpleWatchFaceService.

Handling the received configuration in the SimpleWatchFaceService

Back in the wear module, we have to handle the configuration sent by the previously created SimpleWatchFaceConfigurationActivity in the SimpleWatchFaceService.

As we did in the configuration activity, in order to synchronize with the data layer API, we have to firstly connect to it through a GoogleApiClient object. We'll start by connecting to the API when the watchface is visible and disconnecting when not. Your SimpleWatchFaceService will look like this:

We create a GoogleApiClient object in onCreate() method of the SimpleEngine and connect when the watch face becomes visible and relase the client when the watch face is not visible anymore.

Next, we actually want to be notified when the background colour and the date and time colour values are changed in the mobile activity and every time the watch face connects to the data layer. In order to achieve this, we will have to use:

We can see that every time the watch face is visible we connect to the data layer and once connected we add the two listeners. onDataChangedListener will get notified every time there is a change in the data layer and onConnectedResultCallback is only notified when the service is firstly connected. In both cases we want to process the received DataItem - processConfigurationFor(DataItem). While processing the itmes we use the path (/simple_watch_face_config) and the keys associated with every item (we defined the keys in the SimpleWatchFaceConfigurationActivity) in order to get hold of the sent values. Once the items are identified, we pass them to the SimpleWatchFace to update the colours:

You are now set to test the whole configuration end to end. First run the wear module on your watch, then the mobile module on your phone. Jump into the Android Wear application on your phone and you can select the installed watch and access the settings screen for it. From here you can play with changing the colours for both the background and the date and time.

As usual, all the code is pushed to GitHub. I will appreciate any feedback provided.