How to deliver a wearable app using Fabric

Published in

Samsao

10 min readJun 15, 2016

I’ve had a hard time finding simple, straightforward samples for wear apps. I’ve had a much harder time to figure out how to catch the exceptions that are being thrown by the watch when it crashes. So I decided to write a tutorial myself. Hopefully you’ll find here all the information you need to create a wear app, receive crash reports on Crashlytics and distribute your app using Beta. I’ll try to be as comprehensive as possible by showing all steps of the process. Let me know in the comment section if you need any extra help.

There are 4 big steps that we have to follow to accomplish our goal:

A. How to create a wearable app
B. How to test your wearable app
C. How to setup Fabric
D. How to setup Beta and send a build to your client

A. How to create a wearable app

Android Studio allows us to create a wearable app with minimal configuration. Let’s follow Android Studio step-by-step to have a very basic example to work on.

Select “Start a new Android Studio project” from their launching screen

Configure your new project

Application name — The name your application. It can contain spaces. We are using “Wear App Sample”.

Company domain — The internet domain of your company. We are using samsaodev.com because that’s our internet domain. Go check us out :D You can use example.com or any other domain name for what matter. This parameter only matters because it is a part of the package name…

Package name — The package name is what matters here. It must be unique. Every single app in the Play Store contains a unique package name. That’s the reason why most companies use their domain name in the package name. Think about the package name as a folder system. Imagine that every dot is a slash and every name between dots is a folder name. So, for com.samsaodev.wearappsample we can imagine a folder named com that contains all domain names with suffix .com. One subfolder for each domain. One of these subfolders would be samsaodev. Inside samsaodev folder there would be one subfolder for each app developed by Samsao. If one day we create a “TV App sample” we can use package name com.samsaodev.tvappsample. The folder would look like this

─> com
    └─> samsaodev
         └─> wearappsample
         └─> tvappsample

Android Studio allows you to edit the package name if you want. But it seems to be a very reasonable idea to include the domain name of your company in the package name of your app because domain names are intrinsically unique.

As a side note I would like to point out that if you use Gradle to build your app you can override the package name by overriding the applicationId variable on your app build.gradle. Just be careful when modifying it because the mobile app and the wear app should have the exact same package name.

Project location — Choose the destination local folder. Anywhere is fine.

Select Wear and Android Studio will create two modules — one mobile app and one wear app

Let’s go with the simplest example possible, Empty Activity for the win.

Default values are fine!

Again we will go with the simplest example. It is a “Hello, World” example.

Here we have to pause and clarify some points.

Note that the main activity on both wearable and mobile apps will have the same name for activity (Java class) and same layout name (xml). There is no conflict between mobile and wearable modules. They belong in different modules.

// WEAR
$PROJECT_LOCATION/wear/src/main/java/com/samsaodev/wearappsample/MainActivity.java
$PROJECT_LOCATION/wear/src/main/res/layout/activity_main.xml// MOBILE
$PROJECT_LOCATION/mobile/src/main/java/com/samsaodev/wearappsample/MainActivity.java
$PROJECT_LOCATION/mobile/src/main/res/layout/activity_main.xml

So we have two modules inside one project. Modules wear and mobile are inside the project called Wear App Sample. In the same way that android libraries projects usually contain two modules, a library module and a sample mobile app to illustrate how the library works.
There are 3 layout files-activity_main, round_activity_main, and rect_activity_main. As you probably assumed activity_main is the parent layout and it will use round or rect layout depending on which type of wearable user has.

<android.support.wearable.view.WatchViewStub
    android:id="@+id/watch_view_stub"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:rectLayout="@layout/rect_activity_main"
    app:roundLayout="@layout/round_activity_main"
    tools:context="com.samsaodev.wearappsample.MainActivity"
    tools:deviceIds="wear">
</android.support.wearable.view.WatchViewStub>

There are some prerequisites for your wear app to be packaged properly with your mobile app. Both app have to have the same package name (applicationId variable on Gradle). All permissions needed by the watch should also be included on the mobile app manifest. (The mobile permissions should be a superset of the wear permissions)
We are ready to launch and test our app.

B. How to test your app on the watch

The way wear apps are packaged and launched on debug is different from the way it is packaged and launched on production. When we download wear apps from Play Store we are downloading a mobile app that contains a wear app packaged inside the mobile app. When your phone installs or updates an app, it checks if there is a wear app within. If there is one and the phone is also synched with a watch, the phone will automatically install the wear app on the watch.

However when debugging, it is possible to launch mobile and wear apps independently. In that matter, programmers don’t have to waste time repackaging the whole app, installing it on the phone and waiting for the phone to install it on the watch. In the long terms that saves a lot of time. In the short term it generates some confusion. And that is way you are probably reading this article.

I’ll be using a real device here because I am not 100% sure if it is possible to use a simulator. We would have to install Android Wear app on the simulator. As far as I know, that is not possible on Android Studio simulator. I don’t know about Genymotion, so I won’t be covering it in this article. Feel free to leave a comment if you have any additional information on the subject.

Since mobile simulation is out of scope, we are left with two options:

Mobile device and Wear simulator
Mobile device and Wear device

Let’s pair our handheld device with a watch (real or simulator).

B.1 Pairing your phone with a watch

Install Android Wear app, available on Google Play Store on your handheld device.
Android Wear should always be running on your phone while debugging. Just a tip here: eventually your phone will stop syncing with your device (real watch or emulator). Trust me, it will happen. When that happens force close Android Wear and reopen it. That will fix the issue Windows-style!
Decide if you will be using a real device or a simulator for the watch and follow the instructions on Creating and Running a Wearable App.

If your watch is connect to your device Android Wear should look like this:

B.2 How to launch your mobile app

Let’s launch the mobile app first followed by the wear app.

Select mobile app first

I am assuming this is not your first app. I’m also assuming your device was set up as a test device. If it wasn’t, please follow the instructions on Run Apps on a Hardware Device.

Make sure you’ve selected mobile and press the green play button or press control+R to launch the mobile app.

You should see the following screen

There is nothing wrong with Cityfone by the way…

B.3 How to launch your wear app

This time we will launch the wear app. Select wear as target and press the green arrow.

Select wear and press play

If you are successful you’ll see the following screen on your watch:

The screenshot is square… but don’t worry, the watch is still round.

“Hello Square World!” if you have a square watch.

Extra: If your watch does not have a USB port you should debug over Bluetooth. Follow instructions on Debugging over Bluetooth. If you get error when forwarding ports, try replacing localhost by 127.0.0.1.

C. How to setup Fabric

In order to setup Fabric in our project we need to

Create an account on Fabric, follow instructions on Fabric Signup Page.
Install Fabric plugin on Android Studio. Follow the instructions on Fabric Android onboard.

C.1 Setup Crashlytics using Fabric Plugin

Fabric plugin will help you install Crashlytics to your project.

Open Fabric plugin by either clicking on Fabric icon on the toolbar. Or click on Fabric plugin on the right-side bar.

That was the moment where you got lost, wasn’t it?

Now the plugin is giving us the option to chose between two projects that are exactly the same. What The Fabric? That is because we have two modules that have the same package name. One is the mobile app, one is the wear app. Which one is which? Only Fabric knows. But we will figure out which is which soon. So just choose any of them for now and let’s move on.

Fabric created a new organization for me called Gabriel Oshiro’s Projects. I can edit this organization on Fabric website. Alternatively you can add more organizations on Fabric and they will appear here as options. So, if you have different clients you can separate them creating new organizations.

We just want Crashlytics for now, you can play with it later

Select Crashlytics

Select install

Make sure you select Java and take a look at the the modifications that Fabric will make to your project:

Fabric will add its dependencies to your module build.gradle
Fabric will add a unique identifier to your Manifest file. That’s the identification of your organization created by default by Fabric.
Fabric will initialize Crashlytics services on your main activity. Ideally to make your code clean, you would create a java class that extends from Application, and you would add that initialization there. Also you might prefer to only add Crashlytics to release versions of your app. All that configuration is up to you.
Here is where you can figure out if you chose the wear app or the mobile app. Check the pieces of code that Fabric is modifying and compare with your wear and mobile app to figure out which one is which.

Launch your app and go check your dashboard on fabric.io/dashboard. You new app should be there!

C.2 Setup Crashlytics using Fabric Plugin (YES, do everything again)

Repeat all the steps you’ve done on section C1, but this time choose the project that you didn’t choose the first time. So, if you chose wear app, choose mobile this time. If you chose mobile, then choose wear this time. You can tell them apart now because the one that was setup has a yellow badge to indicate it is done.

D. How to setup Beta and send a build to your client

So, we have a wear app that is setup with Crashlytics. When the app crashes we can see it on Fabric dashboard and we will receive an email to let us know that the app crashed.

But how do we send the build to someone, without sending a .apk file via dropbox? We use Beta!

Go to Fabric dashboard. Select Wear App Sample. On the left menu select Beta.

Select Manage Groups

Give your group a name, like “test-group”
Add yourself as a tester

On your build.gradle of your mobile you have to add the following configuration:

android {
    buildTypes {
        debug {
            buildConfigField "boolean", "USE_CRASHLYTICS", "true"
            ext.enableCrashlytics = true
            ext.betaDistributionGroupAliases = "test-group"
        }
    }
}

Execute the task on gradle to clean, assemble, and upload a new build to Fabric

./gradlew clean assembleDebug crashlyticsUploadDistributionDebug

Install Beta app on your phone and you will receive a message every time a new build is ready to download. Tell your clients to do the same.

BONUS

Shoutout to Fabric team just to let them know that we found a hidden feature. Keep up with the good work!

Don’t hesitate to comment or share your experience in the comment section below.

If you want to know more about our digital agency, please visit our website or reach us here.