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

Spotify: Constraint Layout 101

E8da8d13d06ca69dbe019ecad71ed2a4?s=47 vinaygaba
September 04, 2016

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



September 04, 2016

More Decks by vinaygaba

Other Decks in Technology


  1. Constraint Layout 101

  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.
  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.
  4. Constraints connect points on a view (called anchor points) to

    a target of some kind
  5. Possible Targets Anchor point of another view Anchor point of

    parent container A guideline
  6. Possible Targets

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

  8. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout 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"> <TextView 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" /> </android.support.constraint.ConstraintLayout>
  9. Specifying Constraints is important

  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
  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”
  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.
  13. Dimension Ratio <ImageView 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"

  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.
  15. Thank you