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

Spotify: Constraint Layout 101

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

vinaygaba

September 04, 2016
Tweet

More Decks by vinaygaba

Other Decks in Technology

Transcript

  1. 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.
  2. 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.
  3. <?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>
  4. 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
  5. 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”
  6. 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.
  7. 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.