android wear sdk: level 101

51
Android Wear SDK 101 時上 jollen <[email protected]> www.mokoversity.com 創新創業分享與交流 就在 Mokoversity Mokoversity 1 14年5月15星期四

Upload: jollen-chen

Post on 27-Aug-2014

756 views

Category:

Software


0 download

DESCRIPTION

Learn how to write the first Android Wear App. Start from step zero. Sample: http://github.com/jollen/android-wear-101

TRANSCRIPT

Page 1: Android Wear SDK: Level 101

Android Wear SDK 101⼀一⼩小時上⼿手

jollen <[email protected]>

www.mokoversity.com

創新創業分享與交流就在 Mokoversity

Mokoversity

114年5月15⽇日星期四

Page 2: Android Wear SDK: Level 101

• Android SDK

• ADT plugin for Eclipse v22.6.1+

• Install ‘Android Wear ARM EABI v7a System Image’

• Use the latest version of ‘Android Support Library’

• Set Up the Android Wear Emulator

開發環境

214年5月15⽇日星期四

Page 3: Android Wear SDK: Level 101

• Android SDK

• Intent

• Broadcast Receiver

• Notification

• Android Design guidelines for notifications

• http://developer.android.com/guide/topics/ui/notifiers/notifications.html

背景知識

314年5月15⽇日星期四

Page 4: Android Wear SDK: Level 101

安裝 Android Wear SDK

414年5月15⽇日星期四

Page 5: Android Wear SDK: Level 101

建⽴立 Android Wear Emulator

514年5月15⽇日星期四

Page 6: Android Wear SDK: Level 101

1. Install and Use Genymotion

2. Setup ‘Nexus 5’ AVD

3. Start Android Wear emulator and Nexus 5

4. Install Android Wear Preview App on Nexus 5

5. Setup TCP port forwarding for ADB

6. Install and Open ‘Android Wear Preview’ on Nexus 5

建⽴立 Android Wear Emulator

614年5月15⽇日星期四

Page 7: Android Wear SDK: Level 101

$ ./adb -s [device name Nexus 5] install ./Android_Wear_Beta.apk

$ ./adb -s [device name Nexus 5] forward tcp:5601 tcp:5601

Install Android Wear Preview App需先下載 APK 套件

714年5月15⽇日星期四

Page 8: Android Wear SDK: Level 101

Enable notification access

permission

814年5月15⽇日星期四

Page 9: Android Wear SDK: Level 101

連線成功、Android Wear

Emulator 啟動完成。開始第⼀一個

Android Wear App。

914年5月15⽇日星期四

Page 10: Android Wear SDK: Level 101

Install Android Wear Preview SDK

1014年5月15⽇日星期四

Page 11: Android Wear SDK: Level 101

import android.preview.support.wearable.notifications.*;import android.preview.support.v4.app.NotificationManagerCompat;import android.support.v4.app.NotificationCompat;

Import Libraries

1114年5月15⽇日星期四

Page 12: Android Wear SDK: Level 101

Android Wear 的本質是⼀一個

Launcher

1214年5月15⽇日星期四

Page 13: Android Wear SDK: Level 101

•Designing for Android Wear is substantially different than designing for phones or tablets.

•Android phones 與 tablets 是 UI、functionality 與 Touch 導向

•Android wear 是 Notification 導向

Android Wear App 的設計

1314年5月15⽇日星期四

Page 14: Android Wear SDK: Level 101

The Context Stream

On the Android wearable, each notification appears as a new card in the context stream.

The Cue Card

Allows users to speak to their device. There are a list of actions. The list of actions includes Android intents for voice actions.

UI Principles

Portions of this page are reproduced from work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.

1414年5月15⽇日星期四

Page 15: Android Wear SDK: Level 101

Step zero從 Notification 開始

1514年5月15⽇日星期四

Page 16: Android Wear SDK: Level 101

private void zero() { NotificationCompat.Builder builder = new NotificationCompat.Builder(this) .setContentTitle("Zero") .setContentText("You're at step zero.") .setSmallIcon(R.drawable.bg_eliza); NotificationManager mNotificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE); mNotificationManager.notify(0x07, builder.build()); }

Portions of this page are reproduced from work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.

Step Zero

1614年5月15⽇日星期四

Page 17: Android Wear SDK: Level 101

Demo

1714年5月15⽇日星期四

Page 18: Android Wear SDK: Level 101

600x600

Icon

Image

1814年5月15⽇日星期四

Page 19: Android Wear SDK: Level 101

private void zeroX() { NotificationCompat.Builder builder = new NotificationCompat.Builder(this) .setContentTitle("ZeroX") .setContentText("You're at step zero.") .setSmallIcon(R.drawable.bg_eliza) .setLargeIcon(BitmapFactory.decodeResource(getResources(), R.drawable.bg_eliza)); NotificationManagerCompat notificationManager = NotificationManagerCompat.from(this); notificationManager.notify(0x08, builder.build()); }

Image使⽤用 Large Icon for Android Wear

1914年5月15⽇日星期四

Page 20: Android Wear SDK: Level 101

Demo

2014年5月15⽇日星期四

Page 21: Android Wear SDK: Level 101

認識

Action

2114年5月15⽇日星期四

Page 22: Android Wear SDK: Level 101

private void one() { // Build an intent for an action to make a phone call Intent phoneCallIntent = new Intent(Intent.ACTION_VIEW); Uri phoneUri = Uri.parse("tel:119"); phoneCallIntent.setData(phoneUri); PendingIntent phoneCallPendingIntent = PendingIntent.getActivity(this, 0, phoneCallIntent, 0); NotificationCompat.Builder builder = new NotificationCompat.Builder(this) .setContentTitle("One") .setContentText("You're at step one.") .setSmallIcon(R.drawable.bg_eliza) .setLargeIcon(BitmapFactory.decodeResource(getResources(), R.drawable.bg_eliza)) .addAction(R.drawable.ic_full_reply, "Call me", phoneCallPendingIntent); NotificationManagerCompat notificationManager = NotificationManagerCompat.from(this); notificationManager.notify(0x09, builder.build()); }

Step One

2214年5月15⽇日星期四

Page 23: Android Wear SDK: Level 101

Put all

together.

2314年5月15⽇日星期四

Page 24: Android Wear SDK: Level 101

Notifier

Notification

2414年5月15⽇日星期四

Page 25: Android Wear SDK: Level 101

• NotificationCompat.Builder

Basic Android APIs

2514年5月15⽇日星期四

Page 26: Android Wear SDK: Level 101

•Android wearables provide just the right information at just the right time, allowing you to be connected to the virtual world and present in the real world.

•Android Devices (Phone/Table) 的週邊

•Android Wear 是 Notification 裝置

•Android Devices 的 Second Device

•PDA (輔具)

Android Wear 的哲學

2614年5月15⽇日星期四

Page 27: Android Wear SDK: Level 101

•Contextually aware and smart

•Glanceable

•Zero/low interaction

•Helpful

Design Principles

2714年5月15⽇日星期四

Page 28: Android Wear SDK: Level 101

First appAdd New Features for Wearables

2814年5月15⽇日星期四

Page 29: Android Wear SDK: Level 101

Actions

Images

Application Icons

Pages

Notification Stacks

Voice Replies

Notification UI Patterns

2914年5月15⽇日星期四

Page 30: Android Wear SDK: Level 101

private void appOne() { NotificationCompat.Builder builder = new NotificationCompat.Builder(this) .setContentTitle("First App") .setContentText("My first app for Android wear.") .setSmallIcon(R.drawable.bg_eliza) .setLargeIcon(BitmapFactory.decodeResource(getResources(), R.drawable.bg_eliza));

Notification notification = new WearableNotifications.Builder(builder) .setMinPriority() .build(); NotificationManagerCompat notificationManager = NotificationManagerCompat.from(this); notificationManager.notify(0x01, notification); }

Use Features for Wearables

3014年5月15⽇日星期四

Page 31: Android Wear SDK: Level 101

private void appOneX() { NotificationCompat.Builder builder = new NotificationCompat.Builder(this) .setContentTitle("Coupon") .setContentText("Limited. 30 mins from now !") .setLargeIcon(BitmapFactory.decodeResource(getResources(), R.drawable.bg_mountain));

Intent intent = new Intent(ACTION_RESPONSE); PendingIntent pendingIntent = PendingIntent.getBroadcast(this, 0, intent, PendingIntent.FLAG_ONE_SHOT | PendingIntent.FLAG_CANCEL_CURRENT); builder.setContentIntent(pendingIntent); Notification notification = new WearableNotifications.Builder(builder) .setMinPriority() .build(); NotificationManagerCompat.from(this).notify(0x02, notification); }

.setHintHideIcon(true)

Use .setContentIntent()

3114年5月15⽇日星期四

Page 32: Android Wear SDK: Level 101

Skin of Android Wear

3214年5月15⽇日星期四

Page 33: Android Wear SDK: Level 101

Demo

3314年5月15⽇日星期四

Page 34: Android Wear SDK: Level 101

// Broadcast receiver mFilterWearableReply = new IntentFilter(ACTION_RESPONSE); mWearableReceiver = new BroadcastReceiver() { @Override public void onReceive(Context arg0, Intent arg1) { Toast.makeText(mContext, "Someone wants to get a coupon.", Toast.LENGTH_LONG).show(); } }; registerReceiver(mWearableReceiver, mFilterWearableReply);

使⽤用 Broadcast

Receiver

3414年5月15⽇日星期四

Page 35: Android Wear SDK: Level 101

Second & third appAdd Pages to a Notification

Voice Replies (Remote Input)

3514年5月15⽇日星期四

Page 36: Android Wear SDK: Level 101

3614年5月15⽇日星期四

Page 37: Android Wear SDK: Level 101

private void appTwo() { NotificationCompat.Builder builder = new NotificationCompat.Builder(this) .setContentTitle("80% Discount") .setContentText("Now products are there...") .setLargeIcon(BitmapFactory.decodeResource(getResources(), R.drawable.bg_mountain));

Intent intent = new Intent(ACTION_RESPONSE); PendingIntent pendingIntent = PendingIntent.getBroadcast(this, 0, intent, PendingIntent.FLAG_ONE_SHOT | PendingIntent.FLAG_CANCEL_CURRENT); builder.setContentIntent(pendingIntent); // 1. Create a big text style for the second page BigTextStyle secondPageStyle = new NotificationCompat.BigTextStyle(); secondPageStyle.setBigContentTitle("New Product") .bigText("A lot of text...");

// 2. Create second page notification with big text style Notification secondPageNotification = new NotificationCompat.Builder(this) .setStyle(secondPageStyle) .build(); Notification notification = new WearableNotifications.Builder(builder) .setMinPriority() .setHintHideIcon(true) // 3. Add the second page to notification .addPage(secondPageNotification) .build(); NotificationManagerCompat.from(this).notify(0x01, notification); }

3714年5月15⽇日星期四

Page 38: Android Wear SDK: Level 101

private void appThree() { NotificationCompat.Builder builder = new NotificationCompat.Builder(this) .setContentTitle("Coupon") .setContentText("Limited. 30 mins from now !") .setLargeIcon(BitmapFactory.decodeResource(getResources(), R.drawable.bg_mountain));

Intent intent = new Intent(ACTION_RESPONSE); PendingIntent pendingIntent = PendingIntent.getBroadcast(this, 0, intent, PendingIntent.FLAG_ONE_SHOT | PendingIntent.FLAG_CANCEL_CURRENT); builder.setContentIntent(pendingIntent); Notification notification = new WearableNotifications.Builder(builder) .setMinPriority() .setHintHideIcon(true) .addRemoteInputForContentIntent( new RemoteInput.Builder("GET !") .setLabel("Reply").build()) .build(); NotificationManagerCompat.from(this).notify(0x02, notification); }

3814年5月15⽇日星期四

Page 39: Android Wear SDK: Level 101

Notification notification = new WearableNotifications.Builder(builder) .setMinPriority() .setHintHideIcon(true) .addRemoteInputForContentIntent( new RemoteInput.Builder("GET !") .setLabel("Reply") .setChoices(getResources().getStringArray(R.array.reply_choices)) .build()) .build();

Use .setChoices()

3914年5月15⽇日星期四

Page 40: Android Wear SDK: Level 101

Android Intent

4014年5月15⽇日星期四

Page 41: Android Wear SDK: Level 101

什麼是 Intent (意圖)在 Android 應⽤用程式框架中,有⼀一個⾮非常聰明的事件處理

機制,稱之為「 Intent 」

在「 Intent 」這樣的事件處理觀念裡,Android 試圖將事

件解釋為「應⽤用程式的意圖」或是「使⽤用者的意圖」,並試

著去解釋該意圖的⺫⽬目的,若 Android 系統本⾝身能理解應⽤用

程式的意圖,便會「⾃自⾏行」去處理該意圖所應執⾏行的⼯工作

Android 的做法是,讓每個意圖(Intent)都帶有⼀一個動

作(action),並根據不同的動作去⾏行動

事件處理

4114年5月15⽇日星期四

Page 42: Android Wear SDK: Level 101

Intent 的類型Intent 的動作

⾃自⾏行定義

框架內部定義

Android 框架的 Intent 有很多⽅方便實⽤用的「內建動作」

Intent 定義

4214年5月15⽇日星期四

Page 43: Android Wear SDK: Level 101

Android內建的Intent ActionAndroid 的框架確實是讓每個 Intent 都包含了⼀一個動作,

就稱為 action

範例:

HelloIntentDialer: 啟動撥號器 (dialer) 並撥號

HelloIntentMusic : 使⽤用者按下「 Select Music 」後,可以由⾳音樂清單裡選擇⾳音樂並撥放

HelloIntentWallpaper : 啟動 Android 內建的「背景圖選擇器」,讓使⽤用者更換背景

Intent Action

4314年5月15⽇日星期四

Page 44: Android Wear SDK: Level 101

Intent 可包含 Data除了 action 外, Intent 還可以包含另外⼀一項資訊

「data」

Intent 的 action 指定這個 Intent 的「動作」是什麼,

框架會依指定的動作進⾏行處理;有些 action 可以附帶⼀一筆

資料,這個資料是以 Uri 的格式撰寫

Intent Data

4414年5月15⽇日星期四

Page 45: Android Wear SDK: Level 101

內建 Intent 範例內建的 Intent 有哪些呢?請參考 Android Reference

Guide 中的 Intent 類別說明

上述三個範例分別使⽤用以下三個 action:

1. ACTION_CALL: 撥號

2. ACTION_GET_CONTENT: 啟動內容選取器

3. ACTION_SET_WALLPAPER: 設定Wallpaper

Intent 範例

4514年5月15⽇日星期四

Page 46: Android Wear SDK: Level 101

Intent Action 的類型Android 內建的 Intent action 分為⼆二種:

1. Activity Action : 啟動 Activity 的 action

2. Broadcast Action : 透過廣撥器處理的action

第⼀一種 action 是 activity action ,⽤用途是通知框架啟

動 Activity ,這裡提出的三個範例,都是使⽤用 activity

action

Intent 的 Action 類型

4614年5月15⽇日星期四

Page 47: Android Wear SDK: Level 101

⾃自動撥號: HelloIntentDialerpublic class HelloIntentDialer extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);   Intent dial = new Intent(); dial.setAction("android.intent.action.CALL"); dial.setData(Uri.parse("tel:119")); startActivity(dial); }}

「送出⼀一個帶有內建 action 的 Intent 給框架,因為 action 為 CALL,所以框架會去啟動撥號 activity 並打電話。」

打電話範例

4714年5月15⽇日星期四

Page 48: Android Wear SDK: Level 101

程式說明1. 先產⽣生⼀一個 Intent 物件:

Intent dial = new Intent();

2. 設定 Intent 的 action 為

「 android.intent.action.CALL 」,這是⼀一個內建的

action:

dial.setAction("android.intent.action.CALL");

3. 內建 action「CALL」需要附帶⼀一筆資料,⽽而資料的寫

法是使⽤用 URI 格式:

dial.setData(Uri.parse("tel:119"));

打電話範例

4814年5月15⽇日星期四

Page 49: Android Wear SDK: Level 101

送出 Intent4. 「CALL」是⼀一個 activity action,所以呼叫

startActivity() 向 Intent 送給框架:

startActivity(dial);

打電話範例

4914年5月15⽇日星期四

Page 50: Android Wear SDK: Level 101

啟動 Dialer

5014年5月15⽇日星期四

Page 51: Android Wear SDK: Level 101

Notification, Intent & Broadcast Receiver

WearableNotificationCompat

UI Patterns

結論

5114年5月15⽇日星期四