Android workshop - 02. Glass development 101

All example sources are in Github:
Example 00: Hello, World
https://github.com/j796160836/GlassWorkshop-Exercise00_HelloWorld
Example 01: New Hello, World
https://github.com/j796160836/GlassWorkshop-Exercise01_NewHelloWorld
Example 02: MyVoiceCommand
https://github.com/j796160836/GlassWorkshop-Exercise02_MyVoiceCommand
Example 03: UseCardBuilder
https://github.com/j796160836/GlassWorkshop-Exercise03_CardBuilder

Transcript

1. Android Workshop 02. Glass development 101 Johnny Sung
3. https://plus.google.com/+RobertWarren/posts/6EHpFkzz51v?pid=6106039615307089474&oid=113334680236721862429
5. MyGlass 連接 Google Glass
7. Glassware
8. https://developers.google.com/glass/develop/gdk/quick-start
9. http://zwallpaper.biz/hinhanh/anhto/131213sad-white-puppy-wallpaper.jpg http://techcrunch.com/2015/01/19/today-is-the-last-day-to-buy-google-glass/
10. Glass layouts
11. Text Columns Caption Title Glass layouts
12. Author Menu Alert https://developers.google.com/glass/develop/gdk/card-design Glass layouts
13. 40 x 40 Screen Size: 640 x 320 Glass layouts
14. Glass layouts https://developers.google.com/glass/develop/gdk/card-design
15. Let’s move into Glass
16. https://plus.google.com/+JeffBond/posts/R83MnpKnfQq Get your hands dirty!
17. Exercise 00: Hello, World
22. AndroidManifest.xml
23. Gradle
24. voice_trigger.xml
25. VoiceTriggers.Command • add an event • calculate • call me a car • capture a panorama • check me in • check this out • control my car • control my home • explore nearby • explore the stars • find a bike • find a dentist • find a doctor • find a hospital • find a passage • find a place • find a place to stay • find a product • find a recipe • find a video • find a website • find reviews • find the exchange rate • find the price • flip a coin • give me feedback • help me sign in • keep me awake • learn an instrument • learn a song https://developers.google.com/glass/develop/gdk/reference/com/google/android/glass/app/VoiceTriggers.Command
26. MainActivity.java
27. Launch project
28. Exercise 00: Hello, World Mmm… It looks weird.
29. We can fix it!
30. AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.johnny.petstarglass" > <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <!-- ... --> </application> </manifest> Remove android:theme
31. Done.
32. Exercise 00: Hello, World Mmm… It’s better.
33. Immersion Example • CardBuilder • SoundEffect • CardScrollView • CardScrollAdapter • onItemClick Mmm… It’s too diffcult.
34. Code Examples http://goo.gl/LNglaz GlassWorkshop-
 Exercise00: HelloWorld
35. Exercise 01: The Whole New Hello, World
36. We can fix it!
37. Do some changes 1. Copy from android app • MainActivity.java • res/layout/activity_main.xml
38. Do some changes 2. Edit files • Change ActionBarActivity to Activity
 (MainActivity.java) • Remove android:theme
 (AndroidManifest.xml) • Remove unused padding’s var
 (activity_main.xml)
39. AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.johnny.petstarglass" > <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <!-- ... --> </application> </manifest> Remove android:theme
40. package com.johnny.petstarglass; import android.app.Activity; import android.os.Bundle; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.card_main); } } MainActivity.java Copy from android app’s Change this
41. <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" android:orientation="vertical" tools:context=".MainActivity"> <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> Remove this Change to LinearLayout activity_main.xml
42. Done.
43. Exercise 01: The Whole New Hello, World
44. Code Examples http://goo.gl/uZLRa5 GlassWorkshop-
 Exercise01: NewHelloWorld
45. http://fc01.deviantart.net/fs9/i/2006/074/0/f/a_whole_new_world_by_fantasist.jpg
46. Exercise 03: My Voice Command
47. <?xml version="1.0" encoding="utf-8"?> <trigger keyword="My Command" /> <?xml version="1.0" encoding="utf-8"?> <trigger command="SHOW_ME_A_DEMO" /> Using unlisted main voice commands Edit https://developers.google.com/glass/develop/gdk/voice#unlisted_commands voice_trigger.xml
48. <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.johnny.petstarglass" > <uses-permission android:name="com.google.android.glass.permission.DEVELOPMENT" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name"> <!-- ... --> </application> </manifest> AndroidManifest.xml Add this
49. Exercise 04: My Voice Command
50. Code Examples http://goo.gl/wsTGMN GlassWorkshop-
 Exercise02: MyVoiceCommand
51. Exercise 03: Use CardBuilder
52. View view1 = new CardBuilder(context, CardBuilder.Layout.TEXT) .setText("This is the TEXT layout. The text size will adjust dynamically.") .setFootnote("This is the footnote") .setTimestamp("just now") .getView(); CardBuilder
53. View view2 = new CardBuilder(context, CardBuilder.Layout.COLUMNS) .setText("You can even put a centered icon on a COLUMNS card instead of a mosaic.") .setFootnote("This is the footnote") .setTimestamp("just now") .setIcon(R.drawable.ic_wifi) .getView(); CardBuilder
54. public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); View view1 = new CardBuilder(this, CardBuilder.Layout.TEXT) .setText("This is the TEXT layout.") .setFootnote("footnote") .setTimestamp("just now") .getView(); setContentView(view1); } } MainActivity.java
55. Exercise 03: Use CardBuilder
56. Code Examples http://goo.gl/WdGdnR GlassWorkshop-
 Exercise03: CardBuilder
57. Additional things
58. SoundEffect AudioManager am = (AudioManager) getSystemService(Context.AUDIO_SERVICE); am.playSoundEffect(Sounds.DISALLOWED);
59. SoundEffect https://developers.google.com/glass/develop/gdk/reference/com/google/android/glass/media/Sounds
60. Touch input Swipe down translates to KEYCODE_BACK. A camera button press
 translates to KEYCODE_CAMERA. Tap translates to KEYCODE_DPAD_CENTER.
61. Touch input @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_CAMERA) { // ... return true; } return false; } @Override public boolean onKeyUp(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_CAMERA) { // ... return true; } return false; } MainActivity.java
62. Where To Go From Here? • Check the development guide
 https://developers.google.com/glass/develop/gdk/index • Touch Gestures • Card Scroller • Slider • Live Cards
63. Q & A
64. http://fb.com/groups/glassdev.taiwan Google glass developer Taiwan 不只聊 Glass 喔