What
• Small (130 Kb)
• Unbundled Library
• Flexible foundation
• Direct Resolution
• Linear System Solver
Slide 36
Slide 36 text
What
• Small (130 Kb)
• Unbundled Library
• Flexible foundation
• Direct Resolution
• Linear System Solver Linear System Solver
Slide 37
Slide 37 text
What
• Small (130 Kb)
• Unbundled Library
• Flexible foundation
• Direct Resolution
• Linear System Solver Linear System Solver
Constraints System
Slide 38
Slide 38 text
What
• Small (130 Kb)
• Unbundled Library
• Flexible foundation
• Direct Resolution
• Linear System Solver Linear System Solver
Direct Resolution
Constraints System
Slide 39
Slide 39 text
What
• Small (130 Kb)
• Unbundled Library
• Flexible foundation
• Direct Resolution
• Linear System Solver Linear System Solver
Direct Resolution
Constraints System
UI Builder
Slide 40
Slide 40 text
What
• Small (130 Kb)
• Unbundled Library
• Flexible foundation
• Direct Resolution
• Linear System Solver Linear System Solver
Direct Resolution
Constraints System
UI Builder Inference
Slide 41
Slide 41 text
1.0.2
• 16 updates since Google IO’16
• Faster!
• New Features
• Improved Visual Editor support
• Default Layout in Android Studio
Slide 42
Slide 42 text
Row
Slide 43
Slide 43 text
Row
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
How it works
• Horizontal Chain, packed
• Bias to 0
• Resizable element set to
default=wrap
Slide 47
Slide 47 text
Gone behavior
Slide 48
Slide 48 text
Gone behavior
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Inadapted Margins?
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
Gone Margins!
Slide 53
Slide 53 text
Framework & Support Lib
Common patterns and components
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
Slide 78
Slide 78 text
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
Slide 79
Slide 79 text
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
Slide 80
Slide 80 text
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
Slide 81
Slide 81 text
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
Useful shortcuts
• to select a parent group
• to switch between XML and Design mode
• double-click on included elements
Slide 84
Slide 84 text
Constraint Layout Tools
Slide 85
Slide 85 text
Tools
Slide 86
Slide 86 text
Tools
Slide 87
Slide 87 text
Tools
Slide 88
Slide 88 text
Tools
Slide 89
Slide 89 text
Tools
Slide 90
Slide 90 text
Tools
Slide 91
Slide 91 text
Tools
Slide 92
Slide 92 text
Tools
• Automatically makes constraints
• Control for simple moving of views
Slide 93
Slide 93 text
Tools
• Automatically makes constraints
• Control for simple moving of views
Slide 94
Slide 94 text
Inference
Automatically create constraints
• Based on probability a model for connections
• Constrains unconstrained views
• Does not move views (not an alignment tool)
Slide 95
Slide 95 text
Inference
Automatically create constraints
• Based on probability a model for connections
• Constrains unconstrained views
• Does not move views (not an alignment tool)
Slide 96
Slide 96 text
Inference
Automatically create constraints
• Based on probability a model for connections
• Constrains unconstrained views
• Does not move views (not an alignment tool)
Slide 97
Slide 97 text
Inference
Automatically create constraints
• Based on probability a model for connections
• Constrains unconstrained views
• Does not move views (not an alignment tool)
Slide 98
Slide 98 text
Inference
Automatically create constraints
• Based on probability a model for connections
• Constrains unconstrained views
• Does not move views (not an alignment tool)
Slide 99
Slide 99 text
Inference
Automatically create constraints
• Based on probability a model for connections
• Constrains unconstrained views
• Does not move views (not an alignment tool)
Activity Transitions
• enter & exit transitions
• explode, slide, fade
• shared elements
• bounds, clip, transform, image transform
Slide 109
Slide 109 text
Activity Transitions
• enter & exit transitions
• explode, slide, fade
• shared elements
• bounds, clip, transform, image transform
Slide 110
Slide 110 text
Layout Transitions
TransitionManager
Slide 111
Slide 111 text
ConstraintSet
Slide 112
Slide 112 text
ConstraintSet
Slide 113
Slide 113 text
ConstraintSet
• Separate views from how we layout them
Slide 114
Slide 114 text
ConstraintSet
• Separate views from how we layout them
• Encapsulate all constraints in an object
Slide 115
Slide 115 text
ConstraintSet
• Separate views from how we layout them
• Encapsulate all constraints in an object
• You can apply a ConstraintSet to an existing ConstraintLayout
Slide 116
Slide 116 text
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
Slide 117
Slide 117 text
ConstraintSet
Slide 118
Slide 118 text
ConstraintSet
ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set
ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set
Slide 119
Slide 119 text
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
Slide 120
Slide 120 text
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);
Slide 121
Slide 121 text
Dialog
Slide 122
Slide 122 text
Dialog
Slide 123
Slide 123 text
Landscape
Slide 124
Slide 124 text
Rotation
Slide 125
Slide 125 text
Rotation
Slide 126
Slide 126 text
ConstraintLayout
&
Motion
Slide 127
Slide 127 text
ConstraintLayout
&
Motion
Slide 128
Slide 128 text
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);
Slide 129
Slide 129 text
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);
Slide 130
Slide 130 text
• Programmatically change individual parameters
• Use TransitionManager to smooth animation
Individual View
Animation
Slide 131
Slide 131 text
• Programmatically change individual parameters
• Use TransitionManager to smooth animation
Individual View
Animation
Slide 132
Slide 132 text
• 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);
Slide 133
Slide 133 text
ConstraintLayout & Motion
Slide 134
Slide 134 text
ConstraintLayout & Motion
• Flat Hierarchy == No clipping issues
Slide 135
Slide 135 text
ConstraintLayout & Motion
• Flat Hierarchy == No clipping issues
• Scene Graph
Slide 136
Slide 136 text
ConstraintLayout & Motion
• Flat Hierarchy == No clipping issues
• Scene Graph
• ConstraintSet == Keyframe
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
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
Slide 140
Slide 140 text
NavigationView
Slide 141
Slide 141 text
NavigationView
Slide 142
Slide 142 text
No content
Slide 143
Slide 143 text
No content
Slide 144
Slide 144 text
• |
Slide 145
Slide 145 text
• |
Slide 146
Slide 146 text
Custom Transitions
• ConstraintSet
• Custom TransitionSet
• Support library physics
TransitionManager.beginDelayedTransition(cl,
new MyCustomAnimationSet())
Slide 147
Slide 147 text
Custom Transitions
• ConstraintSet
• Custom TransitionSet
• Support library physics
TransitionManager.beginDelayedTransition(cl,
new MyCustomAnimationSet())
Slide 148
Slide 148 text
Visibility & Ripple
Slide 149
Slide 149 text
Visibility & Ripple
Slide 150
Slide 150 text
What’s next
• Android Studio 2.4
• default RTL support in ConstraintLayout editor
• Component Tree
• Slice
• ConstraintLayout 1.1
• Barriers
• Percent dimension
• Groups
Slide 151
Slide 151 text
Component Tree
Slide 152
Slide 152 text
Slice Editor
Slide 153
Slide 153 text
Slice Editor
Slide 154
Slide 154 text
Slice Editor
Slide 155
Slide 155 text
Slice Editor
Slide 156
Slide 156 text
Barriers
• “min” and “max” for constraints
• implemented as a virtual helper
Slide 157
Slide 157 text
Barriers
• “min” and “max” for constraints
• implemented as a virtual helper
Slide 158
Slide 158 text
Groups
• Apply operations on a group of widget
• opacity
• translate
• elevation
• visibility
Slide 159
Slide 159 text
Match Constraints & Percent
• Define a dimension as a percent of the parent
Slide 160
Slide 160 text
Fin
Slide 161
Slide 161 text
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