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

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