Save 37% off PRO during our Black Friday Sale! »

Building a modern Android UI

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.

B9012970f22b84c5b344ffa6f8a884d5?s=128

Nicolas Roard

April 21, 2017
Tweet

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

  19. None
  20. None
  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

  44. None
  45. None
  46. How it works • Horizontal Chain, packed • Bias to

    0 • Resizable element set to default=wrap
  47. Gone behavior

  48. Gone behavior

  49. None
  50. Inadapted Margins?

  51. None
  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

  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. None
  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
  137. None
  138. None
  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

  142. None
  143. None
  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