Android Design Tools : New features and tools for rapid UI development

Android Studio provides powerful tools to help you develop your application user interface. With many capabilities added in the past year, there's a lot to discover for developers. This talk covers how you can use those new tools and how they integrate with existing libraries. We will also cover new approaches such as ConstraintLayout to craft flexible user interfaces quickly.

Transcript

1. Android Design Tools Nicolas Roard +NicolasRoard @camaelon
3. Goals
4. Goals Visualize
5. Goals Visualize Create
6. Goals Visualize Create Easy
7. Goals Visualize Create Easy Efficiently
24. Android Studio Designer
25. Android Studio Designer Layout Lib
26. Android Studio Designer Layout Lib Libraries
27. Android Studio Designer Layout Lib Libraries Project code & resources
28. Android Studio Designer Layout Lib Libraries Layout Handlers Project code & resources
29. Tools attributes • tools: • tools:ignore • tools:showIn • tools:layout • tools:listitem • tools:parentTag https://developer.android.com/studio/write/tool-attributes.html
30. Tools attributes • tools: • tools:ignore • tools:showIn • tools:layout • tools:listitem • tools:parentTag override attributes at design time https://developer.android.com/studio/write/tool-attributes.html
31. Tools attributes • tools: • tools:ignore • tools:showIn • tools:layout • tools:listitem • tools:parentTag override attributes at design time ignore specific lint issues https://developer.android.com/studio/write/tool-attributes.html
32. Tools attributes • tools: • tools:ignore • tools:showIn • tools:layout • tools:listitem • tools:parentTag override attributes at design time ignore specific lint issues shows this layout embedded in another one https://developer.android.com/studio/write/tool-attributes.html
33. Tools attributes • tools: • tools:ignore • tools:showIn • tools:layout • tools:listitem • tools:parentTag override attributes at design time ignore specific lint issues shows this layout embedded in another one which layout to use for a fragment https://developer.android.com/studio/write/tool-attributes.html
34. Tools attributes • tools: • tools:ignore • tools:showIn • tools:layout • tools:listitem • tools:parentTag override attributes at design time ignore specific lint issues shows this layout embedded in another one which layout to use for a fragment which layout for a list item https://developer.android.com/studio/write/tool-attributes.html
35. Tools attributes • tools: • tools:ignore • tools:showIn • tools:layout • tools:listitem • tools:parentTag override attributes at design time ignore specific lint issues shows this layout embedded in another one which layout to use for a fragment which layout for a list item define which layout to use as parent for merge tag https://developer.android.com/studio/write/tool-attributes.html
36. Useful shortcuts • <esc> to select a parent group • <ctrl><shift> to switch between XML and Design mode • double-click on included elements <left> <right>
37. ConstraintLayout
38. Why
39. ConstraintLayout • Flat Layouts • Expressive Layouts • Visual Editor
42. Vertical LinearLayout
43. Vertical LinearLayout RelativeLayout Image Image
44. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout
45. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView
46. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout EditText TextView
47. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout EditText TextView Horizontal LinearLayout EditText TextView
48. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout EditText TextView Horizontal LinearLayout EditText TextView TextView
49. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout EditText TextView Horizontal LinearLayout EditText TextView TextView Horizontal LinearLayout Button Button
50. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout EditText TextView Horizontal LinearLayout EditText TextView TextView Horizontal LinearLayout Button Button
51. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout EditText TextView Horizontal LinearLayout EditText TextView TextView Horizontal LinearLayout Button Button
52. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout EditText TextView Horizontal LinearLayout EditText TextView TextView Horizontal LinearLayout Button Button
53. ConstraintLayout
54. ConstraintLayout Image Image TextView EditText TextView EditText TextView TextView Button Button
55. ConstraintLayout Image Image TextView EditText TextView EditText TextView TextView Button Button
56. What
59. Constraints
60. Constraints No Constraints…
61. Constraints
62. Constraints Vertical + Horizontal Constraints
63. Constraints
64. Constraints at least one horizontal one vertical
65. What • Small (130 Kb) • Unbundled Library • Flexible foundation • Direct Resolution • Linear System Solver
66. What • Small (130 Kb) • Unbundled Library • Flexible foundation • Direct Resolution • Linear System Solver Linear System Solver
67. What • Small (130 Kb) • Unbundled Library • Flexible foundation • Direct Resolution • Linear System Solver Linear System Solver Constraints System
68. What • Small (130 Kb) • Unbundled Library • Flexible foundation • Direct Resolution • Linear System Solver Linear System Solver Direct Resolution Constraints System
69. What • Small (130 Kb) • Unbundled Library • Flexible foundation • Direct Resolution • Linear System Solver Linear System Solver Direct Resolution Constraints System UI Builder
70. What • Small (130 Kb) • Unbundled Library • Flexible foundation • Direct Resolution • Linear System Solver Linear System Solver Direct Resolution Constraints System UI Builder Inference
71. 1.0.2 • 16 updates since Google IO’16 • Faster! • New Features • Improved Visual Editor support • Default Layout in Android Studio
72. Constraints
73. Relative Positioning <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" tools:layout_editor_absoluteX="56dp" tools:layout_editor_absoluteY="73dp" /> <Button android:id="@+id/button8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" app:layout_constraintLeft_toRightOf="@+id/button7" android:layout_marginLeft=“45dp" app:layout_constraintTop_toBottomOf="@+id/button7" android:layout_marginTop="38dp"/> </android.support.constraint.ConstraintLayout> Chains Guidelines Gone Dimension Relative Positions
74. Relative Positioning <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" tools:layout_editor_absoluteX="56dp" tools:layout_editor_absoluteY="73dp" /> <Button android:id="@+id/button8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" app:layout_constraintLeft_toRightOf="@+id/button7" android:layout_marginLeft=“45dp" app:layout_constraintTop_toBottomOf="@+id/button7" android:layout_marginTop="38dp"/> </android.support.constraint.ConstraintLayout> Chains Guidelines Gone Dimension Relative Positions
75. Text Baseline Chains Guidelines Gone Dimension Relative Positions
76. Text Baseline Chains Guidelines Gone Dimension Relative Positions
77. Bias Chains Guidelines Gone Dimension Relative Positions
78. Bias Chains Guidelines Gone Dimension Relative Positions
79. Dimensions • wrap_content • match_constraint (0dp) • fixed size Chains Guidelines Gone Dimension Relative Positions
80. Dimensions • wrap_content • match_constraint (0dp) • fixed size android:layout_height=“wrap_content" android:layout_height="0dp" android:layout_height="42dp" Chains Guidelines Gone Dimension Relative Positions
81. Dimensions wrap match fixed Chains Guidelines Gone Dimension Relative Positions
82. Match Constraint • default behavior (spread vs wrap) • ratio • weights (in chains) • min & max Chains Guidelines Gone Dimension Relative Positions
83. Match Constraint : max Chains Guidelines Gone Dimension Relative Positions
84. Match Constraint : max Chains Guidelines Gone Dimension Relative Positions
85. Aspect Ratio Chains Guidelines Gone Dimension Relative Positions
86. Aspect Ratio Chains Guidelines Gone Dimension Relative Positions
87. Gone behavior Chains Guidelines Gone Dimension Relative Positions
88. Gone behavior Chains Guidelines Gone Dimension Relative Positions
89. Chains Guidelines Gone Dimension Relative Positions
90. Inadapted Margins? Chains Guidelines Gone Dimension Relative Positions
91. Chains Guidelines Gone Dimension Relative Positions
92. Gone Margins! Chains Guidelines Gone Dimension Relative Positions
93. Guidelines Chains Guidelines Gone Dimension Relative Positions
94. Guidelines Chains Guidelines Gone Dimension Relative Positions
95. Chains A B Chain bi-directional constraints Chains Guidelines Gone Dimension Relative Positions
96. Different Chain Styles A B C Spread A B C Spread Inside A B C Weighted A B C Packed Chains Guidelines Gone Dimension Relative Positions
97. Different Chain Styles A B C Spread A B C Spread Inside A B C Weighted A B C Packed + bias Chains Guidelines Gone Dimension Relative Positions
98. Chains Guidelines Gone Dimension Relative Positions
99. Chains Guidelines Gone Dimension Relative Positions
100. Constraint Layout Tools
101. Tools
102. Tools
103. Tools
104. Tools
105. Tools
106. Tools
107. Tools
108. Tools • Automatically makes constraints • Control for simple moving of views
109. Tools • Automatically makes constraints • Control for simple moving of views
110. Inference Automatically create constraints • Based on probability a model for connections • Constrains unconstrained views • Does not move views (not an alignment tool)
111. Inference Automatically create constraints • Based on probability a model for connections • Constrains unconstrained views • Does not move views (not an alignment tool)
112. Animation
113. Animation
114. Animation
115. ConstraintSet
116. ConstraintSet ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set
117. ConstraintSet ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set mConstraintSet2.clone(context, R.layout.state2); // get constraints from layout setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); mConstraintSet1.clone(mConstraintLayout); // get constraints from ConstraintSet
118. ConstraintSet ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set mConstraintSet2.clone(context, R.layout.state2); // get constraints from layout setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); mConstraintSet1.clone(mConstraintLayout); // get constraints from ConstraintSet TransitionManager.beginDelayedTransition(mConstraintLayout); mConstraintSet1.applyTo(mConstraintLayout);
119. • Programmatically change individual parameters • Use TransitionManager to smooth animation Individual View Animation
120. • Programmatically change individual parameters • Use TransitionManager to smooth animation Individual View Animation
121. • Programmatically change individual parameters • Use TransitionManager to smooth animation Individual View Animation //Find the view you are over and set minimum height TransitionManager.beginDelayedTransition(myConstraintLayout); View child = myConstraintLayout.getChildAt(current); child.setMinimumHeight(400);
122. A few examples…
123. Row
124. Row
125. Tip: tools attributes tools:listitem=“@layout/row” https://developer.android.com/ studio/write/tool-attributes.html
131. How it works • Vertical Chain, packed • ImageView with height=0dp • ImageView with default height behavior to “wrap”
132. How it works • Vertical Chain, packed • ImageView with height=0dp • ImageView with default height behavior to “wrap”
135. How it works • Horizontal Chain, packed • Bias to 0 • Resizable element set to default=wrap
136. Dialog
137. Dialog
138. Landscape
139. Rotation
140. Rotation
141. Animation…
142. Animation…
143. • | 2 layouts
144. Custom Animations • ConstraintSet • Custom TransitionSet • Support library physics
145. Custom Animations • ConstraintSet • Custom TransitionSet • Support library physics
146. What’s next • Android Studio 2.4 • default RTL support in ConstraintLayout editor • Component Tree • ConstraintLayout 1.1 • Barriers • Groups
147. Barriers • “min” and “max” for constraints • implemented as a virtual helper
148. Barriers • “min” and “max” for constraints • implemented as a virtual helper
149. Groups • Apply operations on a group of widget • opacity • translate • elevation • visibility
150. Component Tree
151. Slice Editor
152. Slice Editor
153. Slice Editor
154. Slice Editor
155. Fin
156. Contact Nicolas Roard @camaelon +NicolasRoard John Hoford @johnhoford +johnhoford Documentation https://developer.android.com/ reference/android/support/constraint/ package-summary.html File Bugs! http://b.android.com