บทที่ 4 โครงสร้างของโปรเจ็คแอนดรอยด์ใน android studio

บทที่ 4 โครงสร้างของโปรเจ็คแอนดรอยด์ใน android studio

4.1 the Preview toolbar

4.2 exploring the palette

4.3 the layout preview

4.4 the Component Tree

4.5 the Properties window

4.6 text and design view tabs

4.1 the Preview toolbar

หลังจากคลิก Finish ก็จะเข้าสู่หน้าจอหลักของ android studio ซึ่งเป็นสภาพแวดล้อมที่เราจะใช้ ในการพัฒนาแอพ โดยหายจะมี ไดอะล็อก Tip of the Day ที่แนะนำเคล็บลับการใช้งาย Android Studio ปรากฎขึ้นมา ให้คลิกปุ่ม close ในไดอะล็อดเพื่อปิดไป

Android Studio จะเปิด Project MuFiestApp เพื่อให้ทำงานกับโปรเจ้กนี้ได้ทันที โดยวินโดว์ Project ที่อยู่ ทางซ้ายจะแสดงโครงสร้างของโปรเจ็คว่า ประกอบไปด้วยไฟล? / โฟลเดอร์อะไรบ้าง ซึ่งสามารถปรับการแสดงผลได้หลายมุมมอง ดีฟอลค์จะเป็นมุมมอง Android (ตามรูป)

มุมมอง android จะแสดงส่วนประกอบของโปรเจ็คในรูปแบบที่ช่วยให้เราทำงานพื้นฐานต่างๆ ในการพัฒนาแอพแอนดรอย์ที่ได้สะดวกที่สุด โดยแบ่งส่วนประกอบของโปรเจ็ค เป็น 3 ส่วนคือ

• Manifest file อยู่ใน Folder Manifests
• Sorce code ภาษา java อยู่ใน Folder java
• ไพล์รีซอร์สต่างๆ เช่น layout file , รูปภาพ , ค่า String อยู่ใน folder Res

โดยทั้งสามนี้จะอยู่ภายใต่โฟลเดอรื app อีกทีหนึ่ง

4.2 Exploring the palette

Exploring the Android Studio IDE

หลังจากการ fleshing Out เมื่อออกจาก App เวลาในการสำรวจส่วนหลัก ๆ ของ IDE ในการ pane โปรเจก สามารถมองดูค่าแตกต่างของไฟล์ และ folder ถ้าไม่สามารถเปิดแบบอัตโนมัติได้ ให้คลิกที่ส่วนชื่อของโปรเจกและก็จะแสดงมาเป็น tab silde ได้ (ตามรูป)

โดยจากค่าเริ่มต้น ในหน้าจอ android Studio โดยไฟล์ จะแสดงมุมมอง มุมมองนี้ไม่ได้สะท้อนลำดับชั้นของไฟล์ใน disk แต่จัดระเบียบตาม โมดูล และประเภทของไฟล์ เพื่อให้ง่ายต่อการนำทางของไฟล์ที่ดูเยอะๆ ระหว่างหว่าง ไฟลเริ่มต้น ของโปรเจก ,การซ่อนไฟล์ , หรือไฟล์บางอย่างที่ไม่ได้ใช้กันทั่วไป ในการเปลี่ยนแปลงทางโครงสร้างบางอย่าง เมื่อเปรียบเทียบโครงสร้างของไฟล์ไปถึงในdisk มีดังต่อไปนี้

• การแสดงไฟล์ทั้งหมดของโปรเจ็ก ในการ build ไฟล์ โดยใช้องค์ประกอบ level Gradle Script ระดับบนสุด
• แสดงทั้งหมด ในไฟล์ manifest ในกลุ่มแต่และ module ออกมาเป็น level group (เมื่อมีข้อแตกต่างของไฟล์ manifest นั้น ก็จะแจกต่างที่ผลิตภัณฑ์ที่แตกต่างกันและชนิดของการสร้างด้วย)
• แสดงการในทรัพยากรทั้งหมด ในกลุ่มเดียวกัน แทนที่จะเป็น folder แยกต่างหากสำหรับ การแยก Resource ไฟล์ ตัวอย่างเช่น เครื่องทุกรุ่นที่มีความหนาแน่น ของ icon ที่เรียกใช้ จะพบว่ามีผลด้วยกัน

ภายในโมดูลแอป Android แต่ละไฟล์จะปรากฏในกลุ่มต่อไปนี้:

module-name/

build/

คอนเทรน การ build ในการออก

libs/

คอนเทรน ส่วนตัว libraries

src/

คอนเทรน ส่วนที่เป็น code ทั้งหมด และ การ resource files จาก โมดูลนั้น จากการติดตาม ไดเรกทอรีย่อย

androidTest/

Contains จะประกอบด้วยโค้ดสำหรับการ test ที่รันบนอุปกรณ์แอนดรอยด์

main/

Android code และรีซอร์สที่ใช้ร่วมกันทั้งหมดสร้างตัวแปร (ไฟล์สำหรับตัวแปรสร้างอื่น ๆ อยู่ในไดเร็กทอรีของพี่น้องเช่น src / debug / สำหรับประเภทการสร้างการแก้ปัญหา)

AndroidManifest.xml
อธิบายลักษณะของแอพพลิเคชันและส่วนประกอบแต่ละส่วน สำหรับข้อมูลเพิ่มเติม https://developer.android.com/guide/topics/manifest/manifest-intro.html.

java/

คอมเทรน java sorcecode

jni/

คอนเทรน native โดยใช้ Java Native Interface (JNI) สำหรับข้อมูลเพิ่มเติมhttps://developer.android.com/ndk/index.html

gen/

คอนเทรน java ไฟล์ ในการ generated จาก android studio , เช่นไฟล์ R.java และ การ interfaces ของการสร้าง AIDL ไฟล์

res/

คอนเทรน เช่นไฟล์ที่สามารถวาดได้, ไฟล์เลย์เอาต์และสตริง UI ดูแหล่งข้อมูลแอ็พพลิเคชัน

assets/

คอนเทรนไฟล์ ที่จะรวบรวมไว้ในไฟล์. apk ตามที่เป็น โดยสามารถนำทางตัวไดเรกทอรีนี้ได้เช่นเดียวกับระบบไฟล์ทั่วไปที่ใช้ URI และอ่านไฟล์เป็นสตรีมไบต์โดยใช้ AssetManager ตัวอย่างเช่น เป็นตำแหน่งที่ดีสำหรับพื้นผิวและข้อมูลเกม และ อื่นๆ

test/

คอนเทรนไฟล์ ที่ ประกอบด้วย code สำหรับการทดสอบในเครื่องที่รันบน JVM โฮสต์ของผู้ใช้

build.gradle (module)

การกำหนดโครงสร้างการสร้างเฉพาะโมดูล

build.gradle (project)

การกำหนดสร้างการกำหนดค่าที่นำไปใช้กับโมดูลทั้งหมด โดยไฟล์นี้เป็นหนึ่งในโครงการดังนั้นจึงควรรักษาไว้ในการควบคุมการแก้ไขด้วยรหัสแหล่งอื่น ๆ ทั้งหมด สำหรับข้อมูลเกี่ยวกับการสร้างไฟล์อื่น ๆ

4.3 the layout preview

ปุ่ม Design จะอยู่ถัดจากปุ่มข้อความใต้โปรแกรมแก้ไขข้อความ ในตัวxml โดยสำหรับผู้ใช้ Android Studio สามารถใช้กับงานร่วมกันสำหรับผู้ที่ไม่รู้จักในฐานะนักพัฒนาซอฟต์แวร์เมื่อเราสร้างเค้าโครง UI ในแอนดรอยด์ต้องการแสดงรูปแบบ

ตัวอย่างเช่น android: text = “Test Test” เพื่อดูว่าจะมีลักษณะอย่างไรในรูปแบบที่ต้องการ หลายครั้งที่เลืมลบข้อมูลตัวอย่างดังกล่าว เมื่อสร้างรายการ จะต้องเรียกใช้แอพเพื่อดูว่ารายการของคุณมีลักษณะอย่างไร

สามารถใช้ปุ่มแสดงตัวอย่างที่มุมขวาบนเพื่อเพิ่มหน้าต่างแสดงตัวอย่างถัดจากโค้ด XML ที่เรียกว่า Text:

UPDATE:

ถ้าไม่รู้ว่า ตัว Preview อยู่ตรง สามารถเลือกได้ที่ : View -> Tool Windows -> Preview

การ Preview Mode

จากที่ได้กล่าวมาข้างต้น จะเห็นการแก้ไข layout 1 จาก IDE คุณสมบัติที่จะน่าใจและ ทำหน้าเข้าใจรูปแบบการใช้ layout ได้มากขึ้น เข้าถึงได้โดยการเปิดไฟล์รูปแบบ XML และเลือก ‘ ข้อความ ‘ แท็บที่ด้านล่างของหน้าต่างการแก้ไขหลัก เลือกแท็บ ‘ แนวตั้ง ‘ โดยตัวอย่างก็หน้าที่ออกแบบจะอยู่บนด้านขวามือของ Android Studio สิ่งแรกที่ต้องทำคือเลือกอุปกรณ์เพื่อดูตัวอย่าง แอป โดยการกำหนดค่าที่กำหนดไว้ล่วงหน้าจากเมนูแบบเลื่อนลงอุปกรณ์หรือเลือก ‘เพิ่มคำจำกัดความอุปกรณ์’ และสร้างการกำหนดค่าใหม่ ตามภาพ

การเลือก Device

หากต้องการสลับระหว่างโหมดแนวนอนและแนวตั้งให้คลิกไอคอน “‘Configuration’ การกำหนดค่า” ในมุมซ้ายมือของหน้าต่างแสดงตัวอย่างและเลือก “สลับไปยังพื้นที่จัดวาง” หรือ “เปลี่ยนเป็นรูปแบบ”

การปรับโหมดแนวตั้งและแนวนอน Landscape and Portrait Mode

การเปรียบเทียบและใช้คอนทราส UI บนอุปกรณ์หลายเครื่องพร้อมกันหรือไม่? เลือก ‘แสดงตัวอย่างขนาดหน้าจอทั้งหมด’ จากเมนูแบบเลื่อนลงอุปกรณ์

การ Preview All Screen Sizes

นอกจากนี้ยังสามารถสลับระหว่างรูปแบบแพลตฟอร์มและธีมต่างๆ โดยใช้เมนูแบบเลื่อนลง เพื่อแสดงรูปแบบ Size ของหน้าจอแต่ละรุ่นของ size android พร้อมแสดงคุณสมบัติมาให้

การ แสดง Palette

โดยตัวอย่างรูปแบบตัวอย่างหน้าจอ จะแสดงรูปแบบเป็นปัจจุบันและถูกต้อง ใน andrid studioและลักษณะการทำงานเหมือนกับใน Eclipse ในการเข้าถึงการเปิดไฟล์รูปแบบ XML และเลือกแท็บ ‘’Design’ ‘ ที่อยู่ภายใต้หน้าต่างการแก้ไข จากที่เลือกแท็บ ‘Palette’ จะอยู่ทางด้านซ้ายมือของ IDE และที่จะเริ่มต้นการออกแบบ UI ของคุณโดยใช้การลากและวางตามที่พัฒนาได้กำหนด

4.4 การ Component Tree

Component Tree –ความเข้าใจเกี่ยวกับมุมมอง Android มุมมองกลุ่มและโครงร่าง ผู้ใช้สร้างขึ้นโดยใช้โครงสร้างแบบลำดับชั้น โครงสร้าง component แสดงภาพรวมของลำดับชั้นของการออกแบบส่วนติดต่อผู้ใช้ การเลือกองค์ประกอบจากโครงสร้างส่วนประกอบจะทำให้มุมมองที่สอดคล้องกันใน layout ถูกเลือก ในทำนองเดียวกันการเลือกมุมมองจากเค้าโครงหน้าจออุปกรณ์จะเป็นการเลือกมุมมองที่อยู่ในลำดับชั้นของโครงสร้างคอมโพเนนต์

Component Ids ฟังก์ชั่นวิธีการ changeColor จะต้องกำหนด ID ไปที่ Layout และ TextView โดยค่าเริ่มต้น“Hello World” วัตถุ TextView ไม่ได้มีID และไม่ไม่เค้าโครงสร้าง (ซึ่งเป็น RelativeLayout หมายความว่ามันจะช่วยให้เครื่องมือและส่วนประกอบอื่น ๆ จะต้องสอดคล้องสัมพันธ์กับแต่ละอื่น ๆ ) เลือก TextView ในกล่องบนขวา ที่เรียกว่า “Component Tree” โดยจะเลื่อนผ่านคุณสมบัติของมันจนกว่าจะเห็น“id” เปลี่ยนรหัสเป็น“ข้อความ” ทำสิ่งเดียวกันสำหรับองค์ประกอบ RelativeLayout แต่ตั้งรหัสในการ“รูปแบบ” คุณควรจะสามารถที่จะเห็น ID ที่สอดคล้องกันถัดจากแต่ละองค์ประกอบลักษณะคล้ายๆ ต้นไม้ตัวแทน ออกไปเพื่อให้ง่ายต่อการออกแบบโครงสร้าง

ลองเปลี่ยนไปใช้วิธี changeColor ที่เกิดขึ้นจริง ไปที่แท็บ MainActivity.java ในแท็บ จะเห็นวิธีการที่เรียกว่า onCreate การดำเนินการนี้จะเริ่มทำงานเมื่อใดก็ตามที่แอปเริ่มทำงานเป็นครั้งแรกโดยสร้างเมธอด “changeColor” หลังจากสร้าง onCreate เพิ่มข้อมูลต่อไปนี้ลงในคลาส MainActivity.java

public void changeColor(View view)

{

RelativeLayout layout = (RelativeLayout)findViewById(R.id.layout);

TextView text = (TextView)findViewById(R.id.text);

layout.setBackgroundColor(Color.RED);

text.setText(R.string.PageIsRed);

}

การเปลี่ยนสีของรูปแบบเป็นสีแดงที่ครั้งหนึ่งเคยมีการคลิกปุ่ม นอกจากนี้ยังจะกำหนดวัตถุ TextView ที่จะพูดว่า“หน้า page เป็นสีแดง”

สำหรับการเริ่มต้น Android Stidio , มีหลายสิ่งใน code บล็อกดังกล่าวข้างต้น

โดยครั้งแรก ใน check method ที่เป็น signature : public void changeColor(View view). โดย Android จะใช้ onClick ดูเป็นพารามิเตอร์หนึ่ง ถ้าเกิดมีการการล้มเหลวแอปจะแสดงผิดพลาดออกมา

ถัดไป จากเป็น findViewById() method นี่คือ วิธีการมาตรฐานในการเข้าถึงรูปแบบที่เรียกว่า view (หรือวัตถุบนหน้าจอโปรแกรม) สำหรับการใช้งานในโปรแกร ที่สามารถมุมมองที่มีผลต่อการ RelativeLayout เป็นสิ่งจำเป็นเพราะ findViewById จะส่งค่ากลับมาให้ที่ view ใน Java polymorphism ไม่อนุญาตให้ RelativeLayout (ซึ่งเป็น-A View) ที่จะติดต่อ view ทุกรุปแบบ

และเมื่อ ใช้ text.setText(“Page is Red”). ในการ Handle โดยปุ่ม text ของ ข้อความ และบางครั้งอาจจะมีการแจ้งเตือน โดยในที่นี้เอาจาก (R.string.PageIsRed )

4.5 the Properties Or Attributes window

.

Properties ทุกมุมมององค์ประกอบที่ระบุไว้ใน palette ได้เกี่ยวข้องกับพวกเขาชุดของคุณสมบัติที่สามารถนำมาใช้ในการปรับพฤติกรรมและลักษณะของมุมมองว่า แผงคุณสมบัติของนักออกแบบให้การเข้าถึงคุณสมบัติของมุมมองที่เลือกในปัจจุบันในรูปแบบที่ช่วยให้การเปลี่ยนแปลงที่จะทำ

เมื่อปิดรูปแบบแฟ้มโปรแกรมแก้ไขแบบเปิด โดยค่าเริ่มต้น ( ดังแสดงในรูปที่ 1 ) แทน แก้ไขในโปรแกรมแก้ไขข้อความ ให้คลิกแท็บ ข้อความที่ด้านล่างของหน้าต่าง ในขณะที่ในการแก้ไขข้อความ คุณยังสามารถดูจาน ส่วนประกอบ ต้นไม้ และออกแบบแก้ไขโดยคลิกที่แสดงตัวอย่างบนด้านขวาของหน้าต่าง อย่างไรก็ตาม หน้าต่างลักษณะไม่พร้อมใช้งานจากโปรแกรมแก้ไขข้อความ

การแก้ไขหน้า view attributes

The Attributes window

แทนการแก้ไขแอททริบิวต์ใน XML สามารถทำได้จากหน้าต่างคุณลักษณะ (ด้านขวาของตัวแก้ไขเค้าโครง) หน้าต่างนี้ได้เฉพาะ เมื่อตัวแก้ไขการออกแบบมีการเปิด เพื่อ ให้แน่ใจว่า คุณเลือกการออกแบบแท็บที่ด้านล่างของหน้าต่าง

เมื่อเลือกมุมมองที่หน้าต่างแอตทริบิวต์ที่แสดงให้เห็นต่อไปนี้ตามที่ระบุ:

1. ดูการตรวจสอบที่มีการควบคุมสำหรับรูปแบบกว้าง / สูง, อัตรากำไรขั้นต้นและอคติ (ใช้ได้เฉพาะสำหรับมุมมองใน ConstraintLayout) สำหรับข้อมูลเพิ่มเติมโปรดดูที่การสร้าง UI ที่ตอบสนองกับ ConstraintLayout
2. รายการของแอตทริบิวต์ทั่วไปสำหรับมุมมองที่เลือก เพื่อดูแอตทริบิวต์ที่พร้อมใช้งานทั้งหมด คลิกดูทั้งหมดคุณลักษณะที่ด้านบนของ หน้าต่าง
3. ส่วน Favorite แอตทริบิวต์ที่คุณเลือก ในการเพิ่มคุณลักษณะคลิกปุ่ม View all attributes ลักษณะทั้งหมด แล้วคลิกดาว ที่ปรากฏขึ้นเมื่อคุณเลื่อนเมาส์ไปที่ด้านซ้ายของชื่อแอตทริบิวต์

ในการค้นหาคุณลักษณะเฉพาะมุมมองคลิก View all attributes ดูคุณลักษณะทั้งหมดแล้วคลิกค้นหาที่ด้านบนของหน้าต่าง

Setting Properties

แผงคุณสมบัติให้เข้าถึงการตั้งค่าพร้อมใช้งานสำหรับคอมโพเนนต์ที่เลือกในปัจจุบัน คลิกในแผง และพิมพ์อักขระจะเริ่มกระบวนการค้นหาเพื่อเน้น และเลือกที่ใกล้เคียงอักขระตัวพิมพ์

ในขณะที่แผงคุณสมบัติให้สามารถเข้าถึงรายการทั้งหมดของคุณสมบัติสำหรับคอมโพเนนต์ที่เลือกในปัจจุบัน สามารถเข้าถึงชุดย่อยของคุณสมบัติทั่วไปสามารถได้รับ โดยคลิกสองครั้งบนมุมมองส่วนประกอบในโครงร่าง คลิกสองครั้งบนคอมโพเนนต์ TextView เช่น ให้เข้าถึงคุณสมบัติของข้อความและรหัสสำหรับมุมมองดังแสดงในรูปที่

คุณสมบัติบางอย่าง ทั้งคุณสมบัติหลักและแผงเข้าประกอบด้วยปุ่มแสดงจุดสามจุด บ่งชี้ว่า การตั้งค่ากล่องโต้ตอบเพื่อช่วยในการเลือกค่าคุณสมบัติที่เหมาะสม แสดงกล่องโต้ตอบ เพียงแค่คลิกที่ปุ่ม จำนวนตัวเลือกที่ถูกต้องแน่นอนมีที่พักจะนำเสนอแบบหล่นลงเมนู (รูป 15–4) ที่เลือกอาจจะทำ

Figure 15–4

โดยค่าเริ่มต้น คุณสมบัติแผงแสดงรายการเท่ากันมากที่สุดใช้คุณสมบัติ ถึงช่วงเต็มของคุณสมบัติสำหรับชนิดของส่วนประกอบที่เลือกในปัจจุบันได้ ด้วยการเปลี่ยนแผงเข้าโหมดผู้เชี่ยวชาญ โหมดนี้สามารถสลับเปิด และปิด โดยคลิกที่ปุ่มกรวยในแถบเครื่องมือตามที่ระบุ โดยลูกศรในรูป 15–5:

Figure 15–5

ในกรณีส่วนใหญ่ การเข้าถึงคุณสมบัติโหมดผู้เชี่ยวชาญจะไม่ต้อง แม้ว่ามันจะมีประโยชน์ที่จะทราบของโหมดนี้ในกรณีที่คุณกำลังมองหาพักไม่อยู่ในโหมดมาตรฐาน

4.6 text and design view tabs

Text สำหรับ ส่วนสร้างการติดต่อกับผู้ใช้ java

หน้าจอหรือส่วนติดต่อกับผู้ใช้ หรือ UI ที่ย่อมาจาก User Interface ถือว่าเป็นองค์ประกอบสำคัญที่สุดอย่างนึ่งของแอพ สามารถสร้าง UI ของแอพแอนดรอย์ได้ 2 วิธี คือการให้ เป็น code java และ การใช้ layout

ในหัวข้อนี้จะแสดงวิธีแรกคือการใช้โค๊ต จาวา ก่อน เช่น

จากโค๊ต จะมีการสร้าง ออบเจ็ค TextView ขั้นมา จากนั้นเรียกใช้ method setText เพื่อกำหนด ข้อความว่า “สวัสดีแอนดรอย์” ให้ใช้กับ textview นี้ ตามด้วยตัวอักษรใน textview เป็น 25 (หน่อยเป็น 25 dp) แล้วจึงเรียก method setContentView เพื่อนำ textview มากำหนดเป็น UI ของ Actvity

เมื่อ Run Project MyFirstApp จะได้ดังรูป

โดยข้อความ “สวัสดีแอนดรอย์” ที่อยู่ถัดลงมาจาก title bar คือส่วนของ textview ซึ่งใช้ตัวอักษรขนาด 25 dp ตามที่ได้ระบุ ใน code java

สร้างส่วนติดต่อผู้ใช้ด้วยไฟล์ XML

นอกจากการใช้โค๊ต java แล้วการสร้าง UI ของ android สามารถยังใช้อีกวิธีหนึ่งก็คือ การใช้ไฟล์ xml วิธีนี้จะช่วยให้ออกแบบและแก้ไข UI ได้ง่ายกว่าเนื่องจาก UI จะถูกแยกออกมาจาก logic ของแอพ สามารถเห็นหน้าตาได้คร่าวๆ ได้ตั้งแต่ตอนที่พัฒนา ส่วนการสร้าง UI ด้วยโค๊ต java มักจะให้วาดเมื่อต้องการวาดหน้าจอของแอพทั้งหมด หรือเรียกว่าการ Custom View

ไฟล์ XML ต่อไปนี้จะสร้าง UI ที่เทียบเท่ากับการใช้ code java ดังนี้

ไฟล์ xml ที่ใช้กำหนด UI ว่า layout ซึ่งประกอบด้วย อิลิเมนต์ (แท็ก) ที่มีชื่อเป็น view ชนิดต่างๆ โดยใช้ตัวอย่างนี้คือ มีอิลิเมต์เดี่ยวคือ Textview (แท็ก <view/> สามารถนำชื่อ class ใดก็ได้ท่สืบทอดจาก คลาสView มาระบุเป็น อิลิเมนต์ใน layout file ไม่ว่าจะเป็นคลาส android เตรียมไว้ให้ หรือ class ที่สร้างขึ้นเองโดยก็ตาม

จะเห็นว่าการออกแบบ UI โดยใช้ XML Layout จ้เป็นวิธีที่ง่ายกว่าการใช้ code java เนื่องจากโครงสร้างภาษา XML ประกอบด้วยอิลิเมนต์หรือแท็ก และภายในอิลิเมนต์จะมีแอตทริบิวต์ที่ใช้กำหนดคุณสมบัติต่างๆของอิลิเมนต์ ซึ่งคนที่เราพัฒนาภาษา HTML มาก่อนจะสามารถคุ้นเคยกับภาษานี้ได้คล่องอยู่แล้ว

ในที่นี้มีการระบุ แอตทิบิวต์ให้กับ textviewทั้ง 5 แอตทริบิวต์ ได้แก่

Xmlns : android แอตทริบิวต์นี้คือ XML namespace declaration ซึ่งบอกให้ android ว่ากำลังจะสร้างแอตทริบิว์พื้นฐานที่กำหนดไว้ในแอตดรอย์

Android : layout_width กำหนดความกว้างของอิลิเมนต์ ในที่นี้กำหนดให้เป็นค่า wrap_content ซึ่งหวมายความว่า การกำหนดความกว้างให้เข้ากับเนื้อหาในอิลิเมนต์

Android : layout_hieght กำหนดความสูงของอิลิเมนต์ ในที่นี้กำหนดให้เป็นค่า wrap_content ซึ่งหวมายความว่า การกำหนดความสูงให้เข้ากับเนื้อหาในอิลิเมนต์

Android : text กำหนดข้อความของอิลิเมนต์

Android : textsize กำหนดขนาดตัวอักษรของข้อความในอิลิเมนต์

โดย layout จะอยู่โฟลเดอร์ rex\layout ของโปรเจ็ค ทั้วนี้จะโฟลเดอร์ res จะย่อมาจาก resorce โดยจะใช้เก็บไฟล์ซีซอร์สต่างๆที่ใช้ในแอพ เช่น รูปภาพ เสียง ค่าstring และ layout เป็นต้น

กรณีโปรเจ็ก MyFirstApp โดยในตอนแรก Android Studio จะ layout ไฟล์ ที่ชื่อว่า activity_main.xml และกำหนดให้ไฟล์นี้เป็น UI ของ App แต่ในหัวข้อมี่การแก้ไข code ในไฟล์ MainActvity .java เพื่อมาสร้าง UI ด้วยโค๊ต java แทน โดยทั้งนี้จะต้องการให้เห็นว่า สามารถทำได้อยู่ 2 วิธีเท่านั้น แต่หลังจากนี้จะข้อสร้าง UI โดยใช้ layout file เป็นหลัก โดยให้ทำตามขั้นตอนดังนี้ เพื่อสร้างไฟล์ UI จากไฟล์ activity_main.xml โดยให้คลิก tab ที่ activity_main.xml หรือหากเปิดไฟล์นี้แล้ว ก็ให้ไปที่ windows Project แล้วจากนั้นคลิกเข้าไปที่ไฟล์เดอร์ app > res > layout แล้วให้ดับเบิ้ลคลิกที่ไฟล์ activity_main.xml โดยสามารถเลือกมองได้ทั้งสองรูปแบบก็คือ

มุมมอง Design จะแสดงหน้าจอในการออกแบบ layout โดยสามารถคลิกลากวิวชนิดต่างๆ จาก Palette ทางซ้ายมาวางบนหน้าจอโดยนี้ได้โดยตรง

มุมมอง Text จะแสดงโค๊ต xml ของ layout file โดยมี windows Preview จะอยู่ตรงตัวอย่างมุมขวา (ดังภาพ)