สไลด์ประกอบการบรรยายในหัวข้อ Advance Android Layout Walkthrough ที่งาน Code Mania 11 ดาวน์โหลดไฟล์ต้นฉบับได้ที่ https://goo.gl/WShXQR

1. @Akexorcist
Advance Android
Layout Walkthrough

2. การออกแบบเลย์เอาท์
บนแอนดรอยด์เบื้องต้น

3. Model View
POJO Layout
Activity/Fragment
Java XML
Java
MVC in Android
Controller

6. View Group
View
View

7. View Group
Linear Layout
Frame Layout
Relative Layout
Coordinator Layout
Toolbar
Button
Text View
Card View
Recycler View
Progress Bar
View

8. มองเรื่องเลย์เอาท์ให้เป็น 3 มิติ

9. y
x
z

10. y
x
Linear Layout
(Vertical)
z

11. y
x
Linear Layout
(Vertical)
z

12. y
x
Linear Layout
(Vertical)
z

13. y
x
Linear Layout
(Horizontal)
z

14. y
x
Frame Layout
z

15. y
x
Frame Layout
z

16. y
x
1
1
2
3
2
3
z
Relative Layout

17. y
x
A
A B
C
B
C
z
Relative Layout

18. View Group
View

19. Match Parent
และ
Wrap Content

20. Code Mania 11
OK
WTF!?
Width & Height
Wrap Content

21. Code Mania 11
Width
Match Parent
OK
WTF!?
Height
Wrap Content

22. Code Mania 11
OK
Width & Height
Match Parent

23. Code Mania 11 OK
Width
Match Parent
Height
Wrap Content

25. Android
Auto
Android
Design
Layout
Android
Studio
2.0 Beta
5
Horizontal
Linear Layout
Width : Match Parent
Height : Wrap Content
Button
Width : 0dp
Height : Match Parent
Weight : 1

26. Margin และ Padding

27. Code Mania 11

28. Code Mania 11
Margin

29. Code Mania 11
Margin
Padding

30. Code Mania 11

32. Button และ Image Button

33. Button Image Button
background
text src
background

34. + OK = OK
+ =
OK

35. + =
+ =
+ =
+ =
+ =
+ =
3+2 || 3x2

36. Drawable Resources
มีให้ใช้โคตรเยอะ

37. Bitmap File
Nine-Patch File
Layer List
State List
Level List
Transition Drawable
Inset Drawable
Clip Drawable
Scale Drawable
Shape Drawable
ic_food_online
ic_delivery

38. Bitmap File
Nine-Patch File
Layer List
State List
Level List
Transition Drawable
Inset Drawable
Clip Drawable
Scale Drawable
Shape Drawable
Original

39. Bitmap File
Nine-Patch File
Layer List
State List
Level List
Transition Drawable
Inset Drawable
Clip Drawable
Scale Drawable
Shape Drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android....
<item
android:width="40dp"
android:height="40dp"
android:drawable="@drawable/ic_activation_01"
android:gravity="center" />
<item
android:width="30dp"
android:height="30dp"
android:drawable="@drawable/ic_activation_02"
android:gravity="center" />
<item
android:width="20dp"
android:height="20dp"
android:drawable="@drawable/ic_activation_03"
android:gravity="center" />
</layer-list>
+ + =

40. Bitmap File
Nine-Patch File
Layer List
State List
Level List
Transition Drawable
Inset Drawable
Clip Drawable
Scale Drawable
Shape Drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android....
<item
android:drawable="@drawable/btn_ok_pressed"
android:state_enabled="true"
android:state_pressed="true" />
<item
android:drawable="@drawable/btn_ok_disable"
android:state_enabled="false" />
<item
android:drawable="@drawable/btn_ok_normal" />
</selector>
Button Button Button
Normal
State
Pressed
State
Disable
State

41. Bitmap File
Nine-Patch File
Layer List
State List
Level List
Transition Drawable
Inset Drawable
Clip Drawable
Scale Drawable
Shape Drawable
ImageView ivScore = (ImageView)
findViewById(R.id.iv_asd);
int score = ...;
...
if(score == 0) {
ivScore.setImageResource(R.drawable.ic_score_bad);
} =else if(score == 1) {
ivScore.setImageResource(R.drawable.ic_score_ok);
} else if(score == 2) {
ivScore.setImageResource(R.drawable.ic_score_good);
}

42. Bitmap File
Nine-Patch File
Layer List
State List
Level List
Transition Drawable
Inset Drawable
Clip Drawable
Scale Drawable
Shape Drawable
<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android...
<item
android:drawable="@drawable/ic_score_bad"
android:maxLevel="0" />
<item
android:drawable="@drawable/ic_score_ok"
android:maxLevel="1" />
<item
android:drawable="@drawable/ic_score_good"
android:maxLevel="2" />
</level-list>
ImageView ivScore = (ImageView)
findViewById(R.id.iv_score);
int score = ...;
...
ivScore.setImageLevel(score);

43. Bitmap File
Nine-Patch File
Layer List
State List
Level List
Transition Drawable
Inset Drawable
Clip Drawable
Scale Drawable
Shape Drawable
ImageView ivScore = (ImageView) findViewById(R.id.iv_score);
TransitionDrawable drawable =
(TransitionDrawable) ivScore.getDrawable();
...
drawable.startTransition(1000);
drawable.reverseTransition(1000);
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/...
<item
android:drawable="@drawable/ic_score_very_bad" />
<item
android:drawable="@drawable/ic_score_very_good" />
</transition>

44. Bitmap File
Nine-Patch File
Layer List
State List
Level List
Transition Drawable
Inset Drawable
Clip Drawable
Scale Drawable
Shape Drawable
ImageView ivScore = (ImageView) findViewById(R.id.iv_score);
TransitionDrawable drawable =
(TransitionDrawable) ivScore.getDrawable();
...
drawable.reverseTransition(1000);
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/...
<item
android:drawable="@drawable/ic_score_very_bad" />
<item
android:drawable="@drawable/ic_score_very_good" />
</transition>

45. Bitmap File
Nine-Patch File
Layer List
State List
Level List
Transition Drawable
Inset Drawable
Clip Drawable
Scale Drawable
Shape Drawable
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/...
android:drawable="@drawable/bg_badge"
android:insetBottom="10dp"
android:insetLeft="10dp"
android:insetRight="10dp"
android:insetTop="10dp"/>

46. Bitmap File
Nine-Patch File
Layer List
State List
Level List
Transition Drawable
Inset Drawable
Clip Drawable
Scale Drawable
Shape Drawable
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/...
android:clipOrientation="horizontal"
android:drawable="@drawable/ic_rate_very_good"
android:gravity="left" />
ImageView ivRate = (ImageView) findViewById(R.id.iv_rate);
ClipDrawable drawable = (ClipDrawable) ivRate.getDrawable();
...
drawable.setLevel(5000);

47. Bitmap File
Nine-Patch File
Layer List
State List
Level List
Transition Drawable
Inset Drawable
Clip Drawable
Scale Drawable
Shape Drawable
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/...
android:drawable="@drawable/ic_code_mania"
android:scaleGravity="center"
android:scaleHeight="60%"
android:scaleWidth="60%" />

48. Bitmap File
Nine-Patch File
Layer List
State List
Level List
Transition Drawable
Inset Drawable
Clip Drawable
Scale Drawable
Shape Drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/...
<stroke
android:width="4dp"
android:color="#ffffff"
android:dashGap="10dp"
android:dashWidth="10dp" />
<solid
android:color="#237793" />
<corners
android:radius="10dp" />
</shape>

49. <?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:clipOrientation="horizontal"
android:gravity="left">
<shape>
<solid
android:color="#ffd200" />
<corners
android:radius="50dp" />
</shape>
</clip>
Drawable Mixing

50. <View>, <Space>
และ <ViewStub>

51. <View
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#DDDDDD"/>

52. <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/ic_header_notify_01" />
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/ic_header_notify_02" />
</LinearLayout>

53. <ViewStub
android:id="@+id/vs_update_progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inflatedId="@+id/view_update_progress"
android:layout="@layout/view_update_info_progress" />

54. <include> กับ <merge>

55. <include
layout="@layout/view_user_info"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

56. <LinearLayout>
<ImageView>
<TextView>
<Button>
<LinearLayout>
<include>
<LinearLayout>
<TextView>
<LinearLayout>
<LinearLayout>
<TextView>
<LinearLayout>
<ImageView>
<TextView>
<Button>

57. <merge>
<ImageView>
<TextView>
<Button>
<LinearLayout>
<include>
<LinearLayout>
<TextView>
<LinearLayout>
<LinearLayout>
<TextView>
<ImageView>
<TextView>
<Button>

58. ใช้ Style ดูสิ
ชีวิตจะได้ง่ายขึ้น

60. <style name="NextzyButton">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:minWidth">100dp</item>
<item name="android:minHeight">48dp</item>
</style>
<style name="NextzyButton.Blue" parent="NextzyButton">
<item name="android:background">@drawable/shape_nextzy_button_blue</item>
</style>
<style name="NextzyButton.Green" parent="NextzyButton">
<item name="android:background">@drawable/shape_nextzy_button_green</item>
</style>

61. <Button
style="@style/NextzyButton.Blue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
Cancel

62. Cancel
<Button
style="@style/NextzyButton.Green"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />

63. Developer options ช่วยคุณได้

65. Show layout
boundaries

66. Window Animation scale
5x
Transition Animation scale
5x
Animator duration scale
5x

67. Overdraw 4x or more
Overdraw 3x
Overdraw 2x
Overdraw 1x
Debug GPU overdraw

68. Tips เล็ก Tricks น้อย

69. Android Layout Drawing Process
• Measure
• Layout
• Draw
?
?
?
?
?
?

70. Android Layout Drawing Process
• Measure
• Layout
• Draw

71. Android Layout Drawing Process
• Measure
• Layout
• Draw

72. View Inflation worked on the UI Thread
Extremely View Inflation == Block the UI Thread

73. Hierarchy Viewer
Android Device Monitor

74. Is RelativeLayout expensive?
Yes, if you're using nested RelativeLayout.
But single RelativeLayout is cheaper than nested LinearLayout.
RelativeLayout LinearLayout

75. Total view count <= 80 views
Nested deep level <= 10 levels

76. More android:layout_weight
More Expensive
==

77. Use tint color with icon image
Original android:tint="#000000" android:tint="#ffcc00"

78. RecyclerView
Master Complex Lists
Use it!!!!!

79. ScrollView for some items
RecyclerView for many items
ScrollView RecyclerView

80. Avoid various dimension values
Better way, try to use global values
<dimen name="default_margin_padding_extra_small">1dp</dimen>
<dimen name="default_margin_padding_small">2dp</dimen>
<dimen name="default_margin_padding">4dp</dimen>
<dimen name="default_margin_padding_large">8dp</dimen>
<dimen name="default_margin_padding_extra_large">16dp</dimen>

81. Shadow in Material Theme (Lollipop+)
Button
Margin >= 10dp
Button
Margin < 10dp

82. Vector Drawable
Say goodbye to bitmap
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="80dp"
android:height="80dp"
android:viewportWidth="80"
android:viewportHeight="80">
<path
android:pathData="M0 0h24v24H0z" />
<path
android:fillColor="#FFFFFF"
android:pathData="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35
8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5
0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z" />
</vector>

83. SVG >> VectorDrawable
http://inloop.github.io/svg2android/

84. Vector Drawable Compat
Yeah! It's also supported on pre-Lollipop

87. ทํายังไงให้รองรับ
หน้าจอได้หลายขนาด?

88. Too much fragmentation!

89. DP : Unit in Android world

90. 1,920x1,080
PX
640x360
DP
Nexus 5X

91. Stay flexible design
Fixed Size
Dynamic Size
Scrollable

93. Bucket of various densities
LDPI
MDPI
TVDPI
HDPI
280DPI
XHDPI
360DPI
400DPI
420DPI
XXHDPI
560DPI
XXXHDPI
120
160
213
240
280
320
360
400
420
480
560
640

94. Bucket of various densities
LDPI
MDPI
TVDPI
HDPI
280DPI
XHDPI
360DPI
400DPI
420DPI
XXHDPI
560DPI
XXXHDPI
120
160
213
240
280
320
360
400
420
480
560
640

95. 0.75
1
-
2
-
3
-
-
-
4
-
6
Bucket of various densities
LDPI
MDPI
TVDPI
HDPI
280DPI
XHDPI
360DPI
400DPI
420DPI
XXHDPI
560DPI
XXXHDPI
120
160
213
240
280
320
360
400
420
480
560
640

96. 0.75
1
-
2
-
3
-
-
-
4
-
6
Bucket of various densities
LDPI
MDPI
TVDPI
HDPI
280DPI
XHDPI
360DPI
400DPI
420DPI
XXHDPI
560DPI
XXXHDPI
120
160
213
240
280
320
360
400
420
480
560
640
75x75
113x113
-
150x150
-
225x225
-
-
-
300x300
-
450x450

97. Android Drawable Importer

100. Which density should be supported
Regular ImageApp Icon
MDPI
HDPI
XHDPI
XXHDPI
XXXHDPI
MDPI
HDPI
XHDPI
XXHDPI

101. ใช้ Vector แทน Bitmap เถ๊อะ!!
(แต่ภาพบางอย่างก็เลี่ยงไม่ได้เนอะ)