Spotify: Constraint Layout 101

Slides from a lightning talk I gave at Spotify during my internship about the new android layout on the block - Constraint Layout

Transcript

1. Constraint
   Layout
   101
   

   View Slide

2. Why do we need another layout?
   ● Existing Layouts are not performant as top level layouts.
   ● There needs to be a layout to bridge this gap and be the suitable standard
   for an ideal top level view group.
   ● Should have the performance of non weighted Linear Layout and the
   flexibility of a Relative Layout.
   

   View Slide

3. Constraint
   Layouts
   ● Meant to be the top level view of a
   layout.
   ● Although you can edit a
   ConstraintLayout in XML, you
   never have to.
   ● Part of the Support Library.
   ● Compatible with Android 2.3
   (Gingerbread) and higher.
   ● Currently in preview.
   

   View Slide

4. Constraints connect points
   on a view (called anchor
   points) to a target of some
   kind
   

   View Slide

5. Possible Targets
   Anchor point of
   another view
   Anchor point of
   parent container
   A guideline
   

   View Slide

6. Possible Targets
   

   View Slide

7. Constraint Format
   layout_constraint[SourceAnchor]_[TargetAnchor]="[TargetId]"
   Example
   app:layout_constraintTop_toTopOf="@+id/guideline2"
   app:layout_constraintRight_toLeftOf="@+id/guideline"
   

   View Slide

8. 
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/activity_main"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context="com.vinaygaba.constraintlayouts101.MainActivity">
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Hello World!"
   app:layout_constraintBottom_toBottomOf="@+id/activity_main"
   app:layout_constraintLeft_toLeftOf="@+id/activity_main"
   app:layout_constraintRight_toRightOf="@+id/activity_main"
   app:layout_constraintTop_toTopOf="@+id/activity_main" />
   
   

   View Slide

9. Specifying Constraints is important
   

   View Slide

10. Visual Layout Editor
    AutoConnect
    Automatically adds constraints to new view when added
    Existing views remain untouched
    Connections are typically made to the nearest views
    Infer
    Constraints are added to existing views
    Does not touch constraints which were explicitly added
    

    View Slide

11. View Sizes
    ● Wrap Content
    ○ Measure just large enough to fit view contents
    ○ layout_width = “wrap_content”
    ● Fixed Size
    ○ Measure to specified dimension
    ○ layout_width = “100dp”
    ● Any Size
    ○ Fill the space allowed by constraints
    ○ Layout_width = “0dp”
    

    View Slide

12. Bias
    ● When a view is constrained on
    both sides of the same axis, it will
    be spaced evenly between the two
    target anchor points by default.
    ● But you are allowed to specify bias
    to give more weight to a particular
    constraint
    ● Similar to LinearLayout/GridLayout
    but now you don’t necessarily have
    to take the available space.
    

    View Slide

13. Dimension
    Ratio
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:src="@drawable/water"
    app:layout_constraintDimensionRatio="16:9"
    app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"
    app:layout_constraintTop_toTopOf="@+id/constraintLayout"
    app:layout_constraintRight_toRightOf="@+id/constraintLayout"
    />
    

    View Slide

14. Each view is defined by
    associations to other
    elements in the layout and so
    you can create a complex
    layout with a flat view
    hierarchy.
    

    View Slide

15. Thank you
    

    View Slide