This document discusses layout design in Android and provides examples of different layouts and widgets. It describes LinearLayout, RelativeLayout, and ConstraintLayout layouts. It then covers common widgets like TextView, EditText, Button, Checkbox, RadioButton, ToggleButton and provides their XML attributes and common methods. It concludes with instructions for code labs to create a calculator app layout and design a basic form with different layouts and widgets.

1. Layout Design
Anuchit Chalothorn
anoochit@gmail.com

2. Layout design
Android has 3 basic layout design LinearLayout (horizontal,
vertical), Relativelayout and ConstraintLayout.

3. Codelab: Layout design
Create new activities with 2 widget TextView and Button in
LinearLayout (horizontal, vertical), Relativelayout and
ConstraintLayout.

4. LinearLayout Horizontal

5. LinearLayout Vertical

6. RelativeLayout Vertical

7. ConstraintLayout Vertical

8. TextView
Attribute
● android:textColor="#33333"
● android:text="Hello World"
● android:textSize="30sp"
Methods
● getText
● setText
● setTypeFace

9. EditText
XML Attribute
● android:inputType="text"
Methods
● getText
● setText

10. EditText : inputType
● text
● textPersonName
● textPassword
● numberPassword
● textEmailAddress
● phone
● textPostalAddress
● textMultiLine
● time
● date
● number
● numberSigned
● numberDecimal

11. Button
XML Attribute
● android:style="?android:attr/butt
onStyleSmall
● android:text="Button"
Methods
● setOnClickListener

12. Checkbox
Methods
● isChecked
● setChecked(true)
● setOnClickListener

13. Radiobutton
Use with RadioGroup widget, methods
● isChecked
● Toggle
● setOnClickListener

14. Toggle Button
XML Attribute
● android:textOn="Vibrate on"
● android:textOff="Vibrate off"
Methods
● setOnCheckedChangeListener

15. Codelab: Calculator app layout
Use button and textview to create calculator app and
change button id prepare for next codelab

19. Codelab: Layout design with widget
Create basic form with widget, choose your own layout
design.