$30 off During Our Annual Pro Sale. View Details »

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.

Nicolas Roard

April 11, 2017
Tweet

More Decks by Nicolas Roard

Other Decks in Programming

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