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

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.

B9012970f22b84c5b344ffa6f8a884d5?s=128

Nicolas Roard

April 11, 2017
Tweet

Transcript

  1. Android Design Tools Nicolas Roard +NicolasRoard @camaelon

  2. None
  3. Goals

  4. Goals Visualize

  5. Goals Visualize Create

  6. Goals Visualize Create Easy

  7. Goals Visualize Create Easy Efficiently

  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  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

  40. None
  41. None
  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

  57. None
  58. None
  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

  126. None
  127. None
  128. None
  129. None
  130. None
  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”
  133. None
  134. None
  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