ConstraintLayout 2.0 sneak peek

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

View Slide

BUT FIRST…

View Slide

CL
1.1
1.1

View Slide

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

View Slide

CONSTRAINT LAYOUT 1.1
➤ Constraints
➤ Helper objects
➤ Optimizer
➤ ton of bug ﬁxes!

View Slide

CONSTRAINTS
➤ Constrained Dimensions : percent, min/max, wrap
➤ Circular constraints
➤ Complex chains

View Slide

CIRCULAR CONSTRAINTS

app:layout_constraintCircle=“@+id/buttonA"
app:layout_constraintCircleRadius=“100dp"
app:layout_constraintCircleAngle="45" />

View Slide

EXAMPLE
Andrew Kelly
https://medium.com/devnibbles/
constraintlayout-circular-
positioning-9489b11cb0e5

View Slide

HELPER OBJECTS
➤ Barriers
➤ Groups
➤ Placeholders

View Slide

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

View Slide

Barriers

View Slide

Barriers
1
2
3

View Slide

Barriers
1
2
3 4

View Slide

Barriers

View Slide

GROUPS
➤ Deﬁne a set of widgets
➤ Apply visibility to them
Helper object

View Slide

Groups
textview2
textview3

View Slide

Groups
Invisible Gone

View Slide

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
fun select(v: View) {
TransitionManager.beginDelayedTransition(main_layout)
placeholder.setContentId(v.id)
main_title.text= v.tag as CharSequence?;"";
}
}
Placeholder

View Slide

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

View Slide

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

View Slide

OPTIMIZER
CONSTRAINTS
OPTIMIZER
SOLVER
MEASURES

View Slide

OPTIMIZER
Widget A

View Slide

OPTIMIZER
Widget A
Widget B

View Slide

OPTIMIZER

View Slide

CONSTRAINT LAYOUT 2.0Preview

View Slide

“

View Slide

CL
2.0
WHY?

View Slide

CL
2.0
UI : RAISING THE BAR

View Slide

CL
2.0
HELP!

View Slide

CL
2.0
VOCABULARY

View Slide

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

View Slide

CL
2.0
HELPERS

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

CL
2.0
DECORATORS

View Slide

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

View Slide

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
}
}

View Slide

Decorator
Canvas
ImageViews

View Slide

Metaballs
Decorator

View Slide

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

View Slide

LET’S CREATE A DRAWABLE…
android:shape="rectangle">

View Slide

LAYER DECORATOR
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”
/>

View Slide

LAYER DECORATOR

View Slide

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);

View Slide

FLY-IN DECORATOR

View Slide

FLY IN DECORATOR
@Override
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);
}
}

View Slide

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();
}

View Slide

FLY IN DECORATOR: XML
android:id="@+id/flyinhelper"
android:layout_height="match_parent"
android:background="#F00"
app:constraint_referenced_ids=“button1,button2,button3,
imageView,button4" />

View Slide

(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;
}
}

View Slide

CIRCULAR REVEAL
android:id="@+id/helper"
android:layout_width=“wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/lake"
app:constraint_referenced_ids="imageView"
/>

View Slide

CIRCULAR REVEAL
@Override
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;
}

View Slide

DECORATOR HELPERS
➤ Tag your views with behavior
➤ Encapsulate behavior
➤ Declaratively use them

View Slide

CL
2.0
VIRTUAL LAYOUTS

View Slide

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

View Slide

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

View Slide

LINEAR
android:id=“@+id/linear"
android:layout_width="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" />

View Slide

LINEAR

View Slide

android:id="@+id/textView"
android:layout_width="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" />

View Slide

LINEAR

View Slide

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

View Slide

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_height="wrap_content"/>

View Slide

REFERENCE BUTTONS
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"/>

View Slide

FLOW

View Slide

CL
2.0
LAYOUT MANAGEMENT

View Slide

MANAGING STATES

View Slide

STATE XML

android:id="@+id/small"
app:constraints=“@layout/layout_small” />
android:id="@+id/large"
app:constraints=“@layout/layout_large” />

View Slide

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);
}

View Slide

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;
}

View Slide

STATE XML : SIZE QUALIFIERS

app:constraints=“@layout/layout_small">
app:constraints="@layout/layout_small"
app:region_widthLessThan="550dp" />
app:constraints="@layout/layout_large"
app:region_widthMoreThan="450dp"/>

View Slide

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

View Slide

LIVE RESIZE

View Slide

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

View Slide

ANIMATED LIVE RESIZE (TRANSITION MANAGER)

View Slide

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

View Slide

CL
2.0
FLUENT API

View Slide

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

View Slide

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();

View Slide

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

View Slide

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)
CONSTRAINTS API…
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

View Slide

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

View Slide

THANKS!
Nicolas Roard & John Hoford
@camaelon @johnhoford

View Slide

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

View Slide

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

View Slide

ConstraintLayout 2.0 sneak peek

ConstraintLayout 2.0 sneak peek

Nicolas Roard

More Decks by Nicolas Roard

Other Decks in Programming

Featured

Transcript