XamarinでAndroid WearのWatch Faceアプリを作ってみよう!(Vol.1x : プロジェクト作成編(Xamarin Studio向け))

More than 1 year has passed since last update.


◆ おしらせ

近日、この記事も更新します。


こんにちはー!ニアです。

今回はXamarin.AndroidとXamarin Studioを使って、Android Wearアプリのプロジェクトを作成し、Watch Faceアプリ用にカスタマイズする方法を紹介していきます。


1. 環境

本記事では、以下の環境で作成しました。


  • Xamarin.Android : Ver. 6.0.2.1

  • Android SDK : Ver. 5.0.1(API Level 21)とVer. 6.0(API Level 23)

  • Android SDK Tools : Ver. 24.4.1

  • Xamarin Studio : 5.0.13


2. プロジェクトの作成

Xamarin Studioを起動し、新しいプロジェクトを作成します。

新しいプロジェクトのダイアログにあるインストール済みテンプレートから、「Android」 → 「App」 → 「Wear App」を選択し、Nextボタンをクリックします。

Wear Appプロジェクトの作成1

App Nameにアプリの名前を、Organization Identiferに組織の名前を入力し、Nextボタンをクリックします。


※パッケージ名は「[組織の名前].[アプリの名前]」(但し、小文字に変換されます)となります。


Wear Appプロジェクトの作成2

プロジェクト名とソリューション名を入力し、作成ボタンをクリックして、プロジェクトを作成します。

Wear Appプロジェクトの作成3


3. Android Manifestの編集

プロジェクトを作成したら、AndroidManifest.xmlを編集しましょう。

プロジェクトのPropertiesフォルダーからAndroidManifest.xmlを開きます。

Android Manifestの編集1

AndroidManifest.xmlの下部にあるタブから「Source」(日本語版では何故か「ソ」になってますが・・・)を選択します。

Android Manifestの編集2


Q. なぜApplicationタブから項目を設定するのではなく、Sourceタブからxmlファイルを直接編集する必要があるのですか?


この章で編集する項目の中に、Applicationタブからカスタマイズできないものがあるためです。



AndroidManifest.xml(プロジェクト作成直後の時)

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="chronoir.net.watchfacetest">
<uses-sdk />
<application android:allowBackup="true" android:icon="@mipmap/icon" android:label="@string/app_name">
</application>
</manifest>


3.1. アプリ名とパッケージ名の設定

アプリ名とパッケージ名を編集する場合、manifest要素にあるpackage属性にパッケージ名を、manifest要素内のapplication要素にあるlabel属性にアプリ名を設定します。


アプリ名とパッケージ名の設定

<manifest package="[パッケージ名]">

...
<application android:label="[アプリ名]">
...
</application>
...
</manifest>


アプリ名を「@string/app_name」とした場合、プロジェクトのvalueフォルダー → string.xml内の「<string name="app_name">[アプリ名]</string>」要素の値となります。



3.2. ターゲットにするAndroidのバージョンの設定

manifest要素内にuses-sdk要素を追加し、使用するAndroid SDKのバージョンを設定します。

Watch Face APIを利用するには、Android 5.0(API Level 21)以上が必要なので、minSdkVersion属性にAPI Level番号の21を設定します。


最小のSDKバージョンの指定

<manifest>

...
<uses-sdk android:minSdkVersion="21" />
...
</manifest>


3.3. アプリを使用するデバイスの種類を宣言

manifest要素内にuses-feature要素を追加し、name属性に「android.hardware.type.watch」を設定して、Android Wearデバイスで使用することを宣言します。


AndroidWearデバイスで使用することを宣言

<manifest>

...
<uses-feature android:name="android.hardware.type.watch" />
...
</manifest>


3.4. パーミッションの設定

Watch Faceは「PROVIDE_BACKGROUND」と「WAKE_LOCK」のパーミッション宣言が必要となります。

manifest要素内に、uses-permission要素を2つ追加し、それぞれのname属性に「android.permission.WAKE_LOCK」と「com.google.android.permission.PROVIDE_BACKGROUND」を設定します。


PROVIDE_BACKGROUNDとWAKE_LOCKのパーミッション宣言

<manifest>

...
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="com.google.android.permission.PROVIDE_BACKGROUND" />
...
</manifest>


3.5. application要素の編集

manufest要素内のapplication要素に、以下の3つの属性を追加します。



  • allowBackup属性 : バックアップのサポートを利用するかどうかを表します。


  • supportsRtl属性 : 右から左方向へのレイアウトをサポートするかどうかを表します(アラビア語など、右から左方向へ文字を書く言語をサポートするためです)。


  • theme属性 : アプリケーションで使用するテーマを表します。


application要素に追加する属性

<application ...

android:allowBackup="true"
android:supportsRtl="true"
android:theme="@android:style/Theme.DeviceDefault">
</application>


Q. Service要素は追加しないのですか?


Android StudioなどでWatch Faceアプリを開発する時、application要素の中にWatch Faceのサービスの構成を定義するservice要素を追加します。

Xamarinの場合、AndroidManifest.xmlに記述する代わりに、Watch Face用のクラスの属性としてサービスの構成を定義します。ビルド時にAndroidManifest.xmlと統合して1つのマニフェストファイルが自動生成されます。



3.6. 編集後のAndroidManifest.xml

この章で編集した後のAndroidManifest.xmlを以下に示します。


AndroidManifest.xml(編集後)

<?xml version="1.0" encoding="utf-8"?>

<!-- manifest要素は、マニフェストの構成を定義します。
package属性は、アプリのパッケージ名( Google PlayでのURLで使用します )を表します。
versionCode属性は、Google Playで管理するためのバージョン番号(整数)を表します。
versionName属性は、Google Playで表示するアプリのバージョンを表します。 -->

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="[パッケージ名]"
android:versionCode="1" android:versionName="1.0"
android:installLocation="auto">

<!-- uses-sdk要素は、Android SDKのバージョンを表します。
minSdkVersion属性は、ターゲットにするAndroid SDKの最小バージョンを表します。
※ Watch Face API は Android SDK 5.0(API Level 21)以上が必要です。
※ 単位はAPI Levelです。 -->

<uses-sdk android:minSdkVersion="21" />

<!-- user-feature要素は、アプリケーションで使用している機能や、使用するデバイスの種類を宣言します。
Watch Faceアプリの場合、name属性に「android.hardware.type.watch」を設定します。 -->

<uses-feature android:name="android.hardware.type.watch" />

<!-- uses-permission要素は、アプリケーションがユーザーに許可を要求する機能を宣言します。
Watch Faceアプリの場合、「WAKE_LOCK」と「PROVIDE_BACKGROUND」が必要です。 -->

<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="com.google.android.permission.PROVIDE_BACKGROUND" />

<!-- application要素は、アプリケーションの構成を定義します。
label属性は、アプリのタイトル名を表します。
icon属性は、アプリケーションのアイコンを表します。
allowBackup属性は、バックアップサポートを利用するかどうかを表します。
supportsRtl属性は、右から左方向へのレイアウトをサポートするかどうかを表します(アラビア語など、右から左方向へ文字を書く言語をサポートするためです)。
theme属性は、アプリケーションで使用するテーマを表します。 -->

<application android:label="@string/app_name"
android:icon="@mipmap/icon"
android:allowBackup="true"
android:supportsRtl="true"
android:theme="@android:style/Theme.DeviceDefault">
</application>
</manifest>


このコードを直接コピー&ペーストしてもOKです([パッケージ名]は、アプリのパッケージ名に変更してください)。


4. プロジェクトの中身を構成

Wear Appプロジェクトの作成後の中身は、以下のような構成になっています。

プロジェクトの中身を構成1-1


4.1. 不要なファイルをプロジェクトから除外

Watch Faceアプリに不要なファイルをプロジェクトから除外しましょう。

MainActivity.cs」及びResourcesフォルダー内の「layout」フォルダーを右クリックし、メニューから「削除」を選択します。

プロジェクトの中身を構成1-2

確認ダイアログが現れたら、「プロジェクトから削除」をクリックします。

プロジェクトの中身を構成1-3


4.2. NuGetパッケージを追加・アップデート

プロジェクトにインストールされているNuGetパッケージを最新版にアップデートしましょう。

パッケージフォルダーを右クリックし、メニューから「更新」を選択します。

プロジェクトの中身を構成2-1

このプロジェクトで使用するNuGetパッケージは以下の5つです。


  • Xamarin Android Support Library - v13

  • Xamarin Android Support Library - v4

  • Xamarin Android Support Library - v7 RecyclerView

  • Xamarin Android Wear Support Libraries

  • Xamarin.Insights

足りないパッケージは、パッケージマネージャーからインストールしましょう。

パッケージフォルダーを右クリックし、メニューから「Add Package」を選択します。

プロジェクトの中身を構成2-2

NuGetパッケージマネージャーのダイアログが現れたら、パッケージソースを「nuget.org」を選択し、追加するパッケージを選択して、Add Packageボタンをクリックします。

(右上の検索ボックスに「xamarin」で始まるキーワードを入力して検索すると、見つかりやすいです。)

プロジェクトの中身を構成2-3

このプロジェクトで扱っている5つのNuGetパッケージのバージョンは以下の通りです。


  • Xamarin Android Support Library - v13 : Ver. 23.1.1.1

  • Xamarin Android Support Library - v4 : Ver. 23.1.1.1

  • Xamarin Android Support Library - v7 RecyclerView : Ver. 23.1.1.1

  • Xamarin Android Wear Support Libraries : Ver. 1.3.0.3

  • Xamarin.Insights : Ver. 1.11.4


4.3. watch_face.xmlの追加

Resourcesフォルダー内にxmlフォルダーを追加しましょう。

Resourcesフォルダーを右クリックし、メニューバーから「追加」→「新しいフォルダ」を選択します。

プロジェクトの中身を構成3-1

作成したフォルダーの名前を「xml」にします。

プロジェクトの中身を構成3-2

xmlフォルダーを右クリックし、メニューから「追加」→「新しいファイル」を選択します。

プロジェクトの中身を構成3-3

新しいファイルのダイアログが現れたら、左のリストボックスから「XML」を、中央のリストボックスから「空のXMLファイル」を選択し、名前欄に「watch_face」と入力して、Newボタンをクリックします。

プロジェクトの中身を構成3-4

作成したwatch_face.xmlに、以下の2文を追加します。


watch_face.xml

<?xml version="1.0" encoding="UTF-8"?>

<wallpaper xmlns:android="http://schemas.android.com/apk/res/android" />


4.4. プレビュー用の画像を追加

次にプレビュー画面で表示する画像をリソースに追加しましょう。

プロジェクトの中身を構成4-1


※プレビュー画面で表示する画像は四角形(preview)丸形(preview.circular)の2種類を用意する必要があります。


プレビュー用の画像が手元にない場合、こちらの2つをどうぞ。

preview_analog.png

preview_analog_circular.png

まず、Resourcesフォルダー内に「drawable-nodpi」フォルダーを作成します。

プロジェクトの中身を構成4-2

エクスプローラーなどで、drawable-nodpiフォルダーの中にプレビュー画面で表示する画像を入れます。

プロジェクトの中身を構成4-3

※ここではファイル名を「preview_analog」、「preview_analog_circular」としています。

drawable-nodpiフォルダー(Resourcesフォルダーでも大丈夫です)を右クリックし、メニューから「追加」→「Add Files from Folder...」を選択します。

プロジェクトの中身を構成4-4

フォルダー選択ダイアログが現れたら、drawable-nodpiフォルダーを選択します。

プロジェクトの中身を構成4-5

ファイル追加のダイアログでは、プレビュー用の画像ファイルにチェックを入れて、OKボタンをクリックします。

プロジェクトの中身を構成4-6


4.5. ソースファイルの追加

今度は、Watch Faceアプリのプログラムを記述するためのファイルを追加しましょう。

プロジェクトを右クリックし、メニューから「追加」→「新しいファイル」を選択します。

プロジェクトの中身を構成5-1

新しいファイルのダイアログが現れたら、左のリストボックスから「General」を、中央のリストボックスから「空のクラス」を選択し、名前欄にファイル名(※ここでは「MyWatchFace」とします)を入力して、Newボタンをクリックします。

プロジェクトの中身を構成5-2


5. Next

今回は、Xamarin StudioでAndroid Wearアプリのプロジェクト作成し、Watch Faceアプリ用に構成しました。次回(「Vol. 2 : プログラム作成編」)はWatch Faceアプリのプログラムをコーディングしていきます。

それでは、See you next!


参考サイト


「XamarinでAndroid WearのWatch Faceアプリを作ってみよう!」シリーズ一覧