ConstraintLayout 2.0 - Speaker Deck

Slide 1

Slide 1 text

ConstraintLayout 2.0

Slide 2

Slide 2 text

ConstraintLayout 1.x

Slide 3

Slide 3 text

ConstraintLayout 1.0 ● Flat layout hierarchies were overarching aim ● Allows you to design views by putting them into relation ● match_constraint instead of match_parent ● Support for aspect ratio constraints ● Guidelines to helps you design screens @RittmeyerW

Slide 4

Slide 4 text

ConstraintLayout 1.1 ● Two helpers: – Barriers – Groups ● Chains for grouping views ● Introduction of ConstraintSet ● Addition of percentage for width / height @RittmeyerW

Slide 5

Slide 5 text

CL 1.x demo

Slide 6

Slide 6 text

Google IO 2018 ● Many announcements ● Currently available: – Alpha version of CL 2.0 available – Some layout editor changes in AS https://www.youtube.com/watch?v=ytZteMo4ETk https://www.youtube.com/watch?v=WxAZk7A7OkM @RittmeyerW

Slide 7

Slide 7 text

API

Slide 8

Slide 8 text

Alpha version ● Build.xml: ● For now ties you to support lib 27.0.2 implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha1' @RittmeyerW

Slide 9

Slide 9 text

ConstraintHelpers to manipulate views

Slide 10

Slide 10 text

ConstraintHelpers to manipulate views ● Get access to the list of views the manage ● They are no ViewGroups – Views are referenced but not proper children ● Help you to manipulate multiple views easily – e.g. animations ● The ConstraintHelper class itself is not new – Was used in Barrier and Group before @RittmeyerW

Slide 11

Slide 11 text

ConstraintHelper subclasses ● Layer ● Linear ● Flow ● CircularReveal @RittmeyerW

Slide 12

Slide 12 text

Use Layer to animate all children @RittmeyerW

Slide 13

Slide 13 text

Use Layer to animate all children @RittmeyerW

Slide 14

Slide 14 text

Decorators ● Lava ● Bottom Panel @RittmeyerW

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Fluent API for ConstraintSets ● Idea is to make handling of ConstraintSets easier – Easily create ConstraintSet – Easily manipulate all attributes @RittmeyerW

Slide 17

Slide 17 text

Fluent API for ConstraintSets @RittmeyerW

Slide 18

Slide 18 text

Switch easily between diferent states ● Define states with ConstraintLayoutStates ● Use subelement State to refer to layouts ● In your code set the state to use @RittmeyerW

Slide 19

Slide 19 text

State handling

Slide 20

Slide 20 text

State handling

Slide 21

Slide 21 text

MotionLayout

Slide 22

Slide 22 text

Other animation types still relevant ● Property animations ● Physics based animations ● Animated Vector Drawables ● CoordinatorLayout ● Transitions @RittmeyerW

Slide 23

Slide 23 text

MotionLayout is about transitions ● Define diferent states ● Use handlers to transitions between those states ● Use key frames to help guide the animation @RittmeyerW

Slide 24

Slide 24 text

Old way was tedious @RittmeyerW

Slide 25

Slide 25 text

No matter which style you used @RittmeyerW

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Use MotionLayout to define elements ● MotionLayout replaces ConstraintLayout ● MotionLayout points to scene ● All layout children must be present @RittmeyerW

Slide 28

Slide 28 text

Use MotionLayout to define elements

Slide 29

Slide 29 text

Use MotionScene for ConstraintSets ● MotionScene contains ConstraintSets ● Only add elements you want to animate @RittmeyerW

Slide 30

Slide 30 text

Use MotionScene for ConstraintSets

Slide 31

Slide 31 text

Specify the transition ● Add a Transition element to your MotionScene ● If necessary add a touch handler – OnClick – OnSwipe @RittmeyerW

Slide 32

Slide 32 text

Specify the transition @RittmeyerW

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Specify the trigger for the transition ● If necessary add a touch handler – OnClick – OnSwipe @RittmeyerW

Slide 35

Slide 35 text

Specify the trigger for the transition @RittmeyerW

Slide 36

Slide 36 text

Animate custom attributes ● Animate not only layout attributes but also others ● Types: – Boolean – Color – Dimension – Int / Float – String @RittmeyerW

Slide 37

Slide 37 text

Animate custom attributes @RittmeyerW

Slide 38

Slide 38 text

Add keyframes for special efects ● If you want to move your layout along specified paths ● You can specify when the frame should be applied @RittmeyerW

Slide 39

Slide 39 text

Add keyframes for special efects @RittmeyerW

Slide 40

Slide 40 text

Not everything is possible (yet?) ● Currently only one transition ● Touch handler reacts too generous ● Image handling requires special subview ● „left“ and „right“ instead of „start“ and „end“ ● No drawables for custom attributes ● Auto complete in XML not working (properly?) ● Errors in XML are ignored @RittmeyerW

Slide 41

Slide 41 text

Android Studio

Slide 42

Slide 42 text

Nice helpers ● Convert View (for Views and ViewGroups) ● Navigation to included layout @RittmeyerW

Slide 43

Slide 43 text

Use design time attributes for previews @RittmeyerW

Slide 44

Slide 44 text

Create nicer list previews ● List item layout (you were already able to do that) ● No of items ● Sample data – For images and text – Define your own in xml or as json – Use predefined ones @RittmeyerW

Slide 45

Slide 45 text

Create nice previews with custom data @RittmeyerW

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Sample

Slide 49

Slide 49 text

Links https://medium.com/google-developers/introduction-to-motionlayout-part-iii- 47cd64d51a5 http://androidkt.com/new-features-in-constraintlayout-2-0/ https://novemberfive.co/blog/what-to-expect-from-constraint-layout-2 https://github.com/googlesamples/android-ConstraintLayoutExamples @RittmeyerW

Slide 50

Slide 50 text

No content