Constraint Layouts like a piece of cake

Transcript

1. Constraint Layouts …like a piece of cake!! Armando Picón Android Engineer @ Cornershop @devpicon
2. Introduction • Google introduces Constraint Layouts in Google I/O 2016 • Compatible with API Level > 9 (Gingerbread / 2.3) • It is part of Android Jetpack! • Designed to be used with the graphic editor • Should be the only one ViewGroup
3. Add Constraint Layout to your project • Add a reference to Google Maven Repository to your project • Add dependency reference to your module • …or just create a new project!
4. Basic Constraints
5. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ... > <Button android:id="@+id/button_one" ... android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:layout_marginBottom="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" /> <Button android:id="@+id/button_two" ... android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:layout_marginBottom="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@+id/button_one" /> </android.support.constraint.ConstraintLayout>
6. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ... > <Button android:id="@+id/button_one" ... app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>
7. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ... > <Button android:id="@+id/button_one" ... app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintHorizontal_bias="0.25" app:layout_constraintVertical_bias=“0.25" /> </android.support.constraint.ConstraintLayout>
8. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ... > <Button android:id="@+id/button_one" ... app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintHorizontal_bias="0.25" app:layout_constraintVertical_bias=“0.25" /> </android.support.constraint.ConstraintLayout>
9. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ... > <Button android:id="@+id/button_one" ... app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintHorizontal_bias="0.25" app:layout_constraintVertical_bias="0.25" /> <Button android:id="@+id/button_two" ... app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintHorizontal_bias="0.75" app:layout_constraintVertical_bias="0.75" /> </android.support.constraint.ConstraintLayout>
10. • wrap_content • fixed size (eg. 24dp) • match_constraint (0dp size) Dimension Constraints
11. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ... > <TextView android:id="@+id/txt_wrapped_text" android:layout_width="wrap_content" android:layout_height="wrap_content" … app:layout_constraintBottom_toTopOf="@+id/txt_fixed_text" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/txt_fixed_text" android:layout_width="200dp" android:layout_height=“24dp" ... app:layout_constraintBottom_toTopOf="@+id/txt_filled_text" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/txt_wrapped_text" /> <TextView android:id="@+id/txt_filled_text" android:layout_width="0dp" android:layout_height="wrap_content" ... app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/txt_fixed_text" /> </android.support.constraint.ConstraintLayout>
12. Chains • Group view elements horizontal or vertical • A chain is composed of bidirectional constraints between two elements • The first View in the chain is considered the Head • A chain is controlled through the attributes defined in Head view
13. Chain Styles • SPREAD (default) • SPREAD_INSIDE • WEIGHTED • CHAIN_PACKED
14. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ... > <Button android:id="@+id/btn_one" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button One" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@+id/btn_two" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.25" /> <Button android:id="@+id/btn_two" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button Two" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@+id/btn_three" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintStart_toEndOf="@+id/btn_one" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.25" /> <Button android:id="@+id/btn_three" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="0dp" android:text="Button Three" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintStart_toEndOf="@+id/btn_two" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.25" /> </android.support.constraint.ConstraintLayout>
15. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ... > <Button android:id="@+id/btn_four" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/double_margin" android:padding="0dp" android:text="Button Four" app:layout_constraintEnd_toStartOf="@+id/btn_five" app:layout_constraintHorizontal_chainStyle="spread" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/btn_one" /> <Button android:id="@+id/btn_five" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="0dp" android:text="Button Five" app:layout_constraintEnd_toStartOf="@+id/btn_six" app:layout_constraintHorizontal_chainStyle="spread" app:layout_constraintStart_toEndOf="@+id/btn_four" app:layout_constraintTop_toTopOf="@+id/btn_four" /> <Button android:id="@+id/btn_six" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button Six" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_chainStyle="spread" app:layout_constraintStart_toEndOf="@+id/btn_five" app:layout_constraintTop_toTopOf="@+id/btn_four" /> </android.support.constraint.ConstraintLayout>
16. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ... > <Button android:id="@+id/btn_seven" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/double_margin" android:padding="0dp" android:text="Button Seven" app:layout_constraintEnd_toStartOf="@+id/btn_eight" app:layout_constraintHorizontal_chainStyle="spread_inside" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/btn_six" /> <Button android:id="@+id/btn_eight" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button Eight" app:layout_constraintEnd_toStartOf="@+id/btn_nine" app:layout_constraintHorizontal_chainStyle="spread_inside" app:layout_constraintStart_toEndOf="@+id/btn_seven" app:layout_constraintTop_toTopOf="@+id/btn_seven" /> <Button android:id="@+id/btn_nine" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button Nine" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_chainStyle="spread_inside" app:layout_constraintStart_toEndOf="@+id/btn_eight" app:layout_constraintTop_toTopOf="@+id/btn_seven" /> </android.support.constraint.ConstraintLayout>
17. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ... > <Button android:id="@+id/btn_one" ... app:layout_constraintBottom_toTopOf="@+id/btn_two" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_weight="1.0" /> <Button android:id="@+id/btn_two" ... app:layout_constraintBottom_toTopOf="@+id/btn_three" app:layout_constraintTop_toBottomOf="@+id/btn_one" app:layout_constraintVertical_weight="1.0" /> <Button android:id="@+id/btn_three" ... app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toBottomOf="@+id/btn_two" app:layout_constraintVertical_weight="1.0" /> </android.support.constraint.ConstraintLayout>
18. More constraints…
19. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ... > <android.support.constraint.Guideline android:id="@+id/guideline" ... android:orientation="vertical" app:layout_constraintGuide_percent="0.25" /> <Button android:id="@+id/button_one" ... app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="@+id/guideline" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.25" /> <Button android:id="@+id/button_two" ... app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="@+id/guideline" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.75" /> </android.support.constraint.ConstraintLayout>
20. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ... > <TextView android:id="@+id/text_title" android:layout_width="wrap_content" android:layout_height="wrap_content" ... android:text="@string/beer" android:textAlignment="center" app:layout_constraintEnd_toStartOf="@+id/end_barrier" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <android.support.constraint.Barrier android:id="@+id/end_barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" ... app:barrierDirection="end" app:constraint_referenced_ids="text_title" app:layout_constraintStart_toStartOf="parent" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" ... android:text="@string/lorem_ipsum" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/end_barrier" /> </android.support.constraint.ConstraintLayout>
21. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ... > <TextView android:id="@+id/text_title" android:layout_width="wrap_content" android:layout_height="wrap_content" ... android:text="@string/beer" android:textAlignment="center" app:layout_constraintEnd_toStartOf="@+id/end_barrier" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <android.support.constraint.Barrier android:id="@+id/end_barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" ... app:barrierDirection="end" app:constraint_referenced_ids="text_title" app:layout_constraintStart_toStartOf="parent" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" ... android:text="@string/lorem_ipsum" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/end_barrier" /> </android.support.constraint.ConstraintLayout>
22. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ... > <ImageView android:id="@+id/cover" android:layout_width="0dp" android:layout_height="0dp" android:scaleType="centerCrop" ... app:layout_constraintDimensionRatio="h,16:9" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <ImageView android:id="@+id/picture" android:layout_width="75dp" android:layout_height="0dp" ... app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintDimensionRatio="3:4" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/cover" app:layout_constraintVertical_bias="0.7" /> </android.support.constraint.ConstraintLayout>
23. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ... > <TextView android:id="@+id/sun" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Sun" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/mercury" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Mercury" app:layout_constraintCircle="@+id/sun" app:layout_constraintCircleAngle="0" app:layout_constraintCircleRadius="45dp" /> <TextView android:id="@+id/venus" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Venus" app:layout_constraintCircle="@+id/sun" app:layout_constraintCircleAngle="45" app:layout_constraintCircleRadius="90dp" /> </android.support.constraint.ConstraintLayout>
24. • Repository with Samples
 https://github.com/DevPicon/constraint-layout-lab
25. Resources • Build a Responsive UI with ConstraintLayout
 https://developer.android.com/training/constraint-layout • Constraint Layout Examples
 https://github.com/googlesamples/android-ConstraintLayoutExamples
26. Constraint Layouts …like a piece of cake!! Armando Picón Android Engineer @ Cornershop @devpicon