ในหัวข้อนี้ เป็นการเริ่มต้นเรียนรู้ถึงการออกแบบหน้าจอ หรือส่วนประสานกับผู้ใช้งาน หรือ UI จะได้ศึกษาถึงการใช้งานเลย์เอาท์รูปแบบต่างๆ เพื่อใช้ในการออกแบบหน้าจอแอพพลิเคชั่น จะอธิบายถึงการจัดวาง Layout ที่สำคัญ รวมไปถึงเทคนิคเบื้องต้นในการผสาน Layout เข้ากับหน้าต่างหลัก

คือ เลย์เอาท์ที่มีการจัดเรียงอิลิเมนต์ (Element) ที่อยู่ภายในเป็นแบบเส้นตรง เช่น เรียงในแบบตามแนวตั้ง (Vertical) หรือเรียงในแบบตามแนวนอน (Horizotal) โดยที่มีการกำหนดคุณสมบัติ (Property) android = orientation ซึ่งมีขั้นตอนต่างๆ ดังต่อไปนี้

1. ให้สร้างไฟล์ XML ขึ้นมาใหม่ ที่ Project ให้คลิกขวาที่ app > Activity > Basic Activity

2. ให้ตั้งค่า Option ต่างๆ ดังรูป แล้วคลิกที่ปุ่ม Finish

3. จะปรากฏหน้าต่างด้านล่าง ให้คลิกเปลี่ยนโหมดจาก Design เป็น Text

4. ที่ไฟล์ content_linear.xml ให้เปลี่ยน Root Element จาก “android.support.constraint.ConstraintLayout” เป็น “Linearlayout”

5. คลิกที่ปุ่ม Design เพื่อแสดงผลแบบ Graphical user interface (GUI)
6. ที่หน้าต่าง Component Tree เลือก LinearLayout ที่ Attributes ตั้งค่า orientation เป็น vertical

7. ที่ Palette เลือก Text Fields แล้วเลือก Plain Text ลากวางที่หน้าต่าง Component Tree ภายใต้ LinearLayout (Vertical) โดยหลังจากเลือกมาวางแล้ว Plain Text จะเป็นเป็น editText

8. ที่หน้าต่าง Component Tree คลิกเลือก editText ที่หน้าต่าง Attributes ตั้งค่า layout:width เป็น match_parent

9. ที่ Palette เลือก Layout แล้วเลือก     ให้ลากวางที่หน้าต่าง Component ภายใต้ LinearLayout (vertical)

10. ที่ Palette เลือก Widgets แล้วเลือก Button ลากวางที่หน้างต่าง Component Tree ภายใต้ LinearLayout (horizontal) เป็นจำนวน 2 ปุ่ม button และ button2
11. ตั้งค่า New button ดังนี้
• ให้คลิก New button แล้วไปที่ Attributes เปลี่ยนเป็น text = Ok และ id = button
• ให้คลิก New button แล้วไปที่ Attributes เปลี่ยนเป็น text = Cancle และ id = button2

12. ที่หน้าต่าง Conponent Tree เลือก เลือก     ที่ Attributes ตั้งค่า gravity = center_horizontal แล้วคลิกแท็บ Text

13. เมื่อแก้ไข UI แล้วก็จะมีโค้ด XML ดังนี้

รีเลทีฟ เลย์เอาท์ คือ layout ที่มีการจัดเรียงอิลิเมนต์ ที่อยู่ภายในโดยอ้างอิงตำแหน่งของอิลิเมนต์นั้นๆ ภายใน เลย์เอาท์ หรืออาจจะอ้างอิงกับตัว เลยเอาท์ที่อิลิเมนต์นั้นอยู่ภายในก็ได้ ซึ่งสามารถอ้างอิงผ่าน id ของอิลิเมนต์หรือ เลย์เอาท์ โดยที่การสร้างรีเลทีฟเลยเอาท์มีขึ้นตอนต่างๆ ดังต่อไปนี้
1. เริ่มจากการวางอิลิเมนต์หลักก่อน โดบพิมพ์โค๊ต หรือคลิกลากไปวางตำแหน่งที่ต้องการ

เหตุที่ต้องทาอิลิเมนต์หลักก่อน เพราะว่าองค์ประกอบตัวต่อๆ ไป โดยจะอ้างอิงจากอิลิเมนต์นี้เช่นกำหนดว่ากรอบรับ username ให้วางไว้ด้านขวามือข้อความ username และให้วางเสมอระดับเดียวกัน
2. วาง EditText เป็นช่องรับ username โดยอ้างอิงว่า ให้อยู่ขวามือของข้อความ Username จากข้อ1 และอยู่เสมอแนวเดียวกันกับ Username

3. วางข้อความ Password โดยอ้างอิงว่า ให้อยู่ด้านล่างข้อความ Username และด้านซ้ายเสมอเป็นแนวเดียวกับ Username ด้วย ดังนี้

4. วาง EditText เป็นช่องรับ password โดยอ้างอิงว่า ให้อยู่ขวามือและฐานแนวเดียวกับ password ข้อ 3 และด้านซ้ายจัดให้อยู่เสมอแนวเดียวกับช่องรับ username ข้อ 1

5. วางปุ่ม Sign in โดยอ้างอิงกับ Password หรือจะอ้างอิงกับ Username ก็ได้ โดยใช้หลักการเดียวกัน

โดยลักษณะการอ้างอิงจะเป็นทอดๆ ตามลูกศร ดังรูป โดยขณะนี้เราให้ Username เป็นตัวหลัก ถ้าขยับUsername ตัวอื่นก็จะขยับลงทั้งแผง เมื่อ run จะได้ผลตามภาพด้านล่าง

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

และเมื่อดูกราฟิกในแอนดรอยด์จะพบว่า Graphical Layout จะเห็นอิลิเมนต์ต่างๆ ซ้อนกันอยู่ เป็นชั้นๆ ซึ่ง เป็นลักษณะของเฟรมเลย์เอาต์และเมื่อรันก็จะแสดงผลลัพธ์

แอบโซลูตเลย์เอาต์คือ เลย์เอาต์ที่มีการจัดวางอิลิเมนต์ต่างๆ ที่อยู่ภายในตามตาแหน่งจริงบนหน้าจอ โดยกาหนดตาแหน่งของอิลิเมนต์ผ่านพร็อพเพอร์ตี้ android:layout_x และ android:layout_y สาหรับการสร้างแอบโซลูตเลย์เอาต์มีขั้นตอนต่างๆ ดังต่อไปนี้
ตัวอย่างการออกแบบหน้าจอด้วยแอบโซลูตเลย์เอาต์เลย์เอาต์

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<Button
android:id="@+id/next"
android:layout_x="10dp"
android:layout_y="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/next" />

<TextView
android:layout_x="19dp"
android:layout_y="74dp"
android:text="First Name"
android:textSize="18sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<EditText
android:layout_x="140dp"
android:layout_y="54dp"
android:width="300px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autofillHints="" />

<TextView
android:layout_x="22dp"
android:layout_y="137dp"
android:text="Last Name"
android:textSize="18sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<EditText
android:layout_x="143dp"
android:layout_y="117dp"
android:width="300px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</AbsoluteLayout>

และเมื่อดูกราฟิกในแอนดรอยด์จะพบว่า Graphical Layout จะเห็นอิลิเมนต์ต่างๆ ซ้อนกันอยู่ เป็นชั้นๆ ซึ่งเป็นลักษณะของแอบโซลูตเลย์เอาต์