Flattening Layouts with Constraints

Overview of the new ConstraintLayout API for Android.

Transcript

1. Flattening Layouts with Constraints Dave Smith, PE @devunwired +DaveSmithDev
2. ConstraintLayout
3. Constraint Layout
4. Constraint \kənˈstrānt\ Mathematical expression given as a boundary condition to the objective function in a linear optimization problem.
5. L = 0 R = L + 240 T = 0 B = T + 120 R = L + 240 L ≥ LP + 16 R ≤ RP + 16 L + R = LP + RP B = T + 120 T ≥ TP + 16 B ≤ BP + 16 T + B = TP + BP
6. View
7. View Top Bottom Left Start Right End CenterX CenterY
8. View Top Bottom Left Start Right End CenterX CenterY View Top Bottom Left Start Right End CenterX CenterY View Top Bottom Left Start Right End CenterX CenterY
9. View Top Bottom Left Start Right End CenterX CenterY View Top Bottom Left Start Right End CenterX CenterY View Top Bottom Left Start Right End CenterX CenterY Constraints Require IDs!
10. layout_constraintBottom_toBottomOf layout_constraintBottom_toTopOf layout_constraintEnd_toEndOf layout_constraintEnd_toStartOf layout_constraintLeft_toLeftOf layout_constraintLeft_toRightOf layout_constraintRight_toLeftOf layout_constraintRight_toRightOf layout_constraintStart_toEndOf layout_constraintStart_toStartOf layout_constraintTop_toBottomOf layout_constraintTop_toTopOf layout_constraintBaseline_toBaselineOf layout_constraintCenterX_toCenterX layout_constraintCenterY_toCenterY
11. <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/constraintLayout"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 <Button
 android:id="@+id/button_cancel"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="16dp"
 android:layout_marginStart="16dp"
 app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
 app:layout_constraintStart_toStartOf="@+id/constraintLayout"/>
 
 <Button
 android:id="@+id/button_next"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginBottom="16dp"
 android:layout_marginStart="16dp"
 app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
 app:layout_constraintStart_toEndOf="@+id/button_cancel"/>
 
 </android.support.constraint.ConstraintLayout>
12. <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/constraintLayout"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 <Button
 android:id="@+id/button" android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:layout_constraintTop_toTopOf="@+id/constraintLayout"
 app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
 app:layout_constraintStart_toStartOf="@+id/constraintLayout"
 app:layout_constraintEnd_toEndOf="@+id/constraintLayout" />
 
 </android.support.constraint.ConstraintLayout>
13. <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/constraintLayout"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 <Button
 android:id="@+id/button"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:layout_constraintTop_toTopOf="@+id/constraintLayout" app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
 app:layout_constraintStart_toStartOf="@+id/constraintLayout" app:layout_constraintEnd_toEndOf="@+id/constraintLayout" app:layout_constraintHorizontal_bias="0.25"
 app:layout_constraintVertical_bias="0.25"/>
 
 </android.support.constraint.ConstraintLayout>
14. <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/constraintLayout"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 <Button
 android:id="@+id/button"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:layout_constraintTop_toTopOf="@+id/constraintLayout" app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
 app:layout_constraintStart_toStartOf="@+id/constraintLayout" app:layout_constraintEnd_toEndOf="@+id/constraintLayout" app:layout_constraintHorizontal_bias="0.25"
 app:layout_constraintVertical_bias="0.25"/>
 
 </android.support.constraint.ConstraintLayout>
15. <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/constraintLayout"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 <android.support.constraint.Guideline
 android:id="@+id/guideline"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 app:layout_constraintGuide_begin="72dp"/>
 
 <Button
 android:id="@+id/button_cancel"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
 app:layout_constraintStart_toStartOf="@+id/guideline"
 app:layout_constraintTop_toTopOf="@+id/constraintLayout"
 app:layout_constraintVertical_bias="0.25"/>
 
 <Button
 android:id="@+id/button_next"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
 app:layout_constraintStart_toStartOf="@+id/guideline"
 app:layout_constraintTop_toTopOf="@+id/constraintLayout"
 app:layout_constraintVertical_bias="0.75"/>
 
 </android.support.constraint.ConstraintLayout>
16. <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/constraintLayout"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 <android.support.constraint.Guideline
 android:id="@+id/guideline"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 app:layout_constraintGuide_begin="72dp"/>
 
 <Button
 android:id="@+id/button_cancel"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
 app:layout_constraintStart_toStartOf="@+id/guideline"
 app:layout_constraintTop_toTopOf="@+id/constraintLayout"
 app:layout_constraintVertical_bias="0.25"/>
 
 <Button
 android:id="@+id/button_next"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
 app:layout_constraintStart_toStartOf="@+id/guideline"
 app:layout_constraintTop_toTopOf="@+id/constraintLayout"
 app:layout_constraintVertical_bias="0.75"/>
 
 </android.support.constraint.ConstraintLayout>
17. <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/constraintLayout"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 <android.support.constraint.Guideline
 android:id="@+id/guideline"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 app:layout_constraintGuide_begin="72dp"/>
 
 <Button
 android:id="@+id/button_cancel"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
 app:layout_constraintStart_toStartOf="@+id/guideline"
 app:layout_constraintTop_toTopOf="@+id/constraintLayout"
 app:layout_constraintVertical_bias="0.25"/>
 
 <Button
 android:id="@+id/button_next"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
 app:layout_constraintStart_toStartOf="@+id/guideline"
 app:layout_constraintTop_toTopOf="@+id/constraintLayout"
 app:layout_constraintVertical_bias="0.75"/>
 
 </android.support.constraint.ConstraintLayout> layout_constraintGuide_Percent layout_constraintGuide_begin layout_constraintGuide_end
18. View Sizing • Wrap Content • Measure just large enough to fit view contents • layout_width="wrap_content" • Fixed Size • Measure to the specified dimension provided • layout_width="72dp" • Any Size • Measure to fill the space allowed by constraints • layout_width="0dp"
19. <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/constraintLayout"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 <ImageView
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 app:layout_constraintDimensionRatio="16:9"
 app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
 app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"
 app:layout_constraintRight_toRightOf="@+id/constraintLayout"
 app:layout_constraintTop_toTopOf="@+id/constraintLayout"
 app:layout_constraintVertical_bias="0.0"/>
 
 <ImageView
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 app:layout_constraintDimensionRatio="4:3"
 app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
 app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"
 app:layout_constraintRight_toRightOf="@+id/constraintLayout" app:layout_constraintVertical_bias="1.0"/>
 
 </android.support.constraint.ConstraintLayout>
20. Visual Layout Editor Autoconnect Inference • Automatically attach constraints to new views when added • Connections made to nearest neighbor • Does not adjust constraints on existing views • Add missing constraints to all views • Works well in small iterations • Does not adjust constraints added manually
21. Visual Layout Editor tools:layout_editor_absoluteX tools:layout_editor_absoluteY tools:layout_constraint[Anchor]_creator
22. More Information • Layout Pancake Samples • http://milehighandroid.com • ConstraintLayout, Inside and Out • http://wiresareobsolete.com • Cassowary Algorithm • http://overconstrained.io/ • ConstraintLayout - Mark Allison • http://stylingandroid.com