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

ConstraintLayout presentation

Nicolas Roard
December 13, 2016

ConstraintLayout presentation

ConstraintLayout presentation at Android SF meetup

Nicolas Roard

December 13, 2016
Tweet

More Decks by Nicolas Roard

Other Decks in Programming

Transcript

  1. Why did we create a new layout? Visual Editor Flexible

    Flat hierarchy Unbundled Available starting API 9 (99.9% of 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/andr 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/andr 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. Wrap Content <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/andr 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>
  7. Performance For now, similar to RelativeLayout … but gains due

    to flat hierarchies On a recent device, great performances
  8. Performance For now, similar to RelativeLayout … but gains due

    to flat hierarchies On a recent device, great performances Measure your layouts!
  9. Performance For now, similar to RelativeLayout … but gains due

    to flat hierarchies On a recent device, great performances Measure your layouts! Send us examples :)
  10. Size & Memory The unbundled library is ~130 ko Low

    memory occupation (sparse matrix)
  11. How does it work? Linear Equation Solver Constraints Model Direct

    Resolution Inference Engine Linear Equation Solver Visual Editor
  12. How far are we 12 releases since Google IO’16 Default

    Layout in Android Studio 2.3 templates
  13. How far are we 12 releases since Google IO’16 Default

    Layout in Android Studio 2.3 templates Open Source
  14. How far are we 12 releases since Google IO’16 Default

    Layout in Android Studio 2.3 templates Open Source Building better support for other viewgroups in the editor
  15. How far are we 12 releases since Google IO’16 Default

    Layout in Android Studio 2.3 templates Open Source Building better support for other viewgroups in the editor XML vs Visual Editor
  16. How far are we 12 releases since Google IO’16 Default

    Layout in Android Studio 2.3 templates Open Source Building better support for other viewgroups in the editor XML vs Visual Editor
  17. <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
  18. Different Chain Styles A B C Spread A B C

    Spread Inside A B C Weighted A B C Packed
  19. Different Chain Styles A B C Spread A B C

    Spread Inside A B C Weighted A B C Packed + bias
  20. ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set

    ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set ConstraintSet
  21. ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set

    ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set ConstraintSet mConstraintSet2.clone(context, R.layout.state2); // get constraints from layout setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); mConstraintSet1.clone(mConstraintLayout); // get constraints from ConstraintSet
  22. ConstraintSet mConstraintSet1 = new ConstraintSet(); // create a Constraint Set

    ConstraintSet mConstraintSet2 = new ConstraintSet(); // create a Constraint Set ConstraintSet mConstraintSet2.clone(context, R.layout.state2); // get constraints from layout setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); mConstraintSet1.clone(mConstraintLayout); // get constraints from ConstraintSet TransitionManager.beginDelayedTransition(mConstraintLayout); mConstraintSet1.applyTo(mConstraintLayout);