Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BABBQ16 ConstraintLayout presentation

BABBQ16 ConstraintLayout presentation

This talk was presented at the Big Android BBQ 2016.

It describes the constraints model used by ConstraintLayout, a new android layout we introduced at Google IO'16, and the different results you can achieve.

Nicolas Roard

October 23, 2016
Tweet

More Decks by Nicolas Roard

Other Decks in Programming

Transcript

  1. Why creating a new layout? Visual Editor Flexible Flat layout

    Unbundled Available from API level 9 (99.9% devices)
  2. Wrap Content <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http:// schemas.android.com/apk/res/android"
 android:layout_width="match_parent" android:layout_height="match_parent">


    
 <Button
 android:id="@+id/button6"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_alignParentEnd="true"
 android:layout_alignParentRight="true"
 android:layout_marginBottom="34dp"
 android:layout_marginEnd="24dp"
 android:layout_marginRight="24dp"
 android:text="Button" />
 </RelativeLayout>
  3. Wrap Content <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http:// schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">


    
 <Button
 android:id="@+id/button6"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_alignParentEnd="true"
 android:layout_alignParentRight="true"
 android:layout_marginBottom="34dp"
 android:layout_marginEnd="24dp"
 android:layout_marginRight="24dp"
 android:text="Button" />
 </RelativeLayout>
  4. Wrap Content <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/a xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"


    android:layout_height="match_parent">
 
 <Button
 android:id="@+id/button12"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Button"
 app:layout_constraintBottom_toBottomOf="parent" android:layout_marginBottom="34dp"
 android:layout_marginEnd="24dp"
 app:layout_constraintRight_toRightOf="parent"
 android:layout_marginRight="24dp" />
 </android.support.constraint.ConstraintLayout>
  5. Wrap Content <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/a xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"


    android:layout_height="wrap_content">
 
 <Button
 android:id="@+id/button12"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Button"
 app:layout_constraintBottom_toBottomOf="parent" android:layout_marginBottom="34dp"
 android:layout_marginEnd="24dp"
 app:layout_constraintRight_toRightOf="parent"
 android:layout_marginRight="24dp" />
 </android.support.constraint.ConstraintLayout>
  6. Performance Similar to RelativeLayout on old devices (dalvik…) Currently a

    bit slower with art, but not meaningful Flattening gains
  7. Performance Similar to RelativeLayout on old devices (dalvik…) Currently a

    bit slower with art, but not meaningful Flattening gains Measure your app!
  8. Performance Similar to RelativeLayout on old devices (dalvik…) Currently a

    bit slower with art, but not meaningful Flattening gains Measure your app! Send us examples :)
  9. Going forward 10 releases since Google IO Default in Android

    Studio 2.3 Open Source Support Existing Layouts
  10. Going forward 10 releases since Google IO Default in Android

    Studio 2.3 Open Source Support Existing Layouts XML vs Visual Editor
  11. Going forward 10 releases since Google IO Default in Android

    Studio 2.3 Open Source Support Existing Layouts XML vs Visual Editor
  12. <Button
 android:id="@+id/button1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Button"
 tools:layout_editor_absoluteY="10dp"
 app:layout_constraintRight_toLeftOf="@+id/button2"
 app:layout_constraintLeft_toLeftOf="parent" />
 


    <Button
 android:id="@+id/button2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Button"
 tools:layout_editor_absoluteY="10dp"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintLeft_toRightOf="@+id/button1" /> Chains
  13. Chain Styles A B C Spread A B C Spread

    Inside A B C Weighted A B C Packed
  14. Chain Styles A B C Spread A B C Spread

    Inside A B C Weighted A B C Packed + bias
  15. How Does It Work Linear Equations Solver Constraints Model Direct

    Resolution Inference Layout Editor Linear Equations Solver
  16. Demo Presentation of the UI designer Manual constraints Auto connect

    Inference Alignment tools + constraints creation
  17. Demo Presentation of the UI designer Manual constraints Auto connect

    Inference Alignment tools + constraints creation Chains
  18. Demo Presentation of the UI designer Manual constraints Auto connect

    Inference Alignment tools + constraints creation Chains Ratio
  19. Demo Presentation of the UI designer Manual constraints Auto connect

    Inference Alignment tools + constraints creation Chains Ratio ConstraintSet + Animations
  20. Connect Nicolas Roard @camaelon +NicolasRoard John Hoford @johnhoford +JohnHoford Documentation

    https://developer.android.com/reference/ android/support/constraint/package- summary.html