04 layout design and basic widget

20
Layout Design Anuchit Chalothorn [email protected]

Upload: anuchit-chalothorn

Post on 22-Jan-2018

46 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: 04 layout design and basic widget

Layout DesignAnuchit [email protected]

Page 2: 04 layout design and basic widget

Layout design

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

Page 3: 04 layout design and basic widget

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

LinearLayout Horizontal

Page 5: 04 layout design and basic widget

LinearLayout Vertical

Page 6: 04 layout design and basic widget

RelativeLayout Vertical

Page 7: 04 layout design and basic widget

ConstraintLayout Vertical

Page 8: 04 layout design and basic widget

TextView

Attribute

● android:textColor="#33333"

● android:text="Hello World"

● android:textSize="30sp"

Methods

● getText

● setText

● setTypeFace

Page 9: 04 layout design and basic widget

EditText

XML Attribute

● android:inputType="text"

Methods

● getText

● setText

Page 10: 04 layout design and basic widget

EditText : inputType

● text

● textPersonName

● textPassword

● numberPassword

● textEmailAddress

● phone

● textPostalAddress

● textMultiLine

● time

● date

● number

● numberSigned

● numberDecimal

Page 11: 04 layout design and basic widget

Button

XML Attribute

● android:style="?android:attr/buttonStyleSmall

● android:text="Button"

Methods

● setOnClickListener

Page 12: 04 layout design and basic widget

Checkbox

Methods

● isChecked● setChecked(true)● setOnClickListener

Page 13: 04 layout design and basic widget

Radiobutton

Use with RadioGroup widget, methods

● isChecked● Toggle● setOnClickListener

Page 14: 04 layout design and basic widget

Toggle Button

XML Attribute

● android:textOn="Vibrate on"● android:textOff="Vibrate off"

Methods

● setOnCheckedChangeListener

Page 15: 04 layout design and basic widget

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
Page 17: 04 layout design and basic widget
Page 18: 04 layout design and basic widget
Page 19: 04 layout design and basic widget

Codelab: Layout design with widget

Create basic form with widget, choose your own layout design.

Page 20: 04 layout design and basic widget