Watch Faceを作る コンパニオンアプリの作成 - Firespeed

Android WearのWatch Faceを作る 目次
今回はWearのWatchFaceと連携するスマートフォン側アプリを開発します。

スマートフォン側のアプリはモジュールmobileにて開発します。
Watch Faceのアプリは、Wear用のAPKとスマートフォン用のAPKが別々に動きます。

Wearアプリの修正

コンパニオンアプリを開くためのIntentを指定

最初にWear側の設定を行います。
Wear側でスマートフォンから設定を受け付けるようにWearモジュールのAndroidManifestを修正します。
Serviceの配下に次の記載を追加します。この状態でWearにインストールするとWear側の準備は完了です。
org.firespeed.myapplication部分はパッケージ名で置き換えてください。

            <meta-data
                android:name="com.google.android.wearable.watchface.companionConfigurationAction"
                android:value="org.firespeed.myapplication.CONFIG" />

スマートフォン側アプリを作る

スマートフォン側のアプリのことをコンパニオンアプリといいます。

コンパニオンアプリはWearとは異なるAPKとしてスマートフォンに直接インストールします。
Android Wearと接続されているスマートフォンを用意してUSBでPCと接続してください。

WearのWatchFaceとコンパニオンアプリはそれぞれ異なるモジュールのためお互いのソースコードをそのままでは参照できません。
しかし、Configで設定する内容はどちらも同じです。今回は一つだけですが、今後設定値を増やしたいと思った時にWatch Faceとコンパニオンアプリのどちらも設定を追加しないといけないのは大変です。
そのため、どちらからでも読み込めるようにConfigクラスを独立したbothモジュールとして切り離してみましょう。

bothモジュールの作成

モジュールの作成

Android Studioで
File -New - New moduleを選択します。


New ModuleダイアログでAndroid Libraryを選びます。


Application Library NameをBoth
Package nameをWearのPackage nameに合わせMinimumSDKを18とします。
FinishでModuleを作成します。

build.gradelの作成

bothモジュールが作成されたら
bothモジュールのbuild.gradleを選びdependencies から次を削除して

    compile 'com.android.support:appcompat-v7:23.1.1'

以下を追加します。

    compile 'com.google.android.gms:play-services-wearable:8.1.0'

bothモジュールを読み込めるようにwearモジュールとmobileモジュールの両build.gradleについてdependencies に

    compile project(':both')

を追加します。

config.javaの移動

wearモジュールのsrc/main/java/パッケージネーム内にあるconfig.javaをbothモジュールのsrc/main/java/パッケージネーム内に移動します。


WearモジュールのConfigActivity.javaとMyWatchFace.java を開いてConfigクラスが見つけられずにエラーとなっているのでbothのパッケージ名にあるConfigをインポートします。

  import org.firespeed.both.Config;

mobileモジュールの修正

画面の作成

Android Wearの設定画面作成は基本的に通常のActivityと同様の手順で行います。
まず、コンパニオンアプリを修正するためにmobileモジュールを開きます。
mobileモジュールを右クリックしてNew-Activity-Empty Activityを選択します。
Generate Layout Fileにチェックが入っていることと、Launcher Activityのチェックが外れていることを確認してFinishをクリックします。
res/values/strings.xmlを開いてチェックボックスのメッセージを追加します。

<resources>
    <string name="app_name">My Application</string>
    <string name="smooth">Smooth</string>
</resources>

res/layout/activity_main.xmlを開いてチェックボックスを追加します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="org.firespeed.myapplication.MainActivity">

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/smooth"
        android:id="@+id/smooth"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"/>
</RelativeLayout>

MainActivity.javaを開いてチェックボックスの処理を追加します。
追加する内容はConfigActivityと同様です。

コンパニオンアプリを実行する。

メニューバーのモジュールでmobileを選択します。

mobileにエラーが表示されることが有ります。

これは通常のアプリと違ってLauncherから起動するActivityが存在せず、どのActivityを起動して良いのかがAndroid Studio側から不明なためです。
そこで、MainActivityを起動するように設定を行います。

メニューバーからRun-Edit Configurations...を選びます。


Generalタブになっていることを確認し、Launch OptionsをSpecified ActivityにしてActivityをMainActivityとします。


この状態で実行するとSmoothのチェックボックスが画面上に表示されます。
チェックボックスをタップして、リアルタイムにWatchFaceの針がなめらかに動いたり一秒ごとに動いたりすることを確認してください。
この通信は双方向のため、Watch Face側で設定を変更してもリアルタイムにコンパニオンアプリのチェックボックスが切り替わります。

デバッグではなく、通常の状態で起動するためにはAndroid Wearアプリをスマートフォンで開いてWatch Faceの選択画面で作成したWatch Faceを選ぶと中央にギアが表示されます。
ギアをタップするとMainActivityが開きます。


このようにコンパニオンアプリを用意することでスマートフォン側のリッチな環境を使ってより細かな設定を行うことが出来ます。
GooglePlay Storeに展示する場合は署名済みのAPKを作ってmobileモジュールのAPKのみを公開します。
署名済みmobile APKの中にはwear APKが内包されており、ユーザーがGooglePlay Storeからダウンロードすると自動的にmobileモジュールAPKがインストールされ、その中のwearモジュールAPKがwearに転送されインストールされます。

これで基本的なWatchFaceの作り方はおしまいです。

次回はいよいよ最終回。Watch Faceを作る上でのTipsを紹介します。