All example sources are in Github: Example 00: Hello, World https://github.com/j796160836/PetStar-Exercise00_HelloWorld Example 01: Show pet’s name https://github.com/j796160836/PetStar-Exercise01_PetsName Example 02: Pet’s name card https://github.com/j796160836/PetStar-Exercise02_PetsNameCard

1. Android Workshop
01. Getting started on android phone
Johnny Sung

4. Android Studio 設定
• Appearance
• Theme: Darcula
• Keymap
• Keymaps: Eclipse (Mac OS X)

5. Appearance Settings

6. Keymap Settings

7. ⼿手機前置作業
• 開啟USB偵錯
• 設定 > 關於
• 連續點擊 Build Number
• 設定 > 開發⼈人員選項
• 勾選未知的來源
• 設定 > 安全性

8. 開啟 開發⼈人員選項 選單

9. 勾選未知的來源 開啟 USB 偵錯

13. Exercise 00: Hello, World

14. Exercise 00: Hello, World

15. 建⽴立專案
• 建⽴立⼀一個專案
• Application name: PetStar
• Company Domain: johnny.com
• Package name: com.johnny.petstar

21. 執⾏行您的 Hello, World
• 接上 Android ⼿手機
• 安裝驅動 (Windows)
• ⼿手機勾選允許裝置
• 按下執⾏行

23. Code Examples
http://goo.gl/RFPHzi
PetStar -
Exercise00: HelloWorld

24. Break;

25. Project Overview

26. 專案結構
• Module
• AndroidManifest.xml (專案設定)
• java (程式碼)
• res
• drawable (圖⽚片)
• layout (版⾯面)
• values/strings.xml (字串檔)
• Gradle

27. activity_main.xml

28. MainActivity.java

29. AndroidManifest.xml

30. Gradle

31. Exercise 01: Show pet’s name

32. Exercise 01: Show pet’s name

33. activity_main.xml
Change to LinearLayout
Add this

34. MainActivity.java
Add this

35. 鎖定螢幕橫直
• AndroidManifest.xml
• <activity> </activity> 中加上
• android:screenOrientation="portrait"
• android:screenOrientation="landscape"

36. AndroidManifest.xml
Add this

37. Code Examples
http://goo.gl/UH814G
PetStar -
Exercise01: PetsName

38. Layout properties
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• wrap_content
• match_parent (fill_parent)
• dp (dip)
• px

39. Layout properties
• Margin
• android:layout_marginLeft="5dp"
• android:layout_marginRight="5dp"
• android:layout_marginTop="5dp"
• android:layout_marginBottom=“5dp"
• Padding
• android:paddingLeft="5dp"
• android:paddingRight="5dp"
• android:paddingTop="5dp"
• android:paddingBottom="5dp"

40. Layout
• RelativeLayout
• FrameLayout
• LinearLayout

41. LinearLayout
• 排列⽅方向
• android:orientation="vertical"
排列⽅方向為垂直(由上⽽而下)
• android:orientation="horizontal"
排列⽅方向為⽔水平(由左⽽而右)

42. RelativeLayout
• 對⿑齊類
• android:layout_alignParentLeft 靠左對⿑齊，(吸附邊框左邊)
• android:layout_alignParentTop 靠上對⿑齊，(吸附邊框上⽅方)
• android:layout_alignParentRight 靠右對⿑齊，(吸附邊框右邊)
• android:layout_alignParentBottom 靠下對⿑齊，(吸附邊框下⽅方)
• android:layout_centerInParent 置中，(計算放在正中間)

43. RelativeLayout
• 相對位置類
• android:layout_toLeftOf
這在(等下要寫的控制項的名)的左邊
• android:layout_toRightOf
這在(等下要寫的控制項的名)的右邊
• android:layout_below
這在(等下要寫的控制項名)的下⾯面
• android:layout_above
這在(等下要寫的控制項名)的上⾯面

44. TextView
• android:text="Hello!"
• android:background="#ff384c0a"
• android:textColor="#ffe5d9ff"
• android:textSize="35sp"

45. dp? px? 單位⻑⾧長度⼤大集合
• 螢幕⻑⾧長度
• px (pixel) 像素，RGB螢幕三原⾊色合成的⼀一個彩⾊色點
• 物理⻑⾧長度
• in (inches) 英吋，1 Inch = 2.54 cm
• pt (points) 點數，1pt = 1/72 Inch
= 0.352777778 mm
• 密度
• dpi (dot per inch)：⼀一英吋有幾個點
• ppi (pixel per inch)：⼀一英⼨寸有多少像素

46. dp? px? 單位⻑⾧長度⼤大集合
• dp, dip (Density-Independent Pixels)
對應到在 160 dpi 的螢幕上的幾個px
• 1 dp = 1/160 Inch = 0.15875 mm
• sp (Scale Independent Pixels)
對應在 160 dpi 的螢幕上的幾個 pt。

47. Density
160dpi (mdpi) 326dpi (xhdpi)
( >300dpi = Retina )
iPhone 3Gs iPhone 4

48. 我的圖應該要多⼤大？
• px = dip * (density / 160)
• dip = px / (density / 160)
• sp = pt * (density / 160)
• 2:3:4:6:8 scaling ratio
http://labs.rampinteractive.co.uk/android_dp_px_calculator/

49. 我的圖應該要多⼤大？
• ldpi (low) ~120dpi
• mdpi (medium) ~160dpi
• hdpi (high) ~240dpi
• xhdpi (extra-high) ~320dpi
• xxhdpi (extra-extra-high) ~480dpi
• xxxhdpi (extra-extra-extra-high) ~640dpi
http://pixplicity.com/dp-px-converter/

50. Density Independent

51. Activity LifeCycle
• onCreate() 程式⼀一開始執⾏行時
• onResume() 畫⾯面可⾒見時
• onPause() 畫⾯面不可⾒見時
• onDestroy() 程式結束時
• 橫直轉換時例外

53. Exercise 02: Pet’s name card

57. http://www.collarplanetonline.com/military-style-qr-code-pet-id-tag-in-black/

59. <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"
tools:context=".MainActivity" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/dog01" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Eason"
android:textSize="28sp" />
<!-- 以下省略 —>
</LinearLayout>
</ScrollView>
</LinearLayout>
activity_main.xml

60. <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/facebook_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/facebook"
android:layout_margin="5dp" />
<ImageView
android:id="@+id/gplus_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/gplus"
android:layout_margin="5dp" />
</LinearLayout>
activity_main.xml

61. Challenge: Open Browser
• 利⽤用剛才的 Layout 讓 Facebook 圖⽚片
能夠正常被按下
• 提⽰示：
• findViewById
• setOnClickListener
private void openWebBrowser(String url) {
try {
Intent i = new Intent(Intent.ACTION_VIEW,
Uri.parse(url));
startActivity(i);
} catch (Exception e) {
e.printStackTrace();
}
}

62. Code Examples
http://goo.gl/YlNU1R
PetStar -
Exercise02: PetsNameCard

63. Where To Go From Here?
• ListView / BaseAdapter
• Layout orientation changes
• Internet
• Thread / Handler / Asynctask
• Fragment

64. Q & A