Tutorial androidstudio masterung v2014

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

1

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง มาสเตอร์ อึ่ง Talk โลกเราเข้าสู่ยุค Create แล้ว เราไม่ได้อยู่ใน ยุค IT แล้ว นะครับ เป็น ยุคที่ ศิลปิน ต่างๆ รวมไปถึง โปรแกรมเมอร์ เพื่องฟู น่าจะจริง เพราะมองจาก อุปกรณ์ ต่างๆ ที่ รายล้อม รอบตัวเรา จะต้องมีโปรแกรม ควมคุม การทํางาน ตลอด ใครจะไปคิดว่า แม้นแต่ TV ยังต้องมี ระบบปฎิบัติการ มีโปรแกรมประยุค ควบคุมการทํางาน เลย

แอนดรอยด์

ระบบปฎิบัติการที่มี พื้นฐานบนลินุก ทํางาน บนอุปกรณ์ ที่มีหน้าจอ สัมผัส ผู้คิดค้น ก็คือ บริษัท แอนดรอยด์ ซึ่ง ต่อมา Google ก็ ซื้อ แอนดรอยด์ มาพัฒนาต่อ

Open Handset Allience

เป็นการรวมตัว, รวมทุน กันของบริษัท การสือสาร, คอมพิวเตอร์ ชั้นนํา 76 บริษัท มีจุดประสงค์ เพื่อ พัฒนาแอนดรอยด์ ให้เป็น OpenSource และ กําหนด ทิศทางของการ พัฒนาระบบปฎิบัติการแอนดรอยด์

เบสิกแอนดรอยด์ กับ มาสเตอร์ อึ่ง

เป็นคอร์สพื้นฐานเริ่มต้น สําหรับการศึกษาการเขียนโค้ด แอนดรอยด์ มุ่งเน้นให้ ผู้เรียน สามารถต่อยอด และ พัฒนาการโค้ดแอนดรอยด์ จาก Content ต่างๆ ที่ เผยแพร่ ในโลกนี่ได้ การเรียน จะเน้นไปที่การทํา Workshop และ เรียนรู้จาก สิ่งที่ทําได้ ครับ สามารถดู บทเรียนเพิ่มเติมได้จาก http://androidthai.in.th หรือ https://www.facebook.com/android.Training.by.EWTC

มาสเตอร์ อึ่ง 2

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

สารบัญ มาสเตอร์ อึ่ง Talk ............................................................................................................................... 2 แอนดรอยด์ ................................................................................................................................................... 2 Open Handset Allience .................................................................................................................... 2 เบสิกแอนดรอยด์ กับ มาสเตอร์ อึ่ง ......................................................................................................................... 2 มาสเตอร์ อึ่ง ......................................................................................................................................... 2 การติดตั้ง จาวา ...................................................................................................................................... 5 ไป Download JDK และ ติดตั้งซะ ............................................................................................................... 5 การกำหนด PATH ให้ จาวา .................................................................................................................... 6 การติดตั้ง Android Studio ........................................................................................................... 10 การ Update android Studio ................................................................................................... 14 ปิด Firewall ก่อน HelloWorld .................................................................................................. 18 ทําการปิด Firewall ซะ ............................................................................................................................. 19 HelloWorld ด้วย android Studio .......................................................................................... 20 ตั้งค่าตามนี่ก่อน ............................................................................................................................................ 20 การ Update SDK ......................................................................................................................... 23 Internet ไม่เสถียร ติดๆดับๆ ....................................................................................................................... 24 หรือ พยายามอัพเดท SDK แล้วไม่ใม่สามารถ ทําได้ ................................................................................................. 24 การสร้าง Emulator ........................................................................................................................ 25 เปิด Android Virtual Device Manager ......................................................................................... 25 MyAnimal WorkShop ........................................................................................................... 29 New Project ...................................................................................................................................... 29 การกำหนด Text ....................................................................................................................................... 34 การกำหนด TextSize ............................................................................................................................... 35 กำหนด Style both ................................................................................................................................. 36 เพิ่ม ImageView .................................................................................................................................. 37 กำหนดตําแหน่งที ่ alignComponent ........................................................................................................ 41 Create Panal ด้วย Linear Layout (Horizontal) ......................................................................... 41 Button on Linear Layout .............................................................................................................. 43 กำหนด Text ให้ Button ......................................................................................................................... 44 layout Weight ให้เป็น 1 ...................................................................................................................... 45 ปรับสีโดยการใช้ textColor ........................................................................................................................ 48 การสร้าง Scrolling ................................................................................................................................. 50 Scrolling ............................................................................................................................................ 51

3

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

ทดสอบโค้ด บน Emulator ........................................................................................................................ 53

มาโค้ดดิ้งแอนดรอยด์ กัน ......................................................................................................................... 56 ทําความรูปจัก เมธอด ต่างๆ ...................................................................................................................... 57 เมธอด onCreate ................................................................................................................................... 57 เมธอด onCreateOptionMeny ........................................................................................................... 57 เมธอด onCreateOptionItemSelected ............................................................................................ 57 คลาส PlaceholderFragment ................................................................................................... 58 ประกาศตัวแปร .................................................................................................................................... 58 การ Initial Widget ..................................................................................................................... 59 การ setOnClickListener ........................................................................................................... 60 การนําเสียง มาใช้ฎในแอพแอนดรอยด์ ............................................................................................................ 63 Create Android resource directory .......................................................................................... 63 Create Method ที่สืบทอด MediaPlayer ........................................................................................... 65 การทดสอบโค้ดแอนดรอยด์ บน เครื่องจริง ..................................................................................................... 66 แอพแลกเปลี่ยนเงินตรา ........................................................................................................................... 68 New Project MyExchangeMoney ............................................................................................... 68 ปรับ Wallpaper ให้ได้แบบนี ้ Copy ภาพที่ต้องการ ไปไว้ที่ drawable-­‐mdpi ................................................ 73 การ Create Activity ................................................................................................................... 75 ที่คลาส Placeholderfragment ........................................................................................................... 77 สร้าง RunAbleTheard ........................................................................................................................ 78 การใส่เสียงบน Splash Screen ......................................................................................................... 79 Create Object MediaPlayer ......................................................................................................... 81 การใช้ เมธอด finish(); ............................................................................................................................. 82 การกำหนด inputType ให้ editText ..................................................................................................... 84 การกำหนด cheched ให้ RadioButton .................................................................................................. 85 Declaration ตัวแปร ที่ควบคุม Widget ................................................................................................... 86 Initial Widget กับ ตัวแปรที่ประกาศ ......................................................................................................... 87 การหาช่องว่าง บน editText ....................................................................................................................... 88 Android Device Monitor ...................................................................................................... 88 Logcat Message Fillter Setting ................................................................................................... 89 Alert Dialog .............................................................................................................................. 90 Create New Class ............................................................................................................................ 91 การใช้ RadioGroup และ RadioButton .............................................................................................. 95 Create Method ShowAnswer .................................................................................................... 103

4

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

การติดตั้ง จาวา

แอนดรอยด์ ใช้ จาวา เป็นภาษา ในการพัฒนา นั้นหมายความว่า ในเคลื่องคอมพิวเตอร์ ที่ใช้ พัฒนา ไม่ว่าจะ มาจาก Platform ใดๆ ก็ตาม (ลินุก, แมค หรือ Windows) ต้องมี JDK ติดตั้งอยู่

ไป Download JDK และ ติดตั้งซะ ไปโหลดจาวาจาก http://www.oracle.com/technetwork/java/javase/downloads/index.html

โหลดมาแล้วก็ ทําการติดตั้ง ซะ

5

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

การกำหนด PATH ให้ จาวา

ก่อนที่เราจะ ติดตั้ง android Studio (บน Windows เท่านั้น Linux และ mac ไม่ต้องทํา) ต้อง กําหนด PATH เพื่อให้ android Studio มองเห็น จาวา มาเริ่มต้นกันครับ เปิด System คลิกที่ Advanced system settings

ที่ System Properties ให้คลิกที่ Environment Variable

6

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

คลิกที่ New

7

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง และกําหนดค่า ตามนี้

โดยในวันที่ มาสเตอร์ เขียนคู่มือ JDK1.7.0_40 เป็นเวอร์ชั่น ล่าสุด ถ้าผู้เรียนใช้เวอร์ชั่น อื่น ต้องกําหนดให้ตรง กับ เวอร์ชั่น ที่ผู้เรียนใช้ โดยไปดูที่ Path ที่เก็บ jdk ของตนเอง

เสร็จแล้วจะได้ผลลัพธ์ แบบนี้

8

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

ทําแบบเดิม แต่กําหนดค่าตามนี่

ตรวจสอบ การกำหนด PATH จาวา ที่ได้

9

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

การติดตั้ง Android Studio

ไปโหลด Android Studio จาก http://developer.android.com/sdk/installing/studio.html

10

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

Download android Studio เสร็จแล้ว เราก็ ดับเปิลคลิก เพื่อทําการ ติดตั้งได้เลย

ดําเนินตามขั้นตอนไปเรื่อยๆ เลยครับ

11

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

ตรงนี่สําคัญนะครับ ถ้าเรา กําหนด Path ของ จาวา ไม่ถูก android Studio จะไม่ยอมให้ ติดตั้ง

มาสเตอร์ เลือกติดตั้ง ให้คนอื่นใช้ด้วย 12

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

มาสเตอร์ ขอข้ามนะครับ ไปจบตอน Finish เพื่อเปิด android Studio เลย

13

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง การ Update android Studio

เมื่อเราเปิด โปรแกรม android Studio ขึ้นมาครั้งแรก ตัว android Studio จะถามหาแหล่ง บันทึก โค้ดที่เขียนได้ แบบนี้ ให้ OK ไปครับ หรือ จะ Brown ไปที่ๆ ต้องการก็ได้

ตัว android Studio จะถามหา ตําแหน่ง path ที่ใช้เก็บ โค้ดที่จะเขียน

14

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

ได้มาละ android Studio แต่เป็น เวอร์ชั่นเก่าอยู่ ก่อนที่เราจะทํางาน กับ android Studio ต้อง Update ก่อน โดยคลิกที่ Check

android Studio จะ Update จนได้แบบนี้ และ ขอ Restart ใหม่

15

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

โหลด เวอร์ชั่นใหม่

ติดตั้ง เวอร์ชั่นใหม่ ที่ได้ เสร็จแล้ว จะ Restart ใหม่

ได้มาละ android Studio เวอร์ชั่นล่าสุด (วันที่ มาสเตอร์ เขียน คู่มือ android Studio 0.3.1 เป็นเวอร์ชั่นล่าสุด)

16

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

17

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง ปิด Firewall ก่อน HelloWorld

ก่อนที่เราจะ HelloWorld สําหรับเครื่อง Windows ต้องปิด Firewall หรือ ระบบ Antivirus ต่างๆ ก่อน เพราะการ Start Project ครั้งแรก android Studio จะโหลด gradle เข้ามาติดตั้งเสริม

18

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

ทําการปิด Firewall ซะ

19

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

HelloWorld ด้วย android Studio

เดี๋ยวเรามา สร้างโปรเจ็คแรกที่ชื่อว่า HelloWorld กัน New Project ขึ้นมาเลยครับ

ตั้งค่าตามนี่ก่อน

20

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง และ Next จนจบกระบวนการเลยครับ ตัว android Studio จะโหลด gradle มาติดตั้งในเครื่องของเรา กระบวนการนี้จะ ทําเมื่อ Start Project แรก โปรเจ็คหน้า ก็ไม่ทําแล้วครับ ระวังเรือ่ ง Firewall ของ Windows ด้วยนะครับ ถ้าปรากฎขึ้นมา ให้ allow ไปครับ

21

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง รอจนกระบวนการเสร็จ

น่าจะได้หน้าตาแบบนี้

22

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง การ Update SDK

เปิด SDK Manager ออกมา โดยการไปที่ Tools > Android > SDK Manager และ อัพเดท SDK ตามที่ android Studio แนะนำ

Error ที่เกิดจากการ ติดตั้ง android Studio 23

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง Internet ไม่เสถียร ติดๆดับๆ

ลองตรวจสอบระบบ Internet หรือ ปิด Antivirus ก่อน

หรือ พยายามอัพเดท SDK แล้วไม่ใม่สามารถ ทําได้ อันนี้หนักหน่อย ต้องถอด android Studio ใหม่ และติดตั้งใหม่ และ ลองอัพเดทดู

24

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง เมื่ออัพเดท SDK เสร็จ ต้อง Restart android Studio การ Error ก็จะไม่มีให้เห็นอีก

ลอง Restart android Studio ขึ้นมาใหม่

การสร้าง Emulator

ในการเขียนโค้ดแอนดรอยด์ จะต้องมีกระบวนการในการทดสอบโค้ดแอนดรอยด์ ถ้าโค้ดไม่มีการใช้ Service ใน โทรศัพย์ มากนักเรามัก จําลองมือถือแอนดรอยด์ (Emulator) ในเครื่องคอมพิวเตอร์ของเรา

เปิด Android Virtual Device Manager ที่นี่ครับ

คลิกที่ New เพื่อสร้าง Emulator 25

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

กําหนดค่าต่างๆ ตามนี้

26

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

กลับมาที่ android Virtual Device Manager ก็จะเห็น Emulator ที่เราสร้างขึ้นไว้

คลิกที่ Start และ Scale 27

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

ตัว android Studio ก็จะ Start Emulator แบบนี้

28

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

MyAnimal WorkShop

เป็น WorkShop แรกของเรา ในตัว WorkShop นี่มุ่งการเรียนรุ้การใช้ onClickListener

New Project

29

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง และ Set Up ค่าโปรเจ็คตามนี่

30

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

ในช่วงนี่ ถ้า Firewall Windows ให้ Allow ไปก่อนนะครับ

31

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง ได้มาละ โปรเจ็คใหม่ ของเรา

เริ่มจาก มาสเตอร์ ลบ TextView Widget ที่ fragment_main.xml ตัวนี่ไปก่อน

32

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง และ เพิ่ม TextView Widget เข้าไปใน Relative Layout ใหม่

Text

33

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

การกำหนด Text

มาสเตอร์ สร้าง String Resource โดยมี tag Name ว่า cow มี Value ว่า Cow

34

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

การกำหนด TextSize

35

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

กำหนด Style both

36

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

เพิ่ม ImageView

ไป Copy รูปไว้ก่อน

37

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

แล้วนําไป paste ไว้ที่ drawable-mdpi

38

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

39

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

40

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง กำหนดตําแหน่งที่ alignComponent

Create Panal ด้วย Linear Layout (Horizontal)

41

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

42

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง Button on Linear Layout

เพิ่มไปเลย 4 ปุ่ม

43

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง กำหนด Text ให้ Button

44

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

layout Weight ให้เป็น 1

Set up Wallpaper 45

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง ให้รีทัชภาพ ที่จะใช้เป็น Wallpaper ของแอพตามขนาดของจอ จากตัวอย่าง คือ 480x800 และ ต้องเป็น สกุล png ครับ

Copy ภาพที่ต้องการไว้ที่ drawable-mdpi

46

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

47

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

ปรับสีโดยการใช้ textColor 48

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

49

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง การสร้าง Scrolling

เริ่มจากการสร้าง LinearLayout ก่อน

และไว้ด้านล่างแบบนี้

ปรับ Layout-height สัก 110dp

50

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

Scrolling

51

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

เพิ่ม TextView เข้าไปใน Scrolling

มาสเตอร์ หา ชุดอักษรสําเร็จรูปจาก Lorem เข้าไปที่ http://www.lipsum.com ให้ ไปใส่ที่ TextView

52

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

ทดสอบโค้ด บน Emulator

android Studio จะสร้าง ไฟร์ apk

53

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

ให้รอจนการะบวนการจบ

เลือก Emulator ที่เปิดอยู่

54

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

55

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง มาโค้ดดิ้งแอนดรอยด์ กัน เริ่มจากการเปิด คลาส MainActivity

56

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง ทําความรูปจัก เมธอด ต่างๆ เมธอด onCreate

เป็น เมธอดหลักของ คลาส MainActivity คลาสใดๆ ที่ Extend Activity จะต้องมี เมธอดหลัก ที่ชื่อว่า onCreate

เมธอด onCreateOptionMeny เป็น เมธอด ที่ไว้ สร้างเมนู

เมธอด onCreateOptionItemSelected

เป็น เมธอด ที่ทําหน้าที่ในการ จัดการ สิ่งที่ได้จากการเลือกเมนู

57

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

คลาส PlaceholderFragment

มาถึงคลาส ตัวพระเองของเรา ตั่งแต่ android Studio เวอร์ชั่น 0.3.7 เป็นต้นไป การ Create Activity จะใช้ Fragment ทํางานตลอด โดยการสร้าง View ขึ้นมา ที่ เมธอด onCreateView

ประกาศตัวแปร เริ่มจากการ Declaration ตัวแปร ที่ใช้ควบคุม Widget ต่างๆ ก่อน

58

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

การ Initial Widget

การนําตัวแปรที่ประกาศ ไปเชื่อมต่อกับ Widget เรียกว่า การทำ Initial Widget แบบนี่

59

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

การ setOnClickListener

มาสเตอร์ เอา btnCOW ที่เป็นตัวแปร ของ Button มา setOnclickListener

กําหนด ให้เปลี่ยนภาพ, ชื่อหัวเรื่อง และ รายละเอียด ที่แสดงใน Scrolling แบบนี้ 60

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

setOnClickListener ที่ปุ่ม btnHORSE บ้าง และ ปุ่มอื่นๆ

ลองทดสอบโค้ด บน Emulator อีกครั้ง 61

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

ลองคลิกที่ ปุ่มต่างๆ จะสังเกตุว่า ภาพ, หัวเรื่อง รวมไปถึงรายละเอียด จะเปลี่ยนไป

62

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง การนําเสียง มาใช้ฎในแอพแอนดรอยด์ ต้องเป็นไฟร์ mp3 นะครับ

Create Android resource directory

63

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

แล้วเอาไฟร์เสียง ที่เรา Copy ไป Past ที่ raw

64

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง Create Method ที่สืบทอด MediaPlayer

และกําหนดให้กระทํา ที่เมธอด soundClick ทุกๆ ครั้งที่ กดปุ่ม

65

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

การทดสอบโค้ดแอนดรอยด์ บน เครื่องจริง

ให้เสียบเครื่องจริง (ตัวอย่างใช้ LG) ตอนที่ Choose Device จะมีให้เลือก แบบนี้

66

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

67

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

แอพแลกเปลี่ยนเงินตรา

เป็น Workshop ที่สอง ที่เราจะทํากัน MyExchangeMoney เป็น แอพแอนดรอยด์ ที่สอนให้เราเรียนรู้ การ Feed Data เขาทาง Edittext และ นำไปประมวลผล แล้ว แสดงผลที่ประมวลได้ ผ่าน AlertDialog

New Project MyExchangeMoney

68

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง และ Set Up ค่าตามนี่

มาสเตอร์ กําหนด ให้ คลาสแรก เป็น Splash Screen

69

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

มาสเตอร์ ลบ TextView Widget ตัวนี่ออกไปเลย

70

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง Splash Screen จะเป็น Activity ที่ แสดงภาพลักษณ์ ของ แอพ เรามักจะแสดง แค่ Logo ให้ ไป Copy Logo แล้ว paste ไปที่ drawable-mdpi

เพิ่ม ImageView เข้าไปที่ Relative Layout

71

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

กำหนด path เริ่มต้นที่ src

72

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

ปรับ Wallpaper ให้ได้แบบนี้ Copy ภาพที่ต้องการ ไปไว้ที่ drawable-mdpi

73

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง เปลี่ยน Background เป็นไปตามที่ต้องการ

74

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง การ Create Activity

75

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง แล้ว android Studio จะสร้าง Activity พร้อม xml ที่ใช้สําหรับการกําหนด Layout

กลับมาที่ คลาส SplashScreen

76

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง ที่คลาส Placeholderfragment

มาสเตอร์ ประกาศตัวแปร Hander ที่เป็น android.os

77

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง สร้าง RunAbleTheard

มาสเตอร์ สร้าง ระบบ การหน่วงเวลา postDelay เป็นเวลา 5 วินาที แล้ว ค่อย Intent ไปที่ MainActivity

มาสเตอร์ ทดสอบโค้ด ที่เขียนได้ กับ Emulator จะปรากฎหน้านี่ เป็นเวลา 5 วินาที แล้ว จะย้ายการทํางานไป MainActivity

78

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง การใส่เสียงบน Splash Screen

มาสเตอร์ ทําเหมือนเดิม คือ เอาไฟร์เสียงไปเก็บไว้ที่ raw

79

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

80

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง Create Object MediaPlayer

ที่ เมธอด onCreateView มาสเตอร์ สร้าง Object ที่สืบทอดจาก MediaPlayer แบบนี่

81

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง การใช้ เมธอด finish();

จากโค้ดที่ได้ เราลองกด ปุ่ม Undo ตัว Activity จะสามารถย้อนกลับ ไปที่ SplashScreen ได้ ให้เราใช้คําสั่ง Finish เพื่อ ปิดการทํางานของ SplashScreen เมื่อเรากอ Undo ที่ MainActivity จะปิดโปรแกรมไปเลย

82

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

กลับมาออกแบบ UI สําหร้บ fragment_main.xml เริ่มต้น จะเป็นแบบนี้

ออกแบบให้ได้แบบนี้ มาสเตอร์ จะไม่รีวิว ให้ละเอียด นะครับ เพราะ เคยทําได้ ตั่งแต่โปรเจ็ค MyAnimal แล้ว มาสเตอร์ จะเน้นไปที่ Widget ที่สําคัญๆ

83

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง การกำหนด inputType ให้ editText

เราสามารถกําหนด ข้อมูล ที่จะเข้า editText โดยการไปกําหนด ที่ inputType โดย มาสเตอร์ ต้องการให้ User พิมพ์ ได้ เฉพาะ ตัวเลขที่มีจุดทดศนิยม ได้ โดยเลือก numberDecimal

84

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง การกำหนด cheched ให้ RadioButton

เป็นเทคนิดในการกําหนด default ของการเลือก RadioButton โดยการ กําหนด ให้ checked ที่ RadioButton ที่เราต้องการ ให้เป็น Default และ กำหนด id ให้ Widget

เปิด คลาส MainActivty ออกมา โค้ด 85

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

Declaration ตัวแปร ที่ควบคุม Widget

86

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง Initial Widget กับ ตัวแปรที่ประกาศ

ในการรับค่าจาก editText ต้องแปลงชนิดของขัอมูลเป็น String โดย มาสเตอร์ ประกาศตัวแปร strMoney เพิ่ม

87

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง การหาช่องว่าง บน editText

บางครั้ง User หลงลืม กรอกจํานวนที่ editText ทําได้อย่างนี่

Android Device Monitor

คือ เดรื่องที่ใช้ ในการดู Service ต่างๆ ของ มือถือ หรือ Emulator

88

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง Logcat Message Fillter Setting

มาสเตอร์ จะ Filter Log มาดูเฉพาะ ที่เกี่ยวข้องกับ แอพของเรา

และลอง รันโค้ด ที่ได้บน Emulator ดู พร้อมเปิด DDMS มาสเตอร์ ลองไม่กรอง อะไร เลย คลิกปุ่ม

89

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง มาสเตอร์ ลองกรอก 12345 และ คลิกปุ่ม

Alert Dialog

มาสเตอร์ ทําแบบนี่นะครับ เมื่อไร ? ก็ตาม ที่มีช่องว่าง ให้ มี Dialog เตือน เริ่มจาก สร้าง คลาสเปล่าๆ ก่อน

90

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

Create New Class

มาสเตอร์ ตั่งชื่อ คลาส ตามนี่

ตัว android Studio ก็จะสร้าง คลาส ให้แบบนี้

91

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง มาสเตอร์ สร้าง เมธอด HaveSpaceDialog และ ประกาศตัวแปร AlertDialog.Builder

มาสเตอร์ ไป Copy Icon มาไว้ใน drawable-mdpi

92

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

กลับมาที่ คลาส PlaceholderFragment มาสเตอร์ ประกาศตัวแปร ที่สืบทอดมาจาก คลาส ที่เราสร้างขึ้น 93

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

ลองทดสอบโค้ด ที่ได้ บน Emulator 94

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

การใช้ RadioGroup และ RadioButton

มาสเตอร์ ประกาศตัวแปรเพิ่ม และ กําหนดค่าเริ่มต้นให้ แบบนี้

โดย มาสเตอร์ หา Factor ตัวคุณจาก

95

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

96

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

เป็นที่มาของ ค่าเริ่มต้นของตัวแปรต่อไปนี้

97

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

มาสเตอร์ เอา RadioGroup มา SetOnCheckedChangeListenter แบบนี้ และใช้ Switch Case มากําหนดเงื่อนไข ของการ เลือก RadioButton

มาสเตอร์ ใส่ Log เพื่อตรวจสอบการเลือก RadioButton 98

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

99

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

100

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง มาสเตอร์ ประการตัวแปร douAnswer และ strAnswer สําหรับเก็บคําตอบ ที่คํานวนได้

มาสเตอร์ สร้าง เมธอด calculateAnswer(); สําหรับ คํานวนคําตอบ

101

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง มาสเตอร์ ทดสอบโค้ด ที่ได้บน Emulator และ ดูผล LogCat บน DDMS โดย มาสเตอร์ ลองกรอง ค่าเงินบาท 1000

102

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

Create Method ShowAnswer

กลับไปที่ คลาส MyAlertDialog ให้เราสร้าง เมธอด ShowAnswer เพื่อ รับค่า มาแสดงบน AlertDialog

103

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง กลับมาที่ คลาส PlaceholderFragmen ที่ เมธอด onCreateView

ทดสอบโค้ดที่ได้บน Emulator

104

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

105

http://androidthai.in.th

อบรมแอนดรอยด์ กับ มาสเตอร์ อึ่ง

http://androidthai.in.th https://www.facebook.com/android.Training.by.EWTC Hot Line 081-859-5309

106

http://androidthai.in.th