No content

Why yet another layout Why yet another layout ● Flat hierarchy – Simpler layouts – Faster

Basics Basics ● Normal ViewGroup ● Similar to RelativeLayout – But more flexible ● Similar to Apple‘s AutoLayout ● Separate library (like RecyclerView) ● Backwards compatible to v9

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:

What are Constraints What are Constraints ● Define appearence of view with respect to – Size – Position – Visibility

Concepts Concepts ● LayoutEditor – Blueprint and preview view – Create constraints – Define properties ● XML still usable – Good for pull requests / code reviews

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)

Blueprint Editor Blueprint Editor

No content

View sizes View sizes ● wrap_content ● fixed sized ● Stretched (0dp / match_constraint) – No match_parent for CL children

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

Guidelines Guidelines ● Proper views – But ● 0dp sized ● Not drawn ● Not layouted ● Can represent percentages

Aspect Ratio Aspect Ratio ● For match_constraint views ● Constraints size of – one explicitly stated side of the view – Or both depending on available space

Chains Chains ● Created by constraining views to each other ● Useful for – positioning the chain itself – Creating views of the same size – Spreading views equally

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

Chains Chains

Chains Chains

Chains Chains

Chains Chains ● One View can be part of multiple chains

wrap_content wrap_content ● CL can be set to wrap_content ● Uses sizes defined with android:minWidth android:minHeight

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

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);

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);

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);

CL vs. AutoLayout CL vs. AutoLayout Maybe I'm a bit biased, but...

No content

No content

No content

No content

No content

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

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

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

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

Future work Future work ● No I/O talk about layouts scheduled

Future work Future work ● No I/O talk about layouts scheduled ● But one about the layout editor

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

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

No content