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
   

   View Slide

2. View Slide

3. Goals
   

   View Slide

4. Goals
   Visualize
   

   View Slide

5. Goals
   Visualize
   Create
   

   View Slide

6. Goals
   Visualize
   Create
   Easy
   

   View Slide

7. Goals
   Visualize
   Create
   Easy
   Efficiently
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. Android Studio Designer
    

    View Slide

25. Android Studio Designer
    Layout Lib
    

    View Slide

26. Android Studio Designer
    Layout Lib
    Libraries
    

    View Slide

27. Android Studio Designer
    Layout Lib
    Libraries Project code & resources
    

    View Slide

28. Android Studio Designer
    Layout Lib
    Libraries
    Layout Handlers
    Project code & resources
    

    View Slide

29. Tools attributes
    • tools:
    • tools:ignore
    • tools:showIn
    • tools:layout
    • tools:listitem
    • tools:parentTag
    https://developer.android.com/studio/write/tool-attributes.html
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

36. Useful shortcuts
    • to select a parent group
    • to switch between XML and Design mode
    • double-click on included elements
    
    
    

    View Slide

37. ConstraintLayout
    

    View Slide

38. Why
    

    View Slide

39. ConstraintLayout
    • Flat Layouts
    • Expressive Layouts
    • Visual Editor
    

    View Slide

40. View Slide

41. View Slide

42. Vertical LinearLayout
    

    View Slide

43. Vertical LinearLayout
    RelativeLayout
    Image
    Image
    

    View Slide

44. Vertical LinearLayout
    RelativeLayout
    Image
    Image
    Vertical LinearLayout
    

    View Slide

45. Vertical LinearLayout
    RelativeLayout
    Image
    Image
    Vertical LinearLayout
    TextView
    

    View Slide

46. Vertical LinearLayout
    RelativeLayout
    Image
    Image
    Vertical LinearLayout
    TextView
    Horizontal LinearLayout
    EditText
    TextView
    

    View Slide

47. Vertical LinearLayout
    RelativeLayout
    Image
    Image
    Vertical LinearLayout
    TextView
    Horizontal LinearLayout
    EditText
    TextView
    Horizontal LinearLayout
    EditText
    TextView
    

    View Slide

48. Vertical LinearLayout
    RelativeLayout
    Image
    Image
    Vertical LinearLayout
    TextView
    Horizontal LinearLayout
    EditText
    TextView
    Horizontal LinearLayout
    EditText
    TextView
    TextView
    

    View Slide

49. Vertical LinearLayout
    RelativeLayout
    Image
    Image
    Vertical LinearLayout
    TextView
    Horizontal LinearLayout
    EditText
    TextView
    Horizontal LinearLayout
    EditText
    TextView
    TextView
    Horizontal LinearLayout
    Button
    Button
    

    View Slide

50. Vertical LinearLayout
    RelativeLayout
    Image
    Image
    Vertical LinearLayout
    TextView
    Horizontal LinearLayout
    EditText
    TextView
    Horizontal LinearLayout
    EditText
    TextView
    TextView
    Horizontal LinearLayout
    Button
    Button
    

    View Slide

51. Vertical LinearLayout
    RelativeLayout
    Image
    Image
    Vertical LinearLayout
    TextView
    Horizontal LinearLayout
    EditText
    TextView
    Horizontal LinearLayout
    EditText
    TextView
    TextView
    Horizontal LinearLayout
    Button
    Button
    

    View Slide

52. Vertical LinearLayout
    RelativeLayout
    Image
    Image
    Vertical LinearLayout
    TextView
    Horizontal LinearLayout
    EditText
    TextView
    Horizontal LinearLayout
    EditText
    TextView
    TextView
    Horizontal LinearLayout
    Button
    Button
    

    View Slide

53. ConstraintLayout
    

    View Slide

54. ConstraintLayout
    Image
    Image
    TextView
    EditText
    TextView
    EditText
    TextView
    TextView
    Button
    Button
    

    View Slide

55. ConstraintLayout
    Image
    Image
    TextView
    EditText
    TextView
    EditText
    TextView
    TextView
    Button
    Button
    

    View Slide

56. What
    

    View Slide

57. View Slide

58. View Slide

59. Constraints
    

    View Slide

60. Constraints
    No Constraints…
    

    View Slide

61. Constraints
    

    View Slide

62. Constraints
    Vertical
    +
    Horizontal
    Constraints
    

    View Slide

63. Constraints
    

    View Slide

64. Constraints
    at least
    one horizontal
    one vertical
    

    View Slide

65. What
    • Small (130 Kb)
    • Unbundled Library
    • Flexible foundation
    • Direct Resolution
    • Linear System Solver
    

    View Slide

66. What
    • Small (130 Kb)
    • Unbundled Library
    • Flexible foundation
    • Direct Resolution
    • Linear System Solver Linear System Solver
    

    View Slide

67. What
    • Small (130 Kb)
    • Unbundled Library
    • Flexible foundation
    • Direct Resolution
    • Linear System Solver Linear System Solver
    Constraints System
    

    View Slide

68. What
    • Small (130 Kb)
    • Unbundled Library
    • Flexible foundation
    • Direct Resolution
    • Linear System Solver Linear System Solver
    Direct Resolution
    Constraints System
    

    View Slide

69. What
    • Small (130 Kb)
    • Unbundled Library
    • Flexible foundation
    • Direct Resolution
    • Linear System Solver Linear System Solver
    Direct Resolution
    Constraints System
    UI Builder
    

    View Slide

70. What
    • Small (130 Kb)
    • Unbundled Library
    • Flexible foundation
    • Direct Resolution
    • Linear System Solver Linear System Solver
    Direct Resolution
    Constraints System
    UI Builder Inference
    

    View Slide

71. 1.0.2
    • 16 updates since Google IO’16
    • Faster!
    • New Features
    • Improved Visual Editor support
    • Default Layout in Android Studio
    

    View Slide

72. Constraints
    

    View Slide

73. Relative Positioning
    
    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">
    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" />
    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"/>
    
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

74. Relative Positioning
    
    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">
    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" />
    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"/>
    
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

75. Text Baseline
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

76. Text Baseline
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

77. Bias
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

78. Bias
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

79. Dimensions
    • wrap_content
    • match_constraint (0dp)
    • fixed size
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

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
    

    View Slide

81. Dimensions
    wrap match fixed
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

82. Match Constraint
    • default behavior (spread vs wrap)
    • ratio
    • weights (in chains)
    • min & max
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

83. Match Constraint : max
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

84. Match Constraint : max
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

85. Aspect Ratio
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

86. Aspect Ratio
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

87. Gone behavior
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

88. Gone behavior
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

89. Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

90. Inadapted Margins?
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

91. Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

92. Gone Margins!
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

93. Guidelines
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

94. Guidelines
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

95. Chains
    A B
    Chain
    bi-directional constraints
    Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

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
    

    View Slide

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
    

    View Slide

98. Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

99. Chains
    Guidelines
    Gone
    Dimension
    Relative Positions
    

    View Slide

100. Constraint Layout Tools
     

     View Slide

101. Tools
     

     View Slide

102. Tools
     

     View Slide

103. Tools
     

     View Slide

104. Tools
     

     View Slide

105. Tools
     

     View Slide

106. Tools
     

     View Slide

107. Tools
     

     View Slide

108. Tools
     • Automatically makes constraints
     • Control for simple moving of views
     

     View Slide

109. Tools
     • Automatically makes constraints
     • Control for simple moving of views
     

     View Slide

110. Inference
     Automatically create constraints
     • Based on probability a model for connections
     • Constrains unconstrained views
     • Does not move views (not an alignment tool)
     

     View Slide

111. Inference
     Automatically create constraints
     • Based on probability a model for connections
     • Constrains unconstrained views
     • Does not move views (not an alignment tool)
     

     View Slide

112. Animation
     

     View Slide

113. Animation
     

     View Slide

114. Animation
     

     View Slide

115. ConstraintSet
     

     View Slide

116. ConstraintSet
     ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set
     ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set
     

     View Slide

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
     

     View Slide

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);
     

     View Slide

119. • Programmatically change individual parameters
     • Use TransitionManager to smooth animation
     Individual View
     Animation
     

     View Slide

120. • Programmatically change individual parameters
     • Use TransitionManager to smooth animation
     Individual View
     Animation
     

     View Slide

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);
     

     View Slide

122. A few examples…
     

     View Slide

123. Row
     

     View Slide

124. Row
     

     View Slide

125. Tip: tools attributes
     tools:listitem=“@layout/row”
     https://developer.android.com/
     studio/write/tool-attributes.html
     

     View Slide

126. View Slide

127. View Slide

128. View Slide

129. View Slide

130. View Slide

131. How it works
     • Vertical Chain, packed
     • ImageView with
     height=0dp
     • ImageView with default
     height behavior to “wrap”
     

     View Slide

132. How it works
     • Vertical Chain, packed
     • ImageView with
     height=0dp
     • ImageView with default
     height behavior to “wrap”
     

     View Slide

133. View Slide

134. View Slide

135. How it works
     • Horizontal Chain, packed
     • Bias to 0
     • Resizable element set to
     default=wrap
     

     View Slide

136. Dialog
     

     View Slide

137. Dialog
     

     View Slide

138. Landscape
     

     View Slide

139. Rotation
     

     View Slide

140. Rotation
     

     View Slide

141. Animation…
     

     View Slide

142. Animation…
     

     View Slide

143. • |
     2 layouts
     

     View Slide

144. Custom Animations
     • ConstraintSet
     • Custom TransitionSet
     • Support library physics
     

     View Slide

145. Custom Animations
     • ConstraintSet
     • Custom TransitionSet
     • Support library physics
     

     View Slide

146. What’s next
     • Android Studio 2.4
     • default RTL support in ConstraintLayout editor
     • Component Tree
     • ConstraintLayout 1.1
     • Barriers
     • Groups
     

     View Slide

147. Barriers
     • “min” and “max” for constraints
     • implemented as a virtual helper
     

     View Slide

148. Barriers
     • “min” and “max” for constraints
     • implemented as a virtual helper
     

     View Slide

149. Groups
     • Apply operations on a group of widget
     • opacity
     • translate
     • elevation
     • visibility
     

     View Slide

150. Component Tree
     

     View Slide

151. Slice Editor
     

     View Slide

152. Slice Editor
     

     View Slide

153. Slice Editor
     

     View Slide

154. Slice Editor
     

     View Slide

155. Fin
     

     View Slide

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
     

     View Slide