04 layout design and basic widget
TRANSCRIPT
![Page 1: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/1.jpg)
Layout DesignAnuchit [email protected]
![Page 2: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/2.jpg)
Layout design
Android has 3 basic layout design LinearLayout (horizontal, vertical), Relativelayout and ConstraintLayout.
![Page 3: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/3.jpg)
Codelab: Layout design
Create new activities with 2 widget TextView and Button in LinearLayout (horizontal, vertical), Relativelayout and ConstraintLayout.
![Page 4: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/4.jpg)
LinearLayout Horizontal
![Page 5: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/5.jpg)
LinearLayout Vertical
![Page 6: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/6.jpg)
RelativeLayout Vertical
![Page 7: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/7.jpg)
ConstraintLayout Vertical
![Page 8: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/8.jpg)
TextView
Attribute
● android:textColor="#33333"
● android:text="Hello World"
● android:textSize="30sp"
Methods
● getText
● setText
● setTypeFace
![Page 9: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/9.jpg)
EditText
XML Attribute
● android:inputType="text"
Methods
● getText
● setText
![Page 10: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/10.jpg)
EditText : inputType
● text
● textPersonName
● textPassword
● numberPassword
● textEmailAddress
● phone
● textPostalAddress
● textMultiLine
● time
● date
● number
● numberSigned
● numberDecimal
![Page 11: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/11.jpg)
Button
XML Attribute
● android:style="?android:attr/buttonStyleSmall
● android:text="Button"
Methods
● setOnClickListener
![Page 12: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/12.jpg)
Checkbox
Methods
● isChecked● setChecked(true)● setOnClickListener
![Page 13: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/13.jpg)
Radiobutton
Use with RadioGroup widget, methods
● isChecked● Toggle● setOnClickListener
![Page 14: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/14.jpg)
Toggle Button
XML Attribute
● android:textOn="Vibrate on"● android:textOff="Vibrate off"
Methods
● setOnCheckedChangeListener
![Page 15: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/15.jpg)
Codelab: Calculator app layout
Use button and textview to create calculator app and change button id prepare for next codelab
![Page 16: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/16.jpg)
![Page 17: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/17.jpg)
![Page 18: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/18.jpg)
![Page 19: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/19.jpg)
Codelab: Layout design with widget
Create basic form with widget, choose your own layout design.
![Page 20: 04 layout design and basic widget](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a65d5c37f8b9ad02f8b4819/html5/thumbnails/20.jpg)