Build your First Wearable Android App

In this digital world, the wearable devices are gaining more momentum after Google releases its Android Wear platform for the developers. The most affordable smartwatches are powered by this platform and we see new models in the market than ever. Smart wearable devices are low-cost sensors with versatile connectivity and fashionable designs are more appealing and accessible. As of now, Apple has its own smartwatch, Google is touching new boundaries in this wearable device competition by inducing attractive features of Wi-Fi connectivity, easy navigation with wrist gestures and so on. Android Wear platform is made available for its own IDE in the Android Studio.

Our application will be a simple android app that sends notifications from a phone to paired wear device by corresponding wearable app with a single button click. Android Studio is the main standard for developing the Android App Development. For developing the apps for wearables you need to update your SDK tools to the higher version. You can then set up either an Android Wear Device or an Android Wear Emulator.

For an emulator

1. Using AVD Manager create an Android Wear square or round device
2. Start the emulator device
3. Install the Android Wear app from Google Play
4. Connect your handheld to your development machine through USB
5. Forward the AVD communication port to the handheld device with the command

CSS
adb -d forward tcp:5601 tcp:5601

(this must be done every time you connect/reconnect your handset)
6. Start the Android Wear app on your phone and connect to the emulator through the app settings.

For an Android Wear Device

1. Install the Android Wear app on your smartphone via the Google Play Store
2. Pair your handset and wearable using the instructions in the app
3. Enable developer options on your wear device (tap build number seven times in Settings > About)
4. Enable ADB debugging
5. Connect your wearable to your development machine, and you should be able to install and debug apps directly to your wearable.

Create your Project

You might feel to create your own project in the Android Studio as it helps to set up your Android wearable project in the best way. All you need to do is Click File > New Project and follow the given instructions. The process is very similar to creating a phone or tablet project but make sure you select both “Phone and Tablet” and “Wear” in the “Form Factors” window.

After the completion of the wizard, Android Studio will create a new project with two modules for mobile and wear. For every module, you have to create activities, services, layouts and more. The smartphone app should do intensive processing and network communications and then send a notification to the wearable.

Mobile Module

This is similar to the Android development which you are used to. We create a simple activity with an EditText field and a button for our mobile module. The notification is sent when the text is entered into the EditText when the button is tapped.

The layout for the application is very simple.

XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:orientation="vertical">
    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"/>
    <Button
        android:id="@+id/actionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        style="@style/Base.Widget.AppCompat.Button.Borderless"
        android:text="@string/show_notification"
        android:onClick="sendNotification" />
</LinearLayout>

The MainActivity is pretty simple.

JAVA
public class MainActivity extends AppCompatActivity {
    EditText editText;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        editText = (EditText) findViewById(R.id.editText);
    }
    public void sendNotification(View view) {
        String toSend = editText.getText().toString();
        if(toSend.isEmpty())
            toSend = "You sent an empty notification";
        Notification notification = new NotificationCompat.Builder(getApplication())
                .setSmallIcon(R.mipmap.ic_launcher)
                .setContentTitle("AndroidAuthority")
                .setContentText(toSend)
                .extend(new NotificationCompat.WearableExtender().setHintShowBackgroundOnly(true))
                .build();
        NotificationManagerCompat notificationManager = NotificationManagerCompat.from(getApplication());
        int notificationId = 1;
        notificationManager.notify(notificationId, notification);
    }
}

Notice that when building our Notification, we called the extend() method, providing a NotificationCompat.WearableExtender() object.

Run the Mobile Module

You want to run the mobile module just like any other Android aplication. As you have paired it with a Wear device running the project on your device will display notifications on your wearable.

Wear Module

At this stage, you should be able to view the notifications from your mobile device on your wearable device. However, we are not content with that and are going to build and run an actual Wearable app. Wear devices have less screen than the handheld devices, usually round or rectangular which brings out its own set of layout challenges. Google has maintained some excellent designs for Android Wear developers and included the Wearable UI library in your project which automatically use the Android Studio project wizard to create your wearable app. You need to add your wear build.gradle file:

JAVA
dependencies {
  compile 'com.google.android.support:wearable:+'
}

When you create your project using the Android Studio Project Wizard you have an activity set up for Round and Rectangular wear devices automatically. The activity_wear.xml file is as given below:

XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.wearable.view.WatchViewStub
    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:id="@+id/watch_view_stub"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:roundLayout="@layout/round_activity_wear"
    app:rectLayout="@layout/rect_activity_wear"
    tools:context=".WearActivity"
    tools:deviceIds="wear">
</android.support.wearable.view.WatchViewStub>

There are some widget changes in the round and rectangular activity wear. It is just a few caveats and you have the freedom to design your layout completely different for round and rectangular screens.
1. Round_activity_wear.xml

XML
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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:layout_box="all"
    tools:context=".WearActivity"
    tools:deviceIds="wear_round">
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/hello_round"
        android:onClick="beginCountdown" />
    <android.support.wearable.view.DelayedConfirmationView
        android:id="@+id/delayedView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:circle_border_color="@color/green"
        app:circle_border_width="20dp"
        app:circle_color="@color/white"
        app:circle_radius="60dp"
        app:circle_radius_pressed="60dp"
        app:circle_padding="16dp"
        app:update_interval="100"/>
</FrameLayout>

It displays the following output.

2. Rect_activity_wear.xml

XML
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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:layout_box="all"
    tools:context=".WearActivity"
    tools:deviceIds="wear_round">
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/hello_round"
        android:onClick="beginCountdown" />
    <android.support.wearable.view.DelayedConfirmationView
        android:id="@+id/delayedView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:circle_border_color="@color/green"
        app:circle_border_width="20dp"
        app:circle_color="@color/white"
        app:circle_radius="60dp"
        app:circle_radius_pressed="60dp"
        app:circle_padding="16dp"
        app:update_interval="100"/>
</FrameLayout>

The above code will display the following output.

Just like any other Android smartphone or a tablet activity, WearActivity extends the android.app.Activity we set an OnLayoutInflatedListener.object on our WatchViewStub which gets called after WatchViewStub has recognised whether the wearable device is round or rectangle. In our app, we want the Button and DelayedConfirmationView then call showOnlyButton() to hide the DelayedConfirmationView and only show the button.

public class WearActivity extends Activity {
    private Button button;
    private DelayedConfirmationView delayedView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_wear);
        final WatchViewStub stub = (WatchViewStub) findViewById(R.id.watch_view_stub);
        stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() {
            @Override
            public void onLayoutInflated(WatchViewStub stub) {
                button = (Button) stub.findViewById(R.id.button);
                delayedView = (DelayedConfirmationView) stub.findViewById(R.id.delayedView);
                delayedView.setTotalTimeMs(3000);
                showOnlyButton();
            }
        });
    }

    public void beginCountdown(View view) {
        button.setVisibility(View.GONE);
        delayedView.setVisibility(View.VISIBLE);
        delayedView.setListener(new DelayedConfirmationView.DelayedConfirmationListener() {
            @Override
            public void onTimerFinished(View view) {
                showOnlyButton();
            }
            @Override
            public void onTimerSelected(View view) {
            }
        });
        delayedView.start();
    }

    public void showOnlyButton() {
        button.setVisibility(View.VISIBLE);
        delayedView.setVisibility(View.GONE);
    }
}

Run the Wear Module

Select the wear run/debug configuration to run the wear module and click on the pay button since this is a debug build, you can directly install to your wear device or emulator. Just make sure your device is connected or emulator wear is running and select your device when prompted.

Exciting times ahead

We can thus conclude from the given article how to build your own Android wearable app. Happy Coding !