Optimizing UIs using Constraint Layout

Slide 1

Slide 1 text

Optimizing UIs using Constraint Layout Google I/O Extended Yangon 8th July 2018 1 Photo by Dmitri Popov on Unsplash

Slide 2

Slide 2 text

Lin Min Phyo Android Developer @ nexlabs 2

Slide 3

Slide 3 text

Constraint Layout ViewGroup which children views have abilities to add constraints 3

Slide 4

Slide 4 text

What are constraints ? ● Connections between views ● Connections between view and parent viewgroup ● Helpers that allowed connections 4

Slide 5

Slide 5 text

Constraints in Constraint layout 5

Slide 6

Slide 6 text

Constraint Layout = All about of connections between views 6

Slide 7

Slide 7 text

Why Constraint layout? ● Easier dimensions and positioning ● Minimize nested view groups ● Groups, guidelines, placeholders ● Auto transitions using Constraint Sets 7

Slide 8

Slide 8 text

Constraint Layout Positioning 8

Slide 9

Slide 9 text

9 Constraint Layout Positioning Attributes

Slide 10

Slide 10 text

10 Constraint Layout Positioning Attributes buttonB’s side (top,bottom,start,end) buttonA’s side (top,bottom,start,end)

Slide 11

Slide 11 text

11 Constraint Layout Positioning Attributes A B

Slide 12

Slide 12 text

12 Constraint Layout Positioning Attributes A B

Slide 13

Slide 13 text

13 Constraint Layout Positioning Attributes B

Slide 14

Slide 14 text

14 Constraint Layout Positioning Attributes

Slide 15

Slide 15 text

Constraint Layout Positioning Attributes layout_constraintLeft_toLeftOf layout_constraintBottom_toTopOf layout_constraintLeft_toRightOf layout_constraintBottom_toBottomOf layout_constraintRight_toLeftOf layout_constraintStart_toEndOf layout_constraintRight_toRightOf layout_constraintStart_toStartOf layout_constraintTop_toTopOf layout_constraintEnd_toStartOf layout_constraintTop_toBottomOf layout_constraintEnd_toEndOf layout_constraintBaseline_toBaselineOf 15

Slide 16

Slide 16 text

16 Things to note ● One vertical constraint and one horizontal constraint should be added ● If not, Top left is default ● Only 1 constraint for each side ● No match parent (use 0 dp instead) Code sample Constraint Layout Positioning Attributes

Slide 17

Slide 17 text

Constraint Layout Bias Determining which side to bias 17

Slide 18

Slide 18 text

Constraint Layout Bias Attributes 18 B 30%

Slide 19

Slide 19 text

Constraint Layout Bias Attributes 19

Slide 20

Slide 20 text

20 ● Vertical Bias ● Horizontal bias ● Mixing vertical and horizontal Code Sample Constraint Layout Bias Attributes

Slide 21

Slide 21 text

Constraint Layout Circular Positioning Position with angle 21

Slide 22

Slide 22 text

22 Constraint Layout Circular Positioning

Slide 23

Slide 23 text

Grouping views using id Constraint Layout Group 23

Slide 24

Slide 24 text

Constraint Layout Group 24

Slide 25

Slide 25 text

Constraint Layout Circular Positioning + Group 25

Slide 26

Slide 26 text

Constraint Layout Ratio Determining ratio of views 26

Slide 27

Slide 27 text

Constraint Layout Ratio Attributes 27

Slide 28

Slide 28 text

28 Constraint Layout Ratio Attributes

Slide 29

Slide 29 text

29 Code sample Constraint Layout Ratio Attributes

Slide 30

Slide 30 text

Constraint Layout Guidelines Virtual, invisible helper views 30

Slide 31

Slide 31 text

Constraint Layout Guideline 31 B A

Slide 32

Slide 32 text

Constraint Layout Guideline 32 100dp

Slide 33

Slide 33 text

33 Constraint Layout Guideline 100dp

Slide 34

Slide 34 text

34 Constraint Layout Guideline 50% 50%

Slide 35

Slide 35 text

35 Orientation ● Vertical ● Horizontal Use cases ● Keylines ● Reduce multiple margin on views Code Sample Constraint Layout Guideline

Slide 36

Slide 36 text

Constraint Layout Chain Linking multiple views in horizontal or vertical 36

Slide 37

Slide 37 text

37 CHAIN_SPREAD Constraint Layout Chain

Slide 38

Slide 38 text

38 CHAIN_SPREAD_INSIDE Constraint Layout Chain

Slide 39

Slide 39 text

39 CHAIN_PACKED Constraint Layout Chain

Slide 40

Slide 40 text

40 CHAIN_PACKED + Biasing CHAIN_SPREAD + 0dp (match parent) Constraint Layout Chain

Slide 41

Slide 41 text

41 Orientation ● Vertical ● Horizontal Code Sample Constraint Layout Chain

Slide 42

Slide 42 text

Placeholders 42 Placeholder view which is ready for other views to place

Slide 43

Slide 43 text

43 Constraint Layout Placeholder PLACEHOLDER ● Empty View ( Placeholder ) with constraints ● Any view can be swapped into it dynamically or directly in XML ● TransitionManager helps auto transitions

Slide 44

Slide 44 text

44 Two use cases ● Transition by placing dynamically ● Template of multi screen support Constraint Layout Placeholder

Slide 45

Slide 45 text

45 Constraint Layout Placeholder

Slide 46

Slide 46 text

46 Constraint Layout Placeholder

Slide 47

Slide 47 text

47 Constraint Layout Placeholder

Slide 48

Slide 48 text

Barriers 48 Barrier between views

Slide 49

Slide 49 text

49 Constraint Layout Barrier Want to show a view at the end of two buttons

Slide 50

Slide 50 text

50 Constraint Layout Placeholder

Slide 51

Slide 51 text

51 Code Sample Constraint Layout Placeholder

Slide 52

Slide 52 text

Constraint Sets 52 Animate between two layouts

Slide 53

Slide 53 text

Constraint Layout Constraint Set 53 1. Create two layouts 2. Clone into two ConstraintSets 3. Apply To ConstraintLayout

Slide 54

Slide 54 text

54 Constraint Layout Constraint Set

Slide 55

Slide 55 text

55 Things to note ● Should be inside a single constraint layout ● All children must have id ● Does not animate text size ● Views invisible? Must hide some view on initial layout Constraint Layout Constraint Set

Slide 56

Slide 56 text

Constraint Layout Do’s ● Try Layout Editor ● Groups for visibility control ● Play with Chains instead of weights ● Using Guidelines as keylines ● Basic transitions with Constraint sets 56

Slide 57

Slide 57 text

Constraint Layout Don’ts ● Do not overuse ● Reduce constraints (esp. in Recyclerview) ● Think twice before using barriers in Recyclerview ● Missing IDs ● Nested constraint layout 57

Slide 58

Slide 58 text

Constraint Layout 2.0 58 What’s new

Slide 59

Slide 59 text

59 Helper Views like Guidelines ● Linear ● Flow ( Flexbox style ) Constraint Layout 2.0 Constraint Helpers

Slide 60

Slide 60 text

Constraint Layout 2,0 Layers 60 ● Hide, show, lock elements in editor ● Support transforms

Slide 61

Slide 61 text

Constraint Layout 2.0 Layout Management 61 ● Improved layout editor ● Constraint sets via xml ( Constraint states ) ● Motion layout + Motion Scene ( Constraint states + Motion Events + Key Frames )

Slide 62

Slide 62 text

Constraint Layout 2.0 Motion Layout 62

Slide 63

Slide 63 text

Resources ● https://constraintlayout.com/ ● https://developer.android.com/reference/android/support/ constraint/ConstraintLayout ● https://github.com/hashlin/constraint-layout-example ● https://www.youtube.com/watch?v=ytZteMo4ETk ● https://medium.com/google-developers/introduction-to-m otionlayout-part-i-29208674b10d 63

Slide 64

Slide 64 text

Thanks ! Time to start using Constraint Layout 64