Android workshop - 02. Glass development 101

Android workshop - 02. Glass development 101

8a6e58b272b266faf22d8a3b2927624f?s=128

Johnny Sung

January 21, 2015
Tweet

Transcript

  1. Android Workshop 02. Glass development 101 Johnny Sung

  2. None
  3. https://plus.google.com/+RobertWarren/posts/6EHpFkzz51v?pid=6106039615307089474&oid=113334680236721862429

  4. None
  5. MyGlass 連接 Google Glass

  6. None
  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

  18. None
  19. None
  20. None
  21. None
  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 喔