ConstraintLayout presentation

Slide 1

Slide 1 text

ConstraintLayout Nicolas Roard Google @camaelon +NicolasRoard

Slide 2

Slide 2 text

ConstraintLayout

Slide 3

Slide 3 text

Why?

Slide 4

Slide 4 text

Visual Editor

Slide 5

Slide 5 text

Why did we create a new layout?

Slide 6

Slide 6 text

Why did we create a new layout? Visual Editor

Slide 7

Slide 7 text

Why did we create a new layout? Visual Editor Flexible

Slide 8

Slide 8 text

Why did we create a new layout? Visual Editor Flexible Flat hierarchy

Slide 9

Slide 9 text

Why did we create a new layout? Visual Editor Flexible Flat hierarchy Unbundled

Slide 10

Slide 10 text

Why did we create a new layout? Visual Editor Flexible Flat hierarchy Unbundled Available starting API 9 (99.9% of devices)

Slide 11

Slide 11 text

RelativeLayout

Slide 12

Slide 12 text

Wrap Content        

Slide 13

Slide 13 text

Wrap Content        

Slide 14

Slide 14 text

Wrap Content        

Slide 15

Slide 15 text

Wrap Content        

Slide 16

Slide 16 text

Wrap Content        

Slide 17

Slide 17 text

Nested Layouts

Slide 18

Slide 18 text

Nested Layouts

Slide 19

Slide 19 text

Nested Layouts Horizontal LinearLayout

Slide 20

Slide 20 text

Nested Layouts Vertical LinearLayout

Slide 21

Slide 21 text

Nested Layouts TV TV TV TV TV TV TextViews

Slide 22

Slide 22 text

Nested Layouts

Slide 23

Slide 23 text

height changes Nested Layouts

Slide 24

Slide 24 text

Nested Layouts

Slide 25

Slide 25 text

measures Nested Layouts

Slide 26

Slide 26 text

measures Nested Layouts

Slide 27

Slide 27 text

measures Nested Layouts

Slide 28

Slide 28 text

measures Nested Layouts

Slide 29

Slide 29 text

measures Nested Layouts

Slide 30

Slide 30 text

measures Nested Layouts

Slide 31

Slide 31 text

measures Nested Layouts

Slide 32

Slide 32 text

measures Nested Layouts

Slide 33

Slide 33 text

measures Nested Layouts

Slide 34

Slide 34 text

measures Nested Layouts

Slide 35

Slide 35 text

measures Nested Layouts

Slide 36

Slide 36 text

measures Nested Layouts

Slide 37

Slide 37 text

measures Nested Layouts

Slide 38

Slide 38 text

measures Nested Layouts

Slide 39

Slide 39 text

height changes Nested Layouts

Slide 40

Slide 40 text

Nested Layouts

Slide 41

Slide 41 text

Nested Layouts measures

Slide 42

Slide 42 text

Nested Layouts measures

Slide 43

Slide 43 text

Nested Layouts measures

Slide 44

Slide 44 text

I have concerns

Slide 45

Slide 45 text

Performance

Slide 46

Slide 46 text

Performance For now, similar to RelativeLayout

Slide 47

Slide 47 text

Performance For now, similar to RelativeLayout … but gains due to flat hierarchies

Slide 48

Slide 48 text

Performance For now, similar to RelativeLayout … but gains due to flat hierarchies On a recent device, great performances

Slide 49

Slide 49 text

Performance For now, similar to RelativeLayout … but gains due to flat hierarchies On a recent device, great performances Measure your layouts!

Slide 50

Slide 50 text

Performance For now, similar to RelativeLayout … but gains due to flat hierarchies On a recent device, great performances Measure your layouts! Send us examples :)

Slide 51

Slide 51 text

Impact of measures

Slide 52

Slide 52 text

Impact of measures Wrap Content or fixed size

Slide 53

Slide 53 text

Impact of measures Wrap Content or fixed size single measure pass

Slide 54

Slide 54 text

Impact of measures Wrap Content or fixed size Match Constraints single measure pass

Slide 55

Slide 55 text

Impact of measures Wrap Content or fixed size Match Constraints single measure pass two measure passes

Slide 56

Slide 56 text

Size & Memory

Slide 57

Slide 57 text

Size & Memory The unbundled library is ~130 ko

Slide 58

Slide 58 text

Size & Memory The unbundled library is ~130 ko Low memory occupation (sparse matrix)

Slide 59

Slide 59 text

How does it work?

Slide 60

Slide 60 text

How does it work? Linear Equation Solver

Slide 61

Slide 61 text

How does it work? Constraints Model Linear Equation Solver

Slide 62

Slide 62 text

How does it work? Constraints Model Linear Equation Solver Visual Editor

Slide 63

Slide 63 text

How does it work? Constraints Model Inference Engine Linear Equation Solver Visual Editor

Slide 64

Slide 64 text

How does it work? Linear Equation Solver Constraints Model Direct Resolution Inference Engine Linear Equation Solver Visual Editor

Slide 65

Slide 65 text

How far are we

Slide 66

Slide 66 text

How far are we 12 releases since Google IO’16

Slide 67

Slide 67 text

How far are we 12 releases since Google IO’16 Default Layout in Android Studio 2.3 templates

Slide 68

Slide 68 text

How far are we 12 releases since Google IO’16 Default Layout in Android Studio 2.3 templates Open Source

Slide 69

Slide 69 text

How far are we 12 releases since Google IO’16 Default Layout in Android Studio 2.3 templates Open Source Building better support for other viewgroups in the editor

Slide 70

Slide 70 text

How far are we 12 releases since Google IO’16 Default Layout in Android Studio 2.3 templates Open Source Building better support for other viewgroups in the editor XML vs Visual Editor

Slide 71

Slide 71 text

How far are we 12 releases since Google IO’16 Default Layout in Android Studio 2.3 templates Open Source Building better support for other viewgroups in the editor XML vs Visual Editor

Slide 72

Slide 72 text

Constraints Model

Slide 73

Slide 73 text

Side Constraints

Slide 74

Slide 74 text

Side Constraints Widget

Slide 75

Slide 75 text

Side Constraints Widget

Slide 76

Slide 76 text

Side Constraints Widget

Slide 77

Slide 77 text

Side Constraints Widget

Slide 78

Slide 78 text

Side Constraints app:layout_constraintLeft_toLeftOf="parent" Widget

Slide 79

Slide 79 text

Side Constraints Widget

Slide 80

Slide 80 text

Side Constraints Widget Left / Start

Slide 81

Slide 81 text

Side Constraints Widget Left / Start Right / End

Slide 82

Slide 82 text

Side Constraints Widget Left / Start Right / End Top

Slide 83

Slide 83 text

Side Constraints Widget Left / Start Right / End Top Bottom

Slide 84

Slide 84 text

Side Constraints Widget Left / Start Right / End Top Bottom Baseline

Slide 85

Slide 85 text

layout_constraint<…>_to<…>

Slide 86

Slide 86 text

parent @id

Slide 87

Slide 87 text

Center Constraints

Slide 88

Slide 88 text

Widget Center Constraints

Slide 89

Slide 89 text

Widget Center Constraints

Slide 90

Slide 90 text

Widget Center Constraints

Slide 91

Slide 91 text

Widget Center Constraints app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"

Slide 92

Slide 92 text

Center + Bias Widget

Slide 93

Slide 93 text

Center + Bias Widget 0.5

Slide 94

Slide 94 text

Center + Bias Widget 0.2

Slide 95

Slide 95 text

Center + Bias Widget 0.6

Slide 96

Slide 96 text

Center + Bias Widget 0.6 app:layout_constraintHorizontal_bias="0.6"

Slide 97

Slide 97 text

Dimension Constraints

Slide 98

Slide 98 text

Dimension Constraints

Slide 99

Slide 99 text

Dimension Constraints dimension fixe

Slide 100

Slide 100 text

Dimension Constraints dimension fixe wrap_content

Slide 101

Slide 101 text

Dimension Constraints dimension fixe wrap_content match_parent

Slide 102

Slide 102 text

Dimension Constraints dimension fixe wrap_content

Slide 103

Slide 103 text

Dimension Constraints dimension fixe wrap_content match_constraint

Slide 104

Slide 104 text

Dimension Constraints dimension fixe wrap_content match_constraint ratio

Slide 105

Slide 105 text

Dimension Constraints dimension fixe wrap_content match_constraint ratio min width/height (sur CL)

Slide 106

Slide 106 text

Dimension Constraints dimension fixe wrap_content match_constraint ratio min width/height (sur CL)

Slide 107

Slide 107 text

match_constraint Widget

Slide 108

Slide 108 text

match_constraint Widget Widget

Slide 109

Slide 109 text

Ratio Widget

Slide 110

Slide 110 text

Ratio app:layout_constraintDimensionRatio="h,1:1" Widget

Slide 111

Slide 111 text

Ratio app:layout_constraintDimensionRatio="h,1:1" Widget Widget

Slide 112

Slide 112 text

Gone

Slide 113

Slide 113 text

View: Gone A B

Slide 114

Slide 114 text

View: Gone A B View set to “Gone”

Slide 115

Slide 115 text

View: Gone B

Slide 116

Slide 116 text

View: Gone Margin B

Slide 117

Slide 117 text

View: Gone Margin B app:layout_goneMarginLeft="60dp"

Slide 118

Slide 118 text

View: Gone Margin B app:layout_goneMarginLeft="60dp"

Slide 119

Slide 119 text

Chains

Slide 120

Slide 120 text

Chains A B

Slide 121

Slide 121 text

Chains A B bi-directional constraints

Slide 122

Slide 122 text

Chains A B Chain bi-directional constraints

Slide 123

Slide 123 text

    Chains

Slide 124

Slide 124 text

Chains A B C

Slide 125

Slide 125 text

Chains A B C Head of the Chain

Slide 126

Slide 126 text

Chains A B C Head of the Chain Contains attributes impacting the chain

Slide 127

Slide 127 text

Different Chain Styles A B C Spread A B C Spread Inside A B C Weighted A B C Packed

Slide 128

Slide 128 text

Different Chain Styles A B C Spread A B C Spread Inside A B C Weighted A B C Packed + bias

Slide 129

Slide 129 text

app:layout_constraintHorizontal_chainStyle="spread" app:layout_constraintHorizontal_chainStyle="spread_inside" app:layout_constraintHorizontal_chainStyle="packed" Chains

Slide 130

Slide 130 text

Guidelines

Slide 131

Slide 131 text

Guidelines Widget

Slide 132

Slide 132 text

Guidelines Widget

Slide 133

Slide 133 text

Guidelines Widget

Slide 134

Slide 134 text

Guidelines Widget

Slide 135

Slide 135 text

Guidelines

Slide 136

Slide 136 text

Guidelines

Slide 137

Slide 137 text

Guidelines

Slide 138

Slide 138 text

Guidelines %

Slide 139

Slide 139 text

Guideline

Slide 140

Slide 140 text

ConstraintSet

Slide 141

Slide 141 text

ConstraintSet

Slide 142

Slide 142 text

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

Slide 143

Slide 143 text

ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set ConstraintSet 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 144

Slide 144 text

Slide 145

Slide 145 text

Demo

Slide 146

Slide 146 text

Next!

Slide 147

Slide 147 text

Slide 148 text

Next More flexibility with match_constraints New helper objects Virtual Viewgroups Animation Variables Conversion Tools

Slide 149

Slide 149 text

Contact Nicolas Roard @camaelon +NicolasRoard Documentation https://developer.android.com/ reference/android/support/ constraint/package-summary.html File Bugs https://code.google.com/p/android/issues/entry