Building a modern Android UI

Presented at http://chicagoroboto.com with John Hoford, this talk gives an overview of the current expectations of creating an android application, the different tools and framework available, as well as exploring how ConstraintLayout could be taken advantage of in this light.

Transcript

1. Building a Modern Android UI Nicolas Roard @camaelon John Hoford @johnhoford
2. Material Design
3. Material is the Metaphor
4. Bold Graphic Intentional
5. Motion provides Meaning
6. Intentional Motion
7. Intentional Motion
8. Guides User’s focus
9. Guides User’s focus
10. Baseline Grid
11. Keylines
12. Ratio
13. http://material.io
14. Components
15. Layout
16. Simple vs Complex LinearLayout FrameLayout TableLayout GridLayout RelativeLayout ConstraintLayout
17. ConstraintLayout
18. ConstraintLayout • Flat Layouts • Expressive Layouts • Visual Editor
21. Vertical LinearLayout
22. Vertical LinearLayout RelativeLayout Image Image
23. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout
24. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView
25. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout EditText TextView
26. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout EditText TextView Horizontal LinearLayout EditText TextView
27. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout EditText TextView Horizontal LinearLayout EditText TextView TextView
28. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout EditText TextView Horizontal LinearLayout EditText TextView TextView Horizontal LinearLayout Button Button
29. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout EditText TextView Horizontal LinearLayout EditText TextView TextView Horizontal LinearLayout Button Button
30. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout EditText TextView Horizontal LinearLayout EditText TextView TextView Horizontal LinearLayout Button Button
31. Vertical LinearLayout RelativeLayout Image Image Vertical LinearLayout TextView Horizontal LinearLayout EditText TextView Horizontal LinearLayout EditText TextView TextView Horizontal LinearLayout Button Button
32. ConstraintLayout
33. ConstraintLayout Image Image TextView EditText TextView EditText TextView TextView Button Button
34. ConstraintLayout Image Image TextView EditText TextView EditText TextView TextView Button Button
35. What • Small (130 Kb) • Unbundled Library • Flexible foundation • Direct Resolution • Linear System Solver
36. What • Small (130 Kb) • Unbundled Library • Flexible foundation • Direct Resolution • Linear System Solver Linear System Solver
37. What • Small (130 Kb) • Unbundled Library • Flexible foundation • Direct Resolution • Linear System Solver Linear System Solver Constraints System
38. What • Small (130 Kb) • Unbundled Library • Flexible foundation • Direct Resolution • Linear System Solver Linear System Solver Direct Resolution Constraints System
39. What • Small (130 Kb) • Unbundled Library • Flexible foundation • Direct Resolution • Linear System Solver Linear System Solver Direct Resolution Constraints System UI Builder
40. What • Small (130 Kb) • Unbundled Library • Flexible foundation • Direct Resolution • Linear System Solver Linear System Solver Direct Resolution Constraints System UI Builder Inference
41. 1.0.2 • 16 updates since Google IO’16 • Faster! • New Features • Improved Visual Editor support • Default Layout in Android Studio
42. Row
43. Row
46. How it works • Horizontal Chain, packed • Bias to 0 • Resizable element set to default=wrap
47. Gone behavior
48. Gone behavior
50. Inadapted Margins?
52. Gone Margins!
53. Framework & Support Lib Common patterns and components
54. Navigation Drawer
55. Navigation Drawer
56. ViewPager
57. ViewPager
58. Coordinator Layout
59. Coordinator Layout
60. Android Studio
61. Goals
62. Goals Visualize
63. Goals Visualize Create
64. Goals Visualize Create Easy
65. Goals Visualize Create Easy Efficiently
76. Tools attributes • tools: • tools:showIn • tools:layout • tools:listitem • tools:parentTag https://developer.android.com/studio/write/tool-attributes.html
77. Tools attributes • tools: • tools:showIn • tools:layout • tools:listitem • tools:parentTag override attributes at design time https://developer.android.com/studio/write/tool-attributes.html
78. Tools attributes • tools: • tools:showIn • tools:layout • tools:listitem • tools:parentTag override attributes at design time shows this layout embedded in another one https://developer.android.com/studio/write/tool-attributes.html
79. Tools attributes • tools: • tools:showIn • tools:layout • tools:listitem • tools:parentTag override attributes at design time shows this layout embedded in another one which layout to use for a fragment https://developer.android.com/studio/write/tool-attributes.html
80. Tools attributes • tools: • tools:showIn • tools:layout • tools:listitem • tools:parentTag override attributes at design time 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
81. Tools attributes • tools: • tools:showIn • tools:layout • tools:listitem • tools:parentTag override attributes at design time 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
82. Tip: tools attributes tools:listitem=“@layout/row” https://developer.android.com/ studio/write/tool-attributes.html
83. Useful shortcuts • <esc> to select a parent group • <ctrl><shift> to switch between XML and Design mode • double-click on included elements <left> <right>
84. Constraint Layout Tools
85. Tools
86. Tools
87. Tools
88. Tools
89. Tools
90. Tools
91. Tools
92. Tools • Automatically makes constraints • Control for simple moving of views
93. Tools • Automatically makes constraints • Control for simple moving of views
94. Inference Automatically create constraints • Based on probability a model for connections • Constrains unconstrained views • Does not move views (not an alignment tool)
95. Inference Automatically create constraints • Based on probability a model for connections • Constrains unconstrained views • Does not move views (not an alignment tool)
96. Inference Automatically create constraints • Based on probability a model for connections • Constrains unconstrained views • Does not move views (not an alignment tool)
97. Inference Automatically create constraints • Based on probability a model for connections • Constrains unconstrained views • Does not move views (not an alignment tool)
98. Inference Automatically create constraints • Based on probability a model for connections • Constrains unconstrained views • Does not move views (not an alignment tool)
99. Inference Automatically create constraints • Based on probability a model for connections • Constrains unconstrained views • Does not move views (not an alignment tool)
100. Motion
101. Animating Content
102. Animating Content • View state change: StateListAnimator • android:stateListAnimator • Vector Drawable • <vector> + <animated-vector> + <objectAnimator> • Reveal animation • Ripples
103. Animated Icons
104. Animated Icons
105. Combined with other animations
106. Combined with other animations
107. Activity Transitions
108. Activity Transitions • enter & exit transitions • explode, slide, fade • shared elements • bounds, clip, transform, image transform
109. Activity Transitions • enter & exit transitions • explode, slide, fade • shared elements • bounds, clip, transform, image transform
110. Layout Transitions TransitionManager
111. ConstraintSet
112. ConstraintSet
113. ConstraintSet • Separate views from how we layout them
114. ConstraintSet • Separate views from how we layout them • Encapsulate all constraints in an object
115. ConstraintSet • Separate views from how we layout them • Encapsulate all constraints in an object • You can apply a ConstraintSet to an existing ConstraintLayout
116. ConstraintSet • Separate views from how we layout them • Encapsulate all constraints in an object • You can apply a ConstraintSet to an existing ConstraintLayout • Switch between multiple ConstraintSet
117. ConstraintSet
118. ConstraintSet ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set
119. 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
120. 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 mConstraintSet1.applyTo(mConstraintLayout);
121. Dialog
122. Dialog
123. Landscape
124. Rotation
125. Rotation
126. ConstraintLayout & Motion
127. ConstraintLayout & Motion
128. 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 mConstraintSet1.applyTo(mConstraintLayout);
129. 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);
130. • Programmatically change individual parameters • Use TransitionManager to smooth animation Individual View Animation
131. • Programmatically change individual parameters • Use TransitionManager to smooth animation Individual View Animation
132. • 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);
133. ConstraintLayout & Motion
134. ConstraintLayout & Motion • Flat Hierarchy == No clipping issues
135. ConstraintLayout & Motion • Flat Hierarchy == No clipping issues • Scene Graph
136. ConstraintLayout & Motion • Flat Hierarchy == No clipping issues • Scene Graph • ConstraintSet == Keyframe
139. ConstraintLayout : UI director • What you can do with widgets, you can do with components • Everything is still the same • A lot more flexible • Easy to build and test
140. NavigationView
141. NavigationView
144. • |
145. • |
146. Custom Transitions • ConstraintSet • Custom TransitionSet • Support library physics TransitionManager.beginDelayedTransition(cl, new MyCustomAnimationSet())
147. Custom Transitions • ConstraintSet • Custom TransitionSet • Support library physics TransitionManager.beginDelayedTransition(cl, new MyCustomAnimationSet())
148. Visibility & Ripple
149. Visibility & Ripple
150. What’s next • Android Studio 2.4 • default RTL support in ConstraintLayout editor • Component Tree • Slice • ConstraintLayout 1.1 • Barriers • Percent dimension • Groups
151. Component Tree
152. Slice Editor
153. Slice Editor
154. Slice Editor
155. Slice Editor
156. Barriers • “min” and “max” for constraints • implemented as a virtual helper
157. Barriers • “min” and “max” for constraints • implemented as a virtual helper
158. Groups • Apply operations on a group of widget • opacity • translate • elevation • visibility
159. Match Constraints & Percent • Define a dimension as a percent of the parent
160. Fin
161. Contact Nicolas Roard @camaelon +NicolasRoard John Hoford @johnhoford +johnhoford ConstraintLayout Documentation https://developer.android.com/ reference/android/support/constraint/ package-summary.html File Bugs & Feature Requests! http://b.android.com