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

Mastering ConstraintLayout in Android - GDG Joh...

Mastering ConstraintLayout in Android - GDG Johannesburg

Presented at GDG Johannesburg on 4th October 2017.

In this talk, Rebecca will demonstrate how to use ConstraintLayout when building Android Apps and some cool tricks you can do with it. From simplifying complex layouts to creating animations, ConstraintLayout has some really great usages.

Rebecca Franks

October 04, 2017
Tweet

More Decks by Rebecca Franks

Other Decks in Programming

Transcript

  1. - <RelativeLayout> <ImageView /> <ImageView /> <RelativeLayout> <TextView /> <LinearLayout>

    <TextView /> <RelativeLayout> <EditText /> </RelativeLayout> </LinearLayout> <LinearLayout> <TextView /> <RelativeLayout> <EditText /> </RelativeLayout> </LinearLayout> <TextView /> </RelativeLayout> <LinearLayout > <Button /> <Button /> </LinearLayout> </RelativeLayout>
  2. @riggaroo Draw Process in Android Inflation Measure Layout Draw Uses

    a Depth-First Traversal Source: https://speakerdeck.com/queencodemonkey/philly-ete-2017-loving-lean-android-layouts
  3. @riggaroo Draw Process in Android Inflation Measure - onMeasure Layout

    Draw Parent will measure each child Child calculates measured width and height Measure own (if any) children
  4. @riggaroo Draw Process in Android Inflation Measure Layout Draw -

    onDraw() Parent Draws Parent tells children to draw
  5. @riggaroo LinearLayout - Aligns children in a single direction -

    horizontal or vertical - Can use weights (but please avoid this!) <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <EditText... /> <EditText ... /> <Button ... /> </LinearLayout>
  6. @riggaroo RelativeLayout - Layout that allows you to align objects

    relative to each other or relative to the parent <RelativeLayout ..> <EditText android:id="@+id/name" ... /> <Spinner android:id="@+id/dates" android:layout_below="@id/name" android:layout_alignParentLeft="true" android:layout_toLeftOf="@+id/times" /> <Spinner android:id="@id/times" android:layout_below="@id/name" android:layout_alignParentRight="true" /> </RelativeLayout>
  7. @riggaroo FrameLayout - One single child view - Drawn in

    stack, most recent on top - Useful for: - Hiding/showing error layouts - Fragment stacking - Overlaying content
  8. - <RelativeLayout> <ImageView /> <ImageView /> <RelativeLayout> <TextView /> <LinearLayout>

    <TextView /> <RelativeLayout> <EditText /> </RelativeLayout> </LinearLayout> <LinearLayout> <TextView /> <RelativeLayout> <EditText /> </RelativeLayout> </LinearLayout> <TextView /> </RelativeLayout> <LinearLayout > <Button /> <Button /> </LinearLayout> </RelativeLayout>
  9. <android.support.constraint.ConstraintLayout> <ImageView /> <ImageView /> <TextView /> <EditText /> <TextView

    /> <TextView /> <EditText /> <Button /> <Button /> <TextView /> </android.support.constraint.ConstraintLayout>
  10. @riggaroo ConstraintLayout - Info - Released at Google I/O 2016

    - Supports API +9 - Not bundled as part of Android SDK implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta2'
  11. @riggaroo Cassowary Algorithm - Cassowary algorithm - Constraints - expressed

    as set of equations : a[1]x[1] + ... + a[n]x[n] = b a[1]x[1] + ... + a[n]x[n] <= b a[1]x[1] + ... + a[n]x[n] >= b
  12. @riggaroo Constraints - A constraint is the relationship between two

    views in the layout - Controls how those views will be positioned within the layout.
  13. @riggaroo Bias Specifies which direction you want your widget to

    have bias towards. You can specify vertical or horizontal bias.
  14. @riggaroo Guidelines - A visual guide which will not be

    seen at runtime - Used align other views to - Either horizontally or vertically
  15. @riggaroo Barriers - A virtual view, similar to a Guideline,

    to which we can constrain objects. - Determined by dimensions of multiple views
  16. @riggaroo Group - Group things together - Not the same

    as traditional group - Used to set visibility of all elements
  17. @riggaroo Dimensions - Fixed aspect ratio - Useful for images

    or Video players etc - Specify size of view with dimension w:h
  18. @riggaroo Animating Constraint Sets val constraintSet1 = ConstraintSet() val constraintSet2

    = ConstraintSet() constraintSet2.clone(this, R.layout.activity_movie_rental_large) constraintSet1.clone(constraintLayout) TransitionManager.beginDelayedTransition(constraintLayout) constraintSet2.applyTo(constraintLayout)
  19. @riggaroo Animating Constraint Sets val constraintSet1 = ConstraintSet() val constraintSet2

    = ConstraintSet() constraintSet2.clone(this, R.layout.activity_movie_rental_large) constraintSet1.clone(constraintLayout) TransitionManager.beginDelayedTransition(constraintLayout) constraintSet2.applyTo(constraintLayout)
  20. @riggaroo Animating Constraint Sets val constraintSet1 = ConstraintSet() val constraintSet2

    = ConstraintSet() constraintSet2.clone(this, R.layout.activity_movie_rental_large) constraintSet1.clone(constraintLayout) TransitionManager.beginDelayedTransition(constraintLayout) constraintSet2.applyTo(constraintLayout)
  21. @riggaroo Where are the problems? Some layouts need multiple measure/layout

    passes ie RelativeLayout, weights on LinearLayout
  22. @riggaroo GPU Overdraw - Colour coding - Times pixel is

    redrawn on the screen - Useful for: - Reducing rendering overhead
  23. @riggaroo Profile GPU Rendering - Quick visual representation - Time

    to render frames of a UI view. - 16ms benchmark - Good for: - Spikes in rendering frames - Gauging perf of 16ms benchmark
  24. @riggaroo References - Follow these people on twitter: - Nicolas

    Roard @camaelon - John Hofard @johnhoford - Huyen Tue Dao @queencodemonkey - Mark Allison @MarkIAllison - ConstraintLayout Resources - https://www.youtube.com/watch?v=yT22cqCGjQQ - https://www.youtube.com/watch?v=Xx4aRI3oQbM - http://wiresareobsolete.com/2016/07/constraintlayout-part-1/ - http://wiresareobsolete.com/2016/07/constraintlayout-part-2/ - https://codelabs.developers.google.com/codelabs/constraint-layout/#0