Droidcon London 2016: A New View, Layout Editor + ConstraintLayout

Huyen's talk from Droidcon London 2016, where she discusses the new ConstraintLayout and its complementary UI Builder in the Layout Editor. She gives an overview of the various ways of creating constraints and the tools available in the UI Builder for full utilizing the ConstraintLayout.

Transcript

1. 1 A NEW VIEW LAYOUT EDITOR + CONSTRAINTLAYOUT HUYEN TUE DAO @QUEENCODEMONKEY
2. PREVIOUSLY ON GOOGLE I/O…
3. ANDROID DEVELOPERS BACKSTAGE EPISODE 50: CONSTRAINT LAYOUT
4. CONSTRAINTLAYOUT 4 LAYOUT EDITOR REVAMPED. GOAL: NATURAL WAY OF BUILDING UI. MORE EXPRESSIVE, MORE PERFORMANT LAYOUT FLATTEN HIERARCHIES COMPLEXITY ∝ IMPORTANCE OF UI BUILDER EXTENSIBLE
5. LAYOUT EDITOR + CONSTRAINTLAYOUT 5 FASTER TO CREATE CONSTRAINTS. TOOLS. ERROR CHECKING. VISUALIZE POSITION AND CONNECTIONS. UX FOR DEVELOPERS. MOTION → UNDERSTANDING.
6. LET’S LOOK AT THE LAYOUT EDITOR…
10. CONSTRAINTLAYOUT 10 UNBUNDLED. SEPARATE DEPENDENCY. 10 RELEASES SINCE I/O SUPPORTED ON API 9+ BETA 1 RELEASED OCTOBER 20
11. CONSTRAINT SYSTEM CONSTRAINTS EQUATIONS SOLVER
12. CONSTRAINT SYSTEM CONSTRAINTS EQUATIONS SOLVER POSITION FIXED WRAP CONTENT ANY SIZE/MATCH CONSTRAINT RATIO EDGE CENTER BASELINE DIMENSION HELPERS GUIDELINE CONSTRAINTSET
13. CONSTRAINT SYSTEM CONSTRAINTS EQUATIONS SOLVER LINEAR SYSTEM OF EQUATIONS
14. CONSTRAINT SYSTEM CONSTRAINTS EQUATIONS SOLVER CASSOWARY LINEAR ARITHMETIC CONSTRAINT SOLVING ALGORITHM VIEW BOUNDS
15. CONSTRAINTLAYOUT, INSIDE AND OUT: PART 2 DAVE SMITH
16. LET’S MAKE SOME CONSTRAINTS…
17. POSITION CONSTRAINT NOTES EDGE CONSTRAINTS CONSIST OF SOURCE + TARGET. BIAS OF A CENTER CONSTRAINT → DISTRIBUTION OF (AVAILABLE SPACE — MARGINS) EDGE SOURCE + TARGET MUST BE ON THE SAME AXIS. OPPOSITE EDGE CONSTRAINTS → CENTER CONSTRAINT BASELINE CONSTRAINT → ANOTHER BASELINE
19. POSITION CONSTRAINT NOTES CONSTRAINTS CONSIST OF SOURCE + TARGET. BIAS OF A CENTER CONSTRAINT → DISTRIBUTION OF (AVAILABLE SPACE — MARGINS) EDGE SOURCE + TARGET MUST BE ON THE SAME AXIS. OPPOSITE EDGE CONSTRAINTS → CENTER CONSTRAINT BASELINE CONSTRAINT → ANOTHER BASELINE
21. POSITION CONSTRAINT NOTES CONSTRAINTS CONSIST OF SOURCE + TARGET. BIAS OF A CENTER CONSTRAINT → DISTRIBUTION OF (AVAILABLE SPACE — MARGINS) EDGE SOURCE + TARGET MUST BE ON THE SAME AXIS. OPPOSITE EDGE CONSTRAINTS → CENTER CONSTRAINT BASELINE CONSTRAINT → ANOTHER BASELINE
24. POSITION CONSTRAINT NOTES CONSTRAINTS CONSIST OF SOURCE + TARGET. BIAS OF A CENTER CONSTRAINT → DISTRIBUTION OF (AVAILABLE SPACE — MARGINS) EDGE SOURCE + TARGET MUST BE ON THE SAME AXIS. OPPOSITE EDGE CONSTRAINTS → CENTER CONSTRAINT BASELINE CONSTRAINT → ANOTHER BASELINE
26. DIMENSION CONSTRAINT NOTES FAMILIAR: FIXED. WRAP CONTENT. ANY SIZE (MATCH_CONSTRAINT/0DP) → ALL AVAILABLE SPACE TO SATISFY CONSTRAINT NO MATCH PARENT CAUGHT BY ERROR CHECKING RATIO → ONE DIMENSION DEFINED AS RATIO OF OTHER, W:H
31. GUIDELINE NOTES VIEW SUBCLASS STRICTLY FOR LAYOUT FIXED FROM START. FIXED FROM END. PERCENTAGE. ACT AS A TARGET FOR CONSTRAINTS SIZE OF 0 + VISIBILITY GONE
33. WHAT HAPPENS WHEN VIEWS ARE GONE? GONE VIEWS STILL INCLUDED IN LAYOUT DIMENSIONS ARE 0 → BECOMES A POINT CONSTRAINTS TO OTHER WIDGETS RESPECTED. MARGINS → 0. CAN HAVE ALTERNATIVE MARGIN WHEN TARGET OF A CONSTRAINT IS GONE.
37. CHAINS. CHAINS. CHAINS. PROVIDE GROUP BEHAVIOR WITHOUT SUB LAYOUT LINEAR. HORIZONTAL OR VERTICAL. DEFINED BY SERIES OF BIDIRECTIONAL CONSTRAINTS EACH CHAIN HAS HEAD. LEFTMOST/TOPMOST.
38. CHAINS. CHAINS. CHAINS. FROM CONSTRAINTLAYOUT DOCUMENTATION
41. 3 WAYS TO CREATE CONSTRAINTS MANUALLY IN BLUEPRINT/DESIGN VIEW AUTOCONNECT SELECTED WIDGET TO OTHERS INFERENCE → CONSTRAINTS AMONG ALL VIEWS
44. ALRIGHT. PERFORMANCE. MAIN BENEFIT COMES FROM FLATTENING HIERARCHIES COMPARISONS TO THAT OTHER LAYOUT DEPENDENT ON DEVICE/RUNTIME. WIP. DOUBLE MEASURE/LAYOUT PASSES? YES FOR MATCH CONSTRAINT. WIP. SERIOUSLY THOUGH IT’S ALL ABOUT FLAT AND FLEXIBLE
45. WHO TO FOLLOW TEAM CONSTRAINTLAYOUT NICOLAS ROARD @CAMAELON ROMAIN GUY @ROMAINGUY JOHN HOFORD @JOHNHOFORD STYLING ANDROID MARK ALLISON @MARKIALLISON GROKKING ANDROID WOLFRAM RITTMEYER @RITTMEYERW WIRES ARE OBSOLETE DAVE SMITH @DEVUNWIRED
46. 46 THANK YOU! SPEAKERDECK.COM/QUEENCODEMONKEY YOUTUBE.COM/ANDROIDDIALOGS RANDOMLYTYPING.COM HUYEN TUE DAO @QUEENCODEMONKEY
47. REFERENCES 47 CONSTRAINT LAYOUT APIS DOCUMENTATION https://developer.android.com/reference/android/support/constraint/package-summary.html BUILD A RESPONSIVE UI WITH CONSTRAINTLAYOUT developer.android.com/training/constraint-layout/index.html ANDROID DEVELOPERS BACKSTAGE: EPISODE 50: CONSTRAINT LAYOUT androidbackstage.blogspot.com/2016/06/episode-50-constraint-layout.html USING CONSTRAINTLAYOUT TO DESIGN YOUR VIEWS | CODE LABS codelabs.developers.google.com/codelabs/constraint-layout/index.html ANDROID LAYOUTS: A NEW WORLD | GOOGLE I/O 2016 https://youtu.be/sO9aX87hq9c CONSTRAINTLAYOUT https://speakerdeck.com/writtmeyer/constraintlayout-1
48. REFERENCES 48 CONSTRAINTLAYOUT – PART 1 blog.stylingandroid.com/constraintlayout-part-1/ CONSTRAINTLAYOUT, INSIDE AND OUT: PART 1 http://wiresareobsolete.com/2016/07/constraintlayout-part-1/ SOME THOUGHTS ON ANDROID’S NEW CONSTRAINTLAYOUT AND ANDROID STUDIO’S NEW DESIGN EDITOR http://www.grokkingandroid.com/thoughts-on-constraintlayout-and-design-editor/ BUILD A UI WITH LAYOUT EDITOR developer.android.com/studio/write/layout-editor.html WHAT'S NEW IN ANDROID DEVELOPMENT TOOLS | GOOGLE I/O 2016 https://youtu.be/csaXml4xtN8 THE EXPERTS' GUIDE TO ANDROID DEVELOPMENT TOOLS | GOOGLE I/O 2016 https://youtu.be/hHnTIMjd1Y8