Android Wear How to make watchface project abc2014W

Android Wear
How to make WatchFace project
Android Bazaar and Conference 2014 Winter
Goodpatch inc.
Hiroshi Hashimoto

自己紹介
所属：株式会社グッドパッチ
名前：橋本泰
Twitter：@hi6484
お仕事：Androidの事
最近はWearとか触ってます
Facebook：facebook.com/hi6484
(UIデザインの会社です。)

Android Wear
Watch Faceの作り方

Android Wear
アプリ作ってみました
https://play.google.com/store/apps/details?id=com.gp.android.watchface.project

Android Wear
Android4.4Wでの簡単な構成
Activity
DisplayManager
View
Implements
Canvasを使って書く
WatchViewStub

Android Wear
先週の１２日の金曜日・・・

Android Wear
Android Studio1.0.0とともに….。

Android Wear
Android5.0(API Level21) or higher on
the wearable device???

Android Wear
Create Watch Facesを読み進めて

Android Wear
今までの作り方はダメ・・・。
CanvasWatchFaceService使ってね♪

Android Wear
資料作り直し！！！！

Android Wear
How to make WatchFace project
for Android5.0.1
Android Bazaar and Conference 2014 Winter
Goodpatch inc.
Hiroshi Hashimoto

Android5.0.1になって進化した点
Android Wear for 5.0.1

Android5.0.1になって進化した点
・Trainingが出来て、簡単に作れる
・OSが表示する通知位置が操作可能
・今までアプリによって、
様々だった作り方が統一された

“CanvasWatchFaceService”
を使って作り直してみて

CanvasWatchFaceService
CanvasWatchFaceService.Engine
Android5.0.1での簡単な構成
Canvasを使って書く

Application構成
mobile Module
wear Module
→APKを作成
→APKを作成

設定 Gradle
mobile build gradle
wear build gradle

設定 Manifest

設定 Manifest
WatchFace選択時タイトル

設定 Manifest
勝手に切り抜いてくれるので
1枚の画像でOK

onDraw()で
ガリガリ描画するのみ

Bitmapを描画する
canvas.drawBitmap()

XMLで描画
+ =
PNG XML

XMLで描画 : XMLを読み込んで描画
LayoutInﬂaterで読み込んで
View.draw(Canvas)で描画

XMLで設定していたGravity効かない・・・。

Android Studio上ではGravityは効いてるけど

Gravity効かない！！！

canvas.translate()で描画位置指定

端末解像度幅/2 - 表示レイアウト幅/2
端末解像度高さ/2 - 表示レイアウト高さ/2

追加機能
作りが悪くAmbientに入った時に色飛びしてた
DisplayManager.DisplayListener
onScreenDim()
Android4.4wではスクリーンの制御を
onScreenAwake()

追加機能
onAmbientModeChanged(boolean inAmbientMode)
Android5.0.1では
invalidate()で再描画

追加機能
通知カード制御
StatusBar制御

追加機能
Android4.4wの場合
3rdPartyは制御できず

Android5.0.1
setStatusBarGravity(Gravity gravity)
setHotwordIndicatorGravity(Gravity gravity)
setViewProtection(int viewProtection )
追加機能:StatusBar制御

setStatusBarGravity(Gravity gravity)
StatusIconの位置

setHotwordIndicatorGravity(Gravity gravity)
“Ok Google”の位置

背景の設定

背景の設定
PROTECT_STATUS_BAR
PROTECT_HOTWORD_INDICATOR

TOP CENTER BOTTOM

setStatusBarGravity(TOP)
setHotwordIndicatorGravity(BOTTOM)

Round
Gravity.TOPを指定した場合
Square
RoundとSquareで見え方が違う

Gravity.TOPを指定した場合
RoundとSquareで見え方が違う
Gravity.TOP | CENTER

追加機能:カード制御
Android5.0.1
setCardPeekMode(int peekMode)

追加機能:通知カード制御
通知カードの高さを変更可能

PEEK_MODE_SHORT PEEK_MODE_VARIABLE

getPeekCardPosition()
カード状態を確認描画位置を変更可能

追加機能:設定画面 Wear側

追加機能:設定画面
Mobile側の
Android Wearアプリ内で表示

リリース
mobile Module
→Gradleに”wearApp project(‘:wear’)”を追加
→署名版APKを作成

Google Fit 
Developer Challenge

Google Fit
Google Fit 開発者チャレンジ
https://developers.google.com/ﬁt/challenge/
https://developers.google.com/ﬁt/challenge/

Google Fit
ってことで 
Android Wear + Google Fitで何かできないかと

Google Fit
とりあえずFitness API使ってみよう

Google Fit
プロジェクトを新規作成

Google Fit
クライアントIDを作成

Google Fit
サンプルコード読みながら歩数を取得

Google Fit
取得開始時間と終了時間を設定

Google Fit
bucketByTime(1, TimeUnit.DAYS)
→1日毎の歩数を取得
bucketByTime(７, TimeUnit.DAYS)
→７日毎の歩数を取得
歩数は１日単位や１週間単位など好きに取得可能

Google Fit
歩数は１日単位や１週間単位など好きに取得可能
bucketByTime(1, TimeUnit.HOURS)
→1時間毎の歩数を取得
bucketByTime(10, TimeUnit.MINUTES)
→10分毎の歩数を取得

Google Fit
List形式で歩数が取得可能

Google Fit
Google Fit APIとFitアプリの歩数は違う・・・。
Google Fit API Fitアプリ
12/13
12/15
12/14
12/16
6279step
7913step
10719step
7265step
5751step
6426step
10852step
7170step
差分
+528step
+1487step
-133step
+95step

Google Fit
詳しくは下記のサイトに載ってます。
https://developers.google.com/ﬁt/android/get-started

Goodpatchは職種に関係なく皆がフラットな立場で情報交換ができ、Androidエンジニアもアプリケーションに
関するおもしろい情報を常に得ることができます。優秀なUIデザイナーたちと一緒に、アプリケーションのイン
タラクションや細部のディテールを詰めながら仕事ができるのはとても魅力だと思います。
WantedlyでAndroidエンジニア募集してます！！
https://www.wantedly.com/projects/10537

ご静聴ありがとうございました。

Android Wear How to make watchface project abc2014W

More Related Content

Viewers also liked (6)

Similar to Android Wear How to make watchface project abc2014W (20)

More from Hiroshi Hashimoto (10)

Android Wear How to make watchface project abc2014W