DevFest MN 2017: Cool ConstraintLayout

Slide 1

Slide 1 text

HUYEN TUE DAO @QUEENCODEMONKEY COOL CONSTRAINT LAYOUT

Slide 2

Slide 2 text

COOL THINGS ABOUT CONSTRAINT LAYOUT COOL THINGS TO DO WITH CONSTRAINT LAYOUT

Slide 3

Slide 3 text

WHAT IS THE CONSTRAINT LAYOUT?

Slide 4

Slide 4 text

CONSTRAINT SYSTEM CONSTRAINTS EQUATIONS SOLVER

Slide 5

Slide 5 text

CONSTRAINT SYSTEM CONSTRAINTS EQUATIONS SOLVER POSITION FIXED WRAP CONTENT MATCH CONSTRAINT RATIO EDGE CENTER BASELINE DIMENSION OTHER THINGS GUIDELINE CONSTRAINTSET CHAINS

Slide 6

Slide 6 text

CONSTRAINT SYSTEM CONSTRAINTS EQUATIONS SOLVER LINEAR SYSTEM OF EQUATIONS

Slide 7

Slide 7 text

CONSTRAINT SYSTEM CONSTRAINTS EQUATIONS SOLVER CASSOWARY LINEAR ARITHMETIC CONSTRAINT SOLVING ALGORITHM VIEW BOUNDS

Slide 8

Slide 8 text

BASIC TYPES OF CONSTRAINTS

Slide 9

Slide 9 text

RATIOS, GUIDELINES, AND CHAINS, OH MY!

Slide 10

Slide 10 text

public class SquareImageView extends ImageView { @Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  super.onMeasure(widthMeasureSpec, heightMeasureSpec);    final int size = Math.min(getMeasuredWidth(), getMeasuredHeight());  setMeasuredDimension(size, size);  }

Slide 11

Slide 11 text

Slide 12

Slide 12 text

CHAINS. CHAINS. CHAINS.

Slide 13

Slide 13 text

SPREAD INSIDE CHAIN

Slide 14

Slide 14 text

WEIGHTED CHAIN

Slide 15

Slide 15 text

PACKED CHAIN

Slide 16

Slide 16 text

UI BUILDER TOOLS FOR FASTER ASSEMBLY

Slide 17

Slide 17 text

THANK YOU! SPEAKERDECK.COM/QUEENCODEMONKEY YOUTUBE.COM/ANDROIDDIALOGS RANDOMLYTYPING.COM HUYEN TUE DAO @QUEENCODEMONKEY

Slide 18

Slide 18 text

GOING CHAIN CRAZY

Slide 19

Slide 19 text

ALIGNMENT AWESOMENESS OR HOW I LEARNED TO STOP WORRYING AND LOVE CENTER CONSTRAINTS

Slide 20

Slide 20 text

WHAT’S COOLER THAN BEING COOL? CONSTRAINTSET

Slide 21

Slide 21 text

WHAT IS CONSTRAINTSET? 21 CREATE/SAVE/APPLY A SET OF CONSTRAINTS DIFFERENT WAYS TO CREATE MANUAL (CHECK OUT THE API) CLONE A LAYOUT RESOURCE CLONE A CONSTRAINTLAYOUT SUPER EASY TRANSITIONS

Slide 22

Slide 22 text

// Get references to controls  constraintLayout = findViewById(R.id.constraint_layout) as? ConstraintLayout    // Load ConstraintSets.  constraintSet01.clone(constraintLayout)  constraintSet02.clone(this, R.layout.activity_constraintset_02) …some time later… // Toggle ConstraintSets. TransitionManager.beginDelayedTransition(constraintLayout)  if (original) constraintSet02.applyTo(constraintLayout)  else constraintSet01.applyTo(constraintLayout)  original = !original

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

// Generate new ConstraintSet to change ratio of the image.  constraintSet = ConstraintSet()  constraintSet.clone(constraintLayout)  constraintSet.setDimensionRatio(R.id.hero, R.id.radio_button_id) // Generate new ConstraintSet to change ratio of the image.  constraintSet.setHorizontalBias(R.id.head_of_chain, bias) …some time later… // Apply those changes.  TransitionManager.beginDelayedTransition(constraintLayout)  constraintSet.applyTo(constraintLayout)

Slide 26

Slide 26 text

CAVEATS CONCERNING CONSTRAINTLAYOUT

Slide 27

Slide 27 text

IF IT AIN’T BROKE, DON’T FIX IT

Slide 28

Slide 28 text

ANIMATIONS WORK VERY WELL

Slide 29

Slide 29 text

THE UI BUILDER IS A WORK IN PROGRESS

Slide 30

Slide 30 text

KEEP CONSTRAINTS CLEAN IF YOU CAN

Slide 31

Slide 31 text

FLAT HIERARCHIES IMPROVE PERFORMANCE

Slide 32

Slide 32 text

ANDROID DEVELOPERS BACKSTAGE EPISODE 50: CONSTRAINT LAYOUT

Slide 33

Slide 33 text

CONSTRAINTLAYOUT CREW JOHN HOFORD @JOHNHOFORD NICOLAS ROARD @CAMAELON

Slide 34

Slide 34 text

HOMEWORK STYLING ANDROID MARK ALLISON @MARKIALLISON GROKKING ANDROID WOLFRAM RITTMEYER @RITTMEYERW WIRES ARE OBSOLETE DAVE SMITH @DEVUNWIRED

Slide 35

Slide 35 text

THANK YOU! SPEAKERDECK.COM/QUEENCODEMONKEY YOUTUBE.COM/ANDROIDDIALOGS RANDOMLYTYPING.COM HUYEN TUE DAO @QUEENCODEMONKEY

Slide 36

Slide 36 text

REFERENCES 36 CONSTRAINT LAYOUT APIS DOCUMENTATION https://developer.android.com/reference/android/support/constraint/package-summary.html BUILD A RESPONSIVE UI WITH CONSTRAINTLAYOUT developer.android.com/training/constraint-layout/index.html ANDROID DEVELOPERS BACKSTAGE: EPISODE 50: CONSTRAINT LAYOUT androidbackstage.blogspot.com/2016/06/episode-50-constraint-layout.html USING CONSTRAINTLAYOUT TO DESIGN YOUR VIEWS | CODE LABS codelabs.developers.google.com/codelabs/constraint-layout/index.html ANDROID LAYOUTS: A NEW WORLD | GOOGLE I/O 2016 https://youtu.be/sO9aX87hq9c CONSTRAINTLAYOUT https://speakerdeck.com/writtmeyer/constraintlayout-1

Slide 37

Slide 37 text

REFERENCES 37 CONSTRAINTLAYOUT – PART 1 blog.stylingandroid.com/constraintlayout-part-1/ CONSTRAINTLAYOUT, INSIDE AND OUT: PART 1 http://wiresareobsolete.com/2016/07/constraintlayout-part-1/ SOME THOUGHTS ON ANDROID’S NEW CONSTRAINTLAYOUT AND ANDROID STUDIO’S NEW DESIGN EDITOR http://www.grokkingandroid.com/thoughts-on-constraintlayout-and-design-editor/ BUILD A UI WITH LAYOUT EDITOR developer.android.com/studio/write/layout-editor.html WHAT'S NEW IN ANDROID DEVELOPMENT TOOLS | GOOGLE I/O 2016 https://youtu.be/csaXml4xtN8 THE EXPERTS' GUIDE TO ANDROID DEVELOPMENT TOOLS | GOOGLE I/O 2016 https://youtu.be/hHnTIMjd1Y8