BABBQ16 ConstraintLayout presentation

Slide 1

Slide 1 text

ConstraintLayout Nicolas Roard Google @camaelon +NicolasRoard John Hoford Google @johnhoford +JohnHoford

Slide 2

Slide 2 text

ConstraintLayout

Slide 3

Slide 3 text

Why?

Slide 4

Slide 4 text

Layout Editor

Slide 5

Slide 5 text

Why creating a new layout?

Slide 6

Slide 6 text

Why creating a new layout? Visual Editor

Slide 7

Slide 7 text

Why creating a new layout? Visual Editor Flexible

Slide 8

Slide 8 text

Why creating a new layout? Visual Editor Flexible Flat layout

Slide 9

Slide 9 text

Why creating a new layout? Visual Editor Flexible Flat layout Unbundled

Slide 10

Slide 10 text

Why creating a new layout? Visual Editor Flexible Flat layout Unbundled Available from API level 9 (99.9% devices)

Slide 11

Slide 11 text

Basics

Slide 12

Slide 12 text

Edge Constraints Widget

Slide 13

Slide 13 text

Edge Constraints Widget

Slide 14

Slide 14 text

Edge Constraints Widget

Slide 15

Slide 15 text

Edge Constraints Widget

Slide 16

Slide 16 text

Edge Constraints Widget Margin

Slide 17

Slide 17 text

Widget Center Constraints

Slide 18

Slide 18 text

Widget Center Constraints

Slide 19

Slide 19 text

Widget Center Constraints

Slide 20

Slide 20 text

RelativeLayout

Slide 21

Slide 21 text

Wrap Content        

Slide 22

Slide 22 text

Wrap Content        

Slide 23

Slide 23 text

Wrap Content        

Slide 24

Slide 24 text

Wrap Content        

Slide 25

Slide 25 text

Nested Layouts

Slide 26

Slide 26 text

Nested Layouts

Slide 27

Slide 27 text

Nested Layouts Horizontal LinearLayout

Slide 28

Slide 28 text

Nested Layouts Vertical LinearLayout

Slide 29

Slide 29 text

Nested Layouts TV TV TV TV TV TV TextViews

Slide 30

Slide 30 text

Nested Layouts

Slide 31

Slide 31 text

Nested Layouts change height

Slide 32

Slide 32 text

Nested Layouts

Slide 33

Slide 33 text

Nested Layouts measures

Slide 34

Slide 34 text

Nested Layouts measures

Slide 35

Slide 35 text

Nested Layouts measures

Slide 36

Slide 36 text

Nested Layouts measures

Slide 37

Slide 37 text

Nested Layouts measures

Slide 38

Slide 38 text

Nested Layouts measures

Slide 39

Slide 39 text

Nested Layouts measures

Slide 40

Slide 40 text

Nested Layouts measures

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

Nested Layouts measures

Slide 45

Slide 45 text

Nested Layouts measures

Slide 46

Slide 46 text

Nested Layouts measures

Slide 47

Slide 47 text

I have concerns

Slide 48

Slide 48 text

Performance

Slide 49

Slide 49 text

Performance Similar to RelativeLayout on old devices (dalvik…)

Slide 50

Slide 50 text

Performance Similar to RelativeLayout on old devices (dalvik…) Currently a bit slower with art, but not meaningful

Slide 51

Slide 51 text

Performance Similar to RelativeLayout on old devices (dalvik…) Currently a bit slower with art, but not meaningful Flattening gains

Slide 52

Slide 52 text

Performance Similar to RelativeLayout on old devices (dalvik…) Currently a bit slower with art, but not meaningful Flattening gains Measure your app!

Slide 53

Slide 53 text

Performance Similar to RelativeLayout on old devices (dalvik…) Currently a bit slower with art, but not meaningful Flattening gains Measure your app! Send us examples :)

Slide 54

Slide 54 text

Size / Memory

Slide 55

Slide 55 text

Size / Memory Current library ~130Kb

Slide 56

Slide 56 text

Size / Memory Current library ~130Kb Low memory usage

Slide 57

Slide 57 text

Measures Wrap Content Match Constraints

Slide 58

Slide 58 text

Going forward

Slide 59

Slide 59 text

Going forward 10 releases since Google IO

Slide 60

Slide 60 text

Going forward 10 releases since Google IO Default in Android Studio 2.3

Slide 61

Slide 61 text

Going forward 10 releases since Google IO Default in Android Studio 2.3 Open Source

Slide 62

Slide 62 text

Going forward 10 releases since Google IO Default in Android Studio 2.3 Open Source Support Existing Layouts

Slide 63

Slide 63 text

Going forward 10 releases since Google IO Default in Android Studio 2.3 Open Source Support Existing Layouts XML vs Visual Editor

Slide 64

Slide 64 text

Going forward 10 releases since Google IO Default in Android Studio 2.3 Open Source Support Existing Layouts XML vs Visual Editor

Slide 65

Slide 65 text

Constraints Model

Slide 66

Slide 66 text

Edge Constraints

Slide 67

Slide 67 text

Edge Constraints Widget

Slide 68

Slide 68 text

Edge Constraints Widget

Slide 69

Slide 69 text

Edge Constraints Widget

Slide 70

Slide 70 text

Edge Constraints Widget

Slide 71

Slide 71 text

Edge Constraints app:layout_constraintLeft_toLeftOf="parent" Widget

Slide 72

Slide 72 text

Edge Constraints Widget

Slide 73

Slide 73 text

Edge Constraints Widget Left / Start

Slide 74

Slide 74 text

Edge Constraints Widget Left / Start Right / End

Slide 75

Slide 75 text

Edge Constraints Widget Left / Start Right / End Top

Slide 76

Slide 76 text

Edge Constraints Widget Left / Start Right / End Top Bottom

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

layout_constraint<…>_to<…>

Slide 79

Slide 79 text

parent @id

Slide 80

Slide 80 text

Center Constraints

Slide 81

Slide 81 text

Widget Center Constraints

Slide 82

Slide 82 text

Widget Center Constraints

Slide 83

Slide 83 text

Widget Center Constraints

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

Center Constraints + Bias Widget

Slide 86

Slide 86 text

Center Constraints + Bias Widget 0.5

Slide 87

Slide 87 text

Center Constraints + Bias Widget 0.2

Slide 88

Slide 88 text

Center Constraints + Bias Widget 0.6

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

Dimension Constraints

Slide 91

Slide 91 text

Dimension Constraints

Slide 92

Slide 92 text

Dimension Constraints fixed dimension

Slide 93

Slide 93 text

Dimension Constraints fixed dimension wrap_content

Slide 94

Slide 94 text

Dimension Constraints fixed dimension wrap_content match_parent

Slide 95

Slide 95 text

Dimension Constraints fixed dimension wrap_content

Slide 96

Slide 96 text

Dimension Constraints fixed dimension wrap_content match_constraint

Slide 97

Slide 97 text

Dimension Constraints fixed dimension wrap_content match_constraint ratio

Slide 98

Slide 98 text

Dimension Constraints fixed dimension wrap_content match_constraint ratio min width/height (on CL)

Slide 99

Slide 99 text

Dimension Constraints fixed dimension wrap_content match_constraint ratio min width/height (on CL)

Slide 100

Slide 100 text

match_constraint Widget

Slide 101

Slide 101 text

match_constraint Widget Widget

Slide 102

Slide 102 text

Ratio

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

Gone

Slide 105

Slide 105 text

View: Gone A B

Slide 106

Slide 106 text

View: Gone A B View marked as Gone

Slide 107

Slide 107 text

View: Gone B

Slide 108

Slide 108 text

View: Gone Margin B

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

Chains

Slide 112

Slide 112 text

Chains A B

Slide 113

Slide 113 text

Chains A B bi-directional constraints

Slide 114

Slide 114 text

Chains A B Chain bi-directional constraints

Slide 115

Slide 115 text

    Chains

Slide 116

Slide 116 text

Chains A B C

Slide 117

Slide 117 text

Chains A B C Head

Slide 118

Slide 118 text

Chains A B C Head Contains attributes affecting the chain

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

Guidelines

Slide 123

Slide 123 text

Guideline

Slide 124

Slide 124 text

How Does It Work

Slide 125

Slide 125 text

How Does It Work Linear Equations Solver

Slide 126

Slide 126 text

How Does It Work Constraints Model Linear Equations Solver

Slide 127

Slide 127 text

How Does It Work Constraints Model Layout Editor Linear Equations Solver

Slide 128

Slide 128 text

How Does It Work Constraints Model Inference Layout Editor Linear Equations Solver

Slide 129

Slide 129 text

How Does It Work Linear Equations Solver Constraints Model Direct Resolution Inference Layout Editor Linear Equations Solver

Slide 130

Slide 130 text

Views vs Layout

Slide 131

Slide 131 text

Views vs Layouts Decoupling Views from Layouts Animations Performance

Slide 132

Slide 132 text

Demo

Slide 133

Slide 133 text

Demo Presentation of the UI designer

Slide 134

Slide 134 text

Demo Presentation of the UI designer Manual constraints

Slide 135

Slide 135 text

Demo Presentation of the UI designer Manual constraints Auto connect

Slide 136

Slide 136 text

Demo Presentation of the UI designer Manual constraints Auto connect Inference

Slide 137

Slide 137 text

Demo Presentation of the UI designer Manual constraints Auto connect Inference Alignment tools + constraints creation

Slide 138

Slide 138 text

Demo Presentation of the UI designer Manual constraints Auto connect Inference Alignment tools + constraints creation Chains

Slide 139

Slide 139 text

Demo Presentation of the UI designer Manual constraints Auto connect Inference Alignment tools + constraints creation Chains Ratio

Slide 140

Slide 140 text

Demo Presentation of the UI designer Manual constraints Auto connect Inference Alignment tools + constraints creation Chains Ratio ConstraintSet + Animations

Slide 141

Slide 141 text

Next steps

Slide 142

Slide 142 text

Next steps

Slide 143

Slide 143 text

Next steps Virtual Viewgroups

Slide 144

Slide 144 text

Next steps Virtual Viewgroups Conversion Tools

Slide 145

Slide 145 text

Next steps Virtual Viewgroups Conversion Tools Helper objects

Slide 146

Slide 146 text

Next steps Virtual Viewgroups Conversion Tools Helper objects Animation

Slide 147

Slide 147 text

Next steps Virtual Viewgroups Conversion Tools Helper objects Animation Custom Variables

Slide 148

Slide 148 text

Connect Nicolas Roard @camaelon +NicolasRoard John Hoford @johnhoford +JohnHoford Documentation https://developer.android.com/reference/ android/support/constraint/package- summary.html