ConstraintLayout 2.0 sneak peek

CONSTRAINT LAYOUT 2.0 Nicolas Roard & John Hoford @camaelon @johnhoford
(Sneak peek)

BUT FIRST…

CL 1.1 1.1

OVERVIEW… goo.gl/txuisJ

CONSTRAINT LAYOUT 1.1 ➤ Circular Constraints ➤ Helper objects ➤
Optimizer ➤ many bug ﬁxes!

ConstraintLayout 2.0 preview GOOGLE MAVEN REPOSITORY dependencies { compile 'com.android.support.constraint:constraint-layout:1.1.0'
}

BARRIERS ➤ A barrier takes the minimum or maximum of
a set of widget ➤ Other widgets can then be constrained to it ➤ Allows to build more ﬂexible layouts Helper object

BARRIERS

Barriers

Barriers 1 2 3

Barriers 1 2 3 4

Barriers

OPTIMIZER ➤ New optimizer in 1.1 ➤ A lot more
powerful :) ➤ Multiple optimizations passes available ➤ Direct & Center connections ➤ Barriers ➤ Chains (experimental) ➤ Dimensions (experimental)

OPTIMIZER CONSTRAINTS OPTIMIZER SOLVER MEASURES

OPTIMIZER Widget A

OPTIMIZER Widget A Widget B

OPTIMIZER

OPTIMIZER ➤ Direct ➤ Barriers ➤ Chains (experimental) ➤ Dimensions
(experimental)

CHAINS OPTIMIZER ➤ Apply if all elements have ﬁxed dimensions
➤ Or if all elements are (simple) match_constraint ➤ …more to come

DIMENSIONS OPTIMIZER match_constraint match_constraint 1 match_constraint fixed / wrap_content 2
fixed / wrap_content fixed / wrap_content 1

DIMENSIONS OPTIMIZER Match_Constraint

ConstraintLayout 2.0 preview OPTIMIZER ATTRIBUTE app:layout_optimizationLevel=“standard” app:layout_optimizationLevel=“direct|barriers|chains|dimensions”

CONSTRAINT LAYOUT 2.0Preview

CL 2.0 WHY?

CL 2.0 UI : RAISING THE BAR

CL 2.0 HELP!

CL 2.0 VOCABULARY

CL 2.0 HELPERS

WHAT’S A HELPER ➤ Not necessarily part of your view
hierarchy ➤ Helps you specify and build your UI ➤ example: Guideline, Barrier

THREE MAIN CATEGORIES OF HELPERS Layout Manipulation Rendering or Decorating
Post-Layout Manipulation

CONSTRAINT HELPERS ➤ Keep a reference to existing views ➤
Flat hierarchy ➤ Views can be referenced by multiple helpers ➤ Essentially, it allows you to tag views, setting speciﬁc behaviors

API ➤ Access a list of views ➤ pre/post layouts
callbacks ➤ normal views ➤ already used ➤ barriers ➤ groups

TOOLING ➤ Integrated manipulation in the component tree (like for
barriers) ➤ Exposed in the Palette ➤ Support 3rd party libraries ➤ exposing their custom views / helpers

TOOL INTEGRATION

EXAMPLE : COLLECTION HELPER ➤ Trampoline object ➤ forward function
calls to referenced views ➤ setVisibility ➤ setAlpha ➤ setRotation, etc. ➤ no getter!

CL 2.0 DECORATORS

DECORATORS ➤ Can reference views ➤ Easily build decorators that
depends on views location / visibility / etc

ConstraintLayout 2.0 preview METABALLS public class MetaballsDecorator extends ConstraintHelper {
public void updatePostLayout(ConstraintLayout container) { int[] ids = getReferencedIds(); final int count = ids.length; for (int i = 0; i < count; i++) { View view = container.getViewById(ids[i]); // do something } } @Override public void onDraw(Canvas canvas) { // do something } }

Decorator Canvas ImageViews

Metaballs Decorator

LAYER DECORATOR ➤ Manipulate graphically a collection of views ➤
Supports transforms, etc. ➤ Can be set as the bounding box of the referenced views

ConstraintLayout 2.0 preview LET’S CREATE A DRAWABLE… <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="12dp" /> <stroke android:width="2dp" android:color="@color/colorPrimary" /> <solid android:color="#ffffff" /> </shape

ConstraintLayout 2.0 preview LAYER DECORATOR <android.support.constraint.Layer android:id=“@+id/layer” android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/frame"
android:padding="32dp" app:constraint_referenced_ids=“button1,button2,button3, button4,button5” />

ConstraintLayout 2.0 preview LAYER DECORATOR

ConstraintLayout 2.0 preview LAYERS : PROGRAMMATIC ACCESS Layer layer =
findViewById(R.id.layer); layer.setRotation(angle); layer.setScaleX(1+(180 - Math.abs(angle-180))/20f); layer.setScaleY(1+(180 - Math.abs(angle-180))/20f); float shift_x = 500 * (float) Math.sin(Math.toRadians(angle*5)); float shift_y = 500 * (float) Math.sin(Math.toRadians(angle*7)); layer.setTranslationX(shift_x); layer.setTranslationY(shift_y);

ConstraintLayout 2.0 preview FLY-IN DECORATOR

ConstraintLayout 2.0 preview FLY IN DECORATOR: XML <com.example.FlyinHelper android:id="@+id/flyinhelper" android:layout_width="match_parent"
android:layout_height="match_parent" android:background="#F00" app:constraint_referenced_ids=“button1,button2,button3, imageView,button4" />

ConstraintLayout 2.0 preview FLY IN DECORATOR @Override public void updatePostLayout(ConstraintLayout
container) { update(); } void update(){ if (mContainer == null) { return; } mComputedCenterX = Float.NaN; mComputedCenterY = Float.NaN; View[] views = getViews(mContainer); calcCenters(); float shift = myFlyValue-1; for (int i = 0; i < mCount; i++) { View view = views[i]; int x = (view.getLeft() + view.getRight()) / 2; int y = (view.getTop() + view.getBottom()) / 2; view.setTranslationX((x - mComputedCenterX)*shift); view.setTranslationY((y - mComputedCenterY)*shift); } }

ConstraintLayout 2.0 preview FLY IN DECORATOR @Override public void updatePreLayout(ConstraintLayout
container) { if (mContainer!=container) { setFlyIn(10); ObjectAnimator.ofFloat(this, "FlyIn", 1f) .setDuration(1000).start(); } mContainer = container; } public void setFlyIn(float flyIn) { myFlyValue = flyIn; update(); }

ConstraintLayout 2.0 preview (BONUS CODE) public void calcCenters() { if
(!(Float.isNaN(mComputedCenterX) || Float.isNaN(mComputedCenterY))) { return; } if (Float.isNaN(mCenterX) || Float.isNaN(mCenterY)) { int minx = Integer.MAX_VALUE, miny= Integer.MAX_VALUE; int maxx= Integer.MIN_VALUE,maxy= Integer.MIN_VALUE; View []views = getViews(mContainer); for (int i = 0; i < mCount; i++) { View view = views[i]; minx = Math.min(minx, view.getLeft()); miny = Math.min(miny, view.getTop()); maxx = Math.max(maxx, view.getRight()); maxy = Math.max(maxy, view.getBottom()); } mComputedCenterX = (Float.isNaN(mCenterX))?(minx + maxx) / 2:mCenterX; mComputedCenterY = (Float.isNaN(mCenterY))?(miny + maxy) / 2:mCenterY; } else { mComputedCenterY = mCenterY; mComputedCenterX = mCenterX; } }

ConstraintLayout 2.0 preview CIRCULAR REVEAL <com.example.CircularRevealHelper android:id="@+id/helper" android:layout_width=“wrap_content" android:layout_height="wrap_content" android:background="@drawable/lake"
app:constraint_referenced_ids="imageView" />

ConstraintLayout 2.0 preview CIRCULAR REVEAL @Override public void updatePostLayout(ConstraintLayout container)
{ super.updatePostLayout(container); if (mContainer != container) { int rad =(int) Math.hypot(mComputedMaxY- mComputedMinY,mComputedMaxX-mComputedMinX); Animator anim = ViewAnimationUtils.createCircularReveal(this, (int)mComputedCenterX-getLeft(), (int)mComputedCenterY-getTop(), 0, rad); anim.setDuration(2000); anim.start(); } mContainer = container; }

ALL TOGETHER…

SUMMARY : HELPERS ➤ Tag your views with behavior ➤
Encapsulate behavior ➤ Declaratively use them ➤ Tool integration

CL 2.0 VIRTUAL LAYOUTS

VIRTUAL LAYOUTS ➤ Layout the referenced views ➤ Still keep
ﬂat hierarchy ➤ Linear ➤ Flow

LINEAR ➤ Create horizontal or vertical chains ➤ Somewhat similar
to linear layout, but as a helper

ConstraintLayout 2.0 preview LINEAR <android.support.constraint.Linear android:id=“@+id/linear" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:constraint_referenced_ids="button1,button2,button3"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

ConstraintLayout 2.0 preview LINEAR

ConstraintLayout 2.0 preview <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="20dp" android:layout_marginTop="20dp" android:text="TextView"
app:layout_constraintStart_toEndOf="@+id/linear" app:layout_constraintTop_toBottomOf="@+id/linear" />

ConstraintLayout 2.0 preview LINEAR

FLOW ➤ Implements FlexboxLayout-like semantics ➤ Overﬂow elements will be
pushed to the next row ➤ Still ﬂat layout! ➤ Able to position outside elements relative to the ones in Flow

ConstraintLayout 2.0 preview FLOW <android.support.constraint.Flow android:id="@+id/flow" app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="8dp" app:constraint_referenced_ids=“button1,button2,button3,button4, button5,button6,button7,button8"
android:layout_width="match_parent" android:layout_height="wrap_content"/>

ConstraintLayout 2.0 preview REFERENCE OTHER VIEWS <ImageView android:layout_width="200dp" android:layout_height="100dp" android:src="@drawable/background"
android:scaleType="centerCrop" app:layout_constraintLeft_toLeftOf="@+id/button6" app:layout_constraintTop_toBottomOf="@id/button8"/>

ConstraintLayout 2.0 preview FLOW

CL 2.0 LAYOUT MANAGEMENT

ConstraintLayout 2.0 preview MANAGING STATES

ConstraintLayout 2.0 preview STATE XML <ConstraintLayoutStates> <State android:id="@+id/small" app:constraints=“@layout/layout_small” />
<State android:id="@+id/large" app:constraints=“@layout/layout_large” /> </ConstraintLayoutStates>

ConstraintLayout 2.0 preview JAVA-SIDE @Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); setContentView(R.layout.layout); cl = findViewById(R.id.root); cl.setLayoutDescription(R.xml.layout_states); }

ConstraintLayout 2.0 preview JAVA-SIDE @Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); setContentView(R.layout.layout); cl = findViewById(R.id.root); cl.setLayoutDescription(R.xml.layout_states); } public void change(View v) { cl.setState(closed ? R.id.large : R.id.small); closed = !closed; }

ConstraintLayout 2.0 preview STATE XML : SIZE QUALIFIERS <ConstraintLayoutStates> <State
app:constraints=“@layout/layout_small"> <Constraints app:constraints="@layout/layout_small" app:region_widthLessThan="550dp" /> <Constraints app:constraints="@layout/layout_large" app:region_widthMoreThan="450dp"/> </State> </ConstraintLayoutStates>

ConstraintLayout 2.0 preview ON CONFIGURATION CHANGE @Override public void onConfigurationChanged(Configuration
newConfig) { super.onConfigurationChanged(newConfig); cl.setState(newConfig.screenWidthDp, newConfig.screenHeightDp); }

ConstraintLayout 2.0 preview LIVE RESIZE

ConstraintLayout 2.0 preview CALLBACK cl.setOnConstraintsChanged(new ConstraintsChangedListener() { @Override public void
preLayoutChange(int state,int layoutId) { TransitionManager.beginDelayedTransition(cl); } });

ConstraintLayout 2.0 preview ANIMATED LIVE RESIZE (TRANSITION MANAGER)

LAYOUT MANAGEMENT ➤ Centralize multiple layouts in a single XML
➤ Allows to easily initialize and deal with diﬀerent representations for your layout ➤ Size qualiﬁers & live resize

CL 2.0 FLUENT API

FLUENT API ➤ ConstraintSet: great to capture full state and
manage it ➤ …But not that ideal for direct manipulation ➤ Fluent API to change layout params directly

ConstraintLayout 2.0 preview FLUENT API new Constraints(view).margin(ConstraintProperties.TOP,23).apply(); Constraints.on(view) .margin(TOP, 16)
.margin(BOTTOM, 16) .margin(LEFT, 16) .margin(RIGHT, 16) .apply(); Constraints.on(view) .center(R.id.button1, LEFT, 23, R.id.button2, RIGHT, 23,.05f) .connect(TOP,PARENT_ID, TOP, 32) .apply();

ConstraintLayout 2.0 preview EXAMPLE : CENTER Constraints.on(myView) .center(R.id.button1, LEFT, R.id.button2,
RIGHT) .horizontalBias(.5f) .top(PARENT_ID,TOP,32) .apply();

ConstraintLayout 2.0 preview center(int firstID, int firstSide, int firstMargin, int
secondId, int secondSide, int secondMargin, f centerHorizontally(int leftId, int leftSide, int leftMargin, int rightId, int rightSide, int rightMar centerHorizontallyRtl(int startId, int startSide, int startMargin, int endId, int endSide, int endMar centerVertically(int topId, int topSide, int topMargin, int bottomId, int bottomSide, int bottomMargi centerHorizontally(int toView) centerHorizontallyRtl(int toView) centerVertically(int toView) removeConstraints(int anchor) margin(int anchor, int value) goneMargin(int anchor, int value) horizontalBias(float bias) verticalBias(float bias) dimensionRatio(String ratio) visibility(int visibility) alpha(float alpha) elevation(float elevation) rotation(float rotation) rotationX(float rotationX) rotationY(float rotationY) scaleX(float scaleX) scaleY(float scaleY) translationX(float translationX) translationY(float translationY) CONSTRAINTS API…

ConstraintLayout 2.0 preview visibility(int visibility) alpha(float alpha) elevation(float elevation) rotation(float
rotation) rotationX(float rotationX) rotationY(float rotationY) scaleX(float scaleX) scaleY(float scaleY) translationX(float translationX) translationY(float translationY) translation(float translationX, float translationY) translationZ(float translationZ) constrainHeight(int height) constrainWidth(int width) constrainMaxHeight(int height) constrainMaxWidth(int width) constrainMinHeight(int height) constrainMinWidth(int width) constrainDefaultHeight(int height) constrainDefaultWidth(int width) horizontalWeight(float weight) verticalWeight(float weight) horizontalChainStyle(int chainStyle) verticalChainStyle(int chainStyle) addToHorizontalChain(int leftId, int rightId) addToHorizontalChainRTL(int leftId, int rightId) addToVerticalChain(int topId, int bottomId) removeFromVerticalChain() removeFromHorizontalChain() connect(int startSide, int endID, int endSide, int margin) CONSTRAINTS API…

CONSTRAINT LAYOUT 2.0 - SUMMARY ➤ Virtual Layouts ➤ Layers
& Transitions ➤ Decorators ➤ State management & Live Resize ➤ Fluent API for LayoutParams ➤ …more to come!

THANKS! Nicolas Roard & John Hoford @camaelon @johnhoford

CL 2.0 TO BE CONTINUED… … at Google IO 2018!

DOCUMENTATION ➤ http://www.constraintlayout.com ➤ https://developer.android.com/reference/android/support/ constraint/package-summary.html ➤ https://developer.android.com/training/constraint-layout/ index.html ➤
https://codelabs.developers.google.com/codelabs/constraint-layout ➤ https://medium.com/google-developers/building-interfaces-with- constraintlayout-3958fa38a9f7

ConstraintLayout 2.0 sneak peek

ConstraintLayout 2.0 sneak peek

More Decks by Nicolas Roard

Other Decks in Programming

Featured

Transcript