Gearing up to start developing Android Wear Applications

Hi! I’m a Tech Lead @ TWG and wrote this post in collaboration with Jaspinder Kaur (Mobile Developer).

Source: https://blog.google/products/android-wear/android-wear-20-make-most-every-minute/

With Android wearable devices making their way into the mainstream market it gives product designers and developers an opportunity to leverage the wearable technology to provide more delightful experiences for the users.

In this article, we will demonstrate how to setup a project in Android studio to get you prepared for developing wearable applications. The goal is to provide all the key pieces of wearable app development to get you up and running.

Specifically, the following topics are covered:

• Setting up a wearable project
• Debugging on a wearable device
• Sharing resources between mobile and wearable applications

Let’s get started with setting up a wearable project and how to debug using a wearable Android watch.

Setup wearable project and debugging

In this section will go through:

• Step-by-step setting up a mobile and wearable module in the same project in Android studio
• Debugging a wearable application
• How to run a simple app on a wearable device

Having prior experience in developing android application with Java, Android Studio and Gradle is helpful in following this post. If you are new to Android development, we suggest to check out this link to get started.

Project Setup

Fire up Android Studio on your machine. Select Start a new Android Studio project. You will be presented with Create New Project window. Choose your Application Name, Company Domain and Project Location.

In the Target Android Devices, select Phone and Tablet and Wear along with Minimum SDK selection.

Minimum SDK selection depends on the requirements of your project. For demo purposes, we have selected API 21: Android 5.0 (Lollipop)

You will be taken through a series of steps to create a mobile project. In Add an Activity to Mobile window, select Empty Activity and click Next. On the Customize the Activity window, populate Activity Name and Layout Name.

A similar workflow will be presented for setting up your wearable project.

After hitting Next, you will be presented with a progress view.

You will be landed inside Android Studio once the project is generated. Notice the project structure on the left highlighted area in the screenshot below. There are two modules generated — mobile and wear.

Android Studio also generates relevant activity classes and xml layout files that you defined above. This is it — you have a project setup to start writing code for a wearable application.

Debugging a wearable application

Let’s setup a wearable device so you can run and test your project. We will setup the debugging via USB on an actual wearable device via the steps listed below:

1. On your watch, go to Settings > About.
2. Scroll down to Build Number and tap on that seven times.
3. You should see a toast come up that mentions that you are a developer now.
4. Back on settings, you should now see Developer options.
5. Within the Developer options, tap on ADB debugging. You will get a confirmation screen — tap the green checkmark to enable.

Once enabled, you should be able to see the wearable device in the Android Monitor panel — see below:

Running the wearable app on the device

Although we haven’t written any code so far, we can still test that everything in our environment is setup correctly by running the Hello World app. To run the app, select Wear module from the drop down on the toolbar and click the Run button. Select the wearable device you have enabled for debugging from the Select Deployment Target window and click OK. In a short while, you will see the app installed on your wearable device.

What’s next?

Now that we have the wearable device and the project setup, in the second part of the post we will cover how to effectively share resources between the mobile and wear applications.

Sharing resources between mobile and wearable applications

If your wearable app complements your mobile app, there might be certain resources or aspects of your application you want to share. A uniform user interface experience by using same color schemes, custom font text views is a good example.

In this section we will go through:

• Creating an Android library to share common user interface elements between handheld and wearable modules
• Creating a custom UI element sharing that element between the two modules

Creating a SharedResources Android library project

Let’s get started with creating the shared library. Go to File > New > New Module.

On the Create New Module window, select the Android Library module. Click Next. You will land on a window to define Application/Library Name, Module name and Minimum SDK. Define an appropriate name for your library — in our case, we have inputted Shared Resources. As for the minimum SDK requirement, it should be the same minimum (or lower) as your wearable and mobile modules.

There are two ways of validating if the new shared module has been created and configured. First, the project structure in the file manager window should now have a sharedresources module, as shown below.

Second, if you go to settings.gradle on the project level, you will see sharedresources added.

Adding the dependency

Now to connect all the modules together, we need to add the dependency of sharedresources library in mobile and wear modules. To do so, go to mobile module > build.gradle file. Inside the dependencies block, add compile project(path: ':sharedresources').

Repeat the same process for the wear module to add dependency. The infographic below summarizes the project structure and the relationship between modules.

Leveraging common application components

The goal of this section is not to show to create a custom UI widget but how to set up a pattern to share common elements between mobile and wearable applications. As an example, we have created a CustomTextView class in sharedresources.

The details of implementation can be found in the sample project hosted on Git.

Because we have already done the hard work of setting up the gradle dependency for sharedresources in mobile and wear modules, we are ready to use the custom textview we have created in the xml layouts.

<io.twg.sharedresources.CustomTextView 
    android:id="@+id/clock" 
    android:layout_width="wrap_content"      
    android:layout_height="wrap_content"  
    android:layout_gravity="bottom|start" 
    android:textColor="@android:color/white"/>

This pattern can be replicated for any other shared elements between your mobile and wear projects.

You are ready!

Although setting up a shared module is not required to get started for developing wearable applications, we found that this project architecture saved our team development and testing time.

Next Steps

This is just tip of the iceberg in terms of getting started with wearable API. For getting information in other areas of wearable API, check out this link. Full source code for above tutorial is hosted on Git — here is the link.

We hope you find this helpful in your journeys of creating some awesome android wearable applications.