ConstraintLayout officially stables released in 2017. If you don’t know about it, It’s a library that allows you to easily create user interfaces. I encourage you to use for flat hierarchies, which come in very handy for animations. It comes with a great UI builder that we have in Android Studio.
Helper Object
ConstraintLayout 1.1 gives the entire flexibility that you need to create your UI. It comes with the UI builder. One of the concepts that introduced in Constraintlayout 1.1 was the concept of helper object.
Helper Object is a Objects that can manipulate in the UI builder, that do not appear on your screen when you run the application, but essentially they help you create your UI.
Android Studio has support for them in the UI Builder. You can simply manipulate them and add the elements to those helper object in the component tree by dragging elements into them.
Those objects are not view groups. They only keep a reference to the views. We still keep the entire view tree very flat. They are just references, we can have one object being referenced in multiple helpers.
You can think about the helpers as a way of keeping a reference to a bunch of views. You can still get a flat hierarchy and the way we think about it is that a helper gives you a way of encapsulating a behavior.
ConstraintHelper
In 2.0 It going to expose those helpers as a ConstraintHelper class. You would be able to create your own helpers. It’s similar to what we have with custom views they will be present in Android Studio. You’ll be able to manipulate your own objects.
Three main categories for the helpers in 2.0
- Layout Manipulation: That is going to help you create a layout.
- Post-Layout Manipulation: That will apply something after the layout has been done. It kind of post-layout.
- Rendering or Decorating: Because helpers are views, can be viewed as well helpers that we can use to do some specific rendering, specific display.
Linear Helper
You knows to create a chain in ConstraintLayout 1 that will allow you to do exactly the same thing. But you will manipulate it a little bit linearly. The only difference is that you have all the features that chain providers you and the way you use them, it’s very easy.
<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"
/>
It’s a normal view. You can constraint that view itself, but the only thing you need to care here is that the list of IDs that you reference.
Flow
Another virtual layout that launched with 2.0 which essentially implements the FlexboxLayout semantis.Those objects are pretty useful.
Post Layout effects
One example of a post layout object is a Flying object. Let’s say that you want your objects on the first layout to fly in. You could simply reference this object with the flying decorator and that’s all. No code, it’s purely declarative.You just add that to your XML file, a reference that objects and it will animate on the first launch.
Layers
Layers allow you essentially a lot of things. It kind of allows you to consider a set of views and apply an operation to them. There’s a bunch of graphical operation that you can apply. You can also set it up so that it takes by default the bounds of the views that it references. You can use it to set up a background very easily in that way and those are use cases that we will expose.
You could use the layer a little bit like you would use layers in graphical photo editors to have a bunch of layers to specify your elements and when you are OK with those element’s constraints, you could lock that layer and be sure to not inadvertently modify them. It’s a very powerful helper.
Here’s a quick example on how it would look like by drawing a background around a bunch of buttons being referenced without having to set up the constraints manually. I can easily surround those objects with a background. We are still with a flat view tree.
Circular Reveal
Another useful decorator is a circular reveal. It actually does what it says. It’s the typical effect that you’ve been familiar with the material design.
The interesting thing here is that you’ll notice that it only applies to the element referenced. We have the row of buttons that are not referenced. The circular reveal did not apply to them. The interesting thing here as well is that we are not creating our own circular reveal. We are just using the normal circular reveal.
Decorators
On that same idea, we have decorators that are helpers that are to draw things and same things with reference views.
Lava lamp effect with those blobs moving around. The result of that effect will depend on the position of those blobs. The final rendering has to take into account all of them. That would normally be a very difficult effect to achieve.
You have a canvas like what you pant on. Image views that are sitting on top of that. They are normal image views. You can apply the usual things but we put their background to be transparent and then we use a decorator to draw the background. You can easily get an effect like that.
Bottom Panel Decorator
Another type of decorator that you use in your project is the bottom panel decorator. Let’s say that you have a layout like that you may have created by using a chain. If you’d like to set a background on those objects, and maybe change the colors. You can simply apply this decorator, reference those elements.
If you looking at the component tree in Android Studio you’ll notice that most have just views and just a bunch of helpers. There’s actually no code here.
ConstraintSet
You’ve been probably playing with ConstraintSets on the ConstraintLayout 1.1, which is a way of encapsulating an entire state for a layout.
If you switch between two of those states, you can animate them. In ConstraintLayout 1.1 those things is a little cumbersome. you have to create your layout, load those layouts manually,etc.
In 2.0 we’ll have a separate XML file that lets you specify states.
<ConstraintLayoutStates>
<State
android:id="@+id/small"
app:constraints="@layout/layout_small" />
<State
android:id="@+id/large"
app:constraints="@layout/layout_large" />
</ConstraintLayoutStates>
That layout has different representations, different states and you can associate that with different layouts.
@Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
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;
}
The way you would use them is simply by codding set description. You can then switch states simply by codding set states with the ID. One nice thing is that you can specify a region on when a specific constraint set is going to be applied.
<ConstraintLayoutStates>
<State
app:constraints="@layout/layout_small" >
<Constraints
app:constraints="@layout/layout_small"
app:regin_widthLessThen="500dp"
<Constraints
app:constraints="@layout/layout_large"
app:regin_widthLessThen="400dp"
</State>
</ConstraintLayoutStates>
Plugging that into onConfigurationChanged
@Override
public void onContentChanged() {
super.onContentChanged();
cl.setState(newConfig.screenWidthDp, newConfig.screenHeightDp);
}