Grokking the ConstraintLayout

Talk held at droidcon, Italy on April, 7th 2017

2. Why yet another layout Why yet another layout • Flat hierarchy – Simpler layouts – Faster
3. Basics Basics • Normal ViewGroup • Similar to RelativeLayout – But more flexible • Similar to Apple‘s AutoLayout • Separate library (like RecyclerView) • Backwards compatible to v9
4. Project Initialization Project Initialization compile { 'com.android.support.constraint:constraint-layout:1.0.2' } • Android Studio 2.2 or later – I recommend to use the 2.4 preview • Up to date Android Support Repository • Build.gradle:
5. What are Constraints What are Constraints • Define appearence of view with respect to – Size – Position – Visibility
6. Concepts Concepts • LayoutEditor – Blueprint and preview view – Create constraints – Define properties • XML still usable – Good for pull requests / code reviews
7. Concepts Concepts • Cassowary algorithm – Also used in Apple's AutoLayout • iOS 6 / iPhone 5 – before for OS X development – And on the web (Constraint CSS)
8. Blueprint Editor Blueprint Editor
10. View sizes View sizes • wrap_content • fixed sized • Stretched (0dp / match_constraint) – No match_parent for CL children
11. Visibility Visibility • View.GONE – View takes up 0dp size – Constraints held up transitively – View has no margin – Extra margins to View.GONE targets possible • For example: layout_goneMarginStart="16dp" • Currently XML only
12. Guidelines Guidelines • Proper views – But • 0dp sized • Not drawn • Not layouted • Can represent percentages
13. Aspect Ratio Aspect Ratio • For match_constraint views • Constraints size of – one explicitly stated side of the view – Or both depending on available space
14. Chains Chains • Created by constraining views to each other • Useful for – positioning the chain itself – Creating views of the same size – Spreading views equally
15. Chains Chains • Three modes: – packed • Variation: packed with bias – Determines the positioning of the packed chain – spread – spread inside • Variation: spread with weights (as with LinearLayout) – Determines the distribution of chain elements
16. Chains Chains
17. Chains Chains
18. Chains Chains
19. Chains Chains • One View can be part of multiple chains
20. wrap_content wrap_content • CL can be set to wrap_content • Uses sizes defined with android:minWidth android:minHeight
21. CL programmatically CL programmatically • Use ConstraintSet • Works great when cloning from a layout • You don‘t want to do everything in code • Easily usable for changing constraints at runtime
22. CL programmatically CL programmatically TransitionManager.beginDelayedTransition(layout); ConstraintSet set = new ConstraintSet(); set.clone(layout); set.clear(R.id.btn_move, ConstraintSet.END); set.connect(R.id.btn_move, ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START, margin); set.applyTo(layout);
23. CL programmatically CL programmatically TransitionManager.beginDelayedTransition(layout); ConstraintSet set = new ConstraintSet(); set.clone(layout); set.clear(R.id.btn_move); set.constrainHeight(R.id.btn_move, ConstraintSet.WRAP_CONTENT); set.constrainWidth(R.id.btn_move, ConstraintSet.WRAP_CONTENT); set.connect(R.id.btn_move, ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START, margin); // another connect for vertical position also needed set.applyTo(layout);
24. CL programmatically CL programmatically TransitionManager.beginDelayedTransition(layout); ConstraintSet set = new ConstraintSet(); set.clone(layout); set.clear(R.id.btn_move); set.constrainHeight(R.id.btn_move, ConstraintSet.WRAP_CONTENT); set.constrainWidth(R.id.btn_move, ConstraintSet.WRAP_CONTENT); // another connect for vertical position also needed set.connect(R.id.btn_move, ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START, margin); set.applyTo(layout);
25. CL vs. AutoLayout CL vs. AutoLayout Maybe I'm a bit biased, but...
31. CL vs. AutoLayout CL vs. AutoLayout • CL much simpler to handle • CL less powerful – Inequalities and priorities • Android's XML easier to understand • No guidelines in AutoLayout • View.GONE equivalent in AutoLayout requires ton of extra work
32. Some bugs Some bugs • Sometimes superfluous absoluteX/absoluteY attributes • Preview wrong for unconstrained views – Alas, Google did this on purpose • match_constraint bug for packed chains – treated as View without width
33. Some more bugs Some more bugs • LE sometimes omits margins • LE looses zoom level when switching view types • LE doesn‘t always show bias handles • LE has difficulties with start/end • Conversion of Layouts in 2.4 buggy
34. Some nice to haves Some nice to haves • Yellow instead of red indicator for warnings • Indicator for chains in component tree • ConstraintSet.clone() as factory methods
35. Future work Future work • No I/O talk about layouts scheduled
36. Future work Future work • No I/O talk about layouts scheduled • But one about the layout editor
37. Future work Future work • And this is still in the docs: ConstraintLayout is available as a support library ... As such, we are planning in enriching its API and capabilities over time. https://developer.android.com/reference/android/support/constraint/Constraint Layout.html
38. Even More Material Even More Material • Google training https://developer.android.com/training/constraint- layout/index.html • Layout Editor User Guide https://developer.android.com/studio/write/layout-editor.html • API reference https://developer.android.com/reference/android/support/constr aint/package-summary.html