ConstraintLayout is used in the most detail to reduce nesting and optimize UI and improve app performance

Perhaps you threw out ConstraintLayout because it has too many attributes and too long, and you’re missing out on the big treasure.

Because in complex layouts, we will always use RelativeLayout and LinearLayout to nesting, because nested viewgroups will cause the phone to measure and draw many times, which will affect performance. If the nesting is serious, it may drop frames or get stuck.

Put ConstraintLayout to work. In a word: traditional layout can be achieved, it can be easily implemented. It can do what traditional layouts can’t.

First, why use it?

Here are two simple examples.

1.1, 1 case

We implement this with a RelativeLayout and ConstraintLayout, as shown below:

1.1.1. Using RelativeLayout, do the following

<RelativeLayout... > <TextView android:id="@+id/txt_a"
        android:layout_centerHorizontal="true". /> <RelativeLayout android:layout_alignTop="@+id/txt_a"
        android:layout_toLeftOf="@+id/txt_a"
        android:layout_alignBottom="@+id/txt_a". > <TextView android:layout_centerInParent="true"
            android:id="@+id/txt_b". /> </RelativeLayout> </RelativeLayout>Copy the code

I’m using pseudocode here to get rid of the attributes that don’t matter. Believe that those who understand understand. Here is a layer representation, as follows:

• The outermost layer is a RelativeLayout
• The red TextView_A is at the top and horizontally centered.
• Use A green RelativeLayout that is flush with A at the top and bottom to ensure that the green RelativeLayout is the same height as A. And it’s full screen, to the left of A
• The blue TextView_B is centered within the green RelativeLayout.

So how does ConstraintLayout work?

1.1.2. Implement ConstraintLayout as follows

<androidx.constraintlayout.widget.ConstraintLayout... > <TextView android:id="@+id/txt_a"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent". /> <TextView app:layout_constraintRight_toLeftOf="@+id/txt_a"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@+id/txt_a"
        app:layout_constraintBottom_toBottomOf="@+id/txt_a"
        android:id="@+id/txt_b". /> </androidx.constraintlayout.widget.ConstraintLayout>Copy the code

Let’s go ahead and look at the layer relationship, it’s really neat.

1.2, 2 cases

We implement this with a RelativeLayout and ConstraintLayout, as shown below:

In XML. We can’t do that with a RelativeLayout, as analyzed below

• Android :layout_below=”@+id/txt_a
• B should be vertically centered on the bottom border of A. So we need to know the height of B. Then use marginTop=”-height/2″ to achieve the effect. So you can’t do it in XML, you have to do it in code dynamically.

ConstraintLayout is easy to do:

<androidx.constraintlayout.widget.ConstraintLayout ... > <TextView android:id="@+id/txt_a"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent". /> <TextView app:layout_constraintRight_toRightOf="@+id/txt_a"
        app:layout_constraintLeft_toLeftOf="@+id/txt_a"
        app:layout_constraintTop_toBottomOf="@+id/txt_a"
        app:layout_constraintBottom_toBottomOf="@+id/txt_a"
        android:id="@+id/txt_b". /> </androidx.constraintlayout.widget.ConstraintLayout>Copy the code

The above is just a simple 2 small examples, actual combat in the complex layout, there are really too many benefits. So let’s talk more about it.

Explain the attributes of ConstraintLayout

2.1. Relative positioning

2.1.1 Example 1, as shown in figure 1: On the right

Realize the functions shown in the figure:

<TextView
    ...
    app:layout_constraintRight_toRightOf="parent"
    />
Copy the code

The layout_constraintRight_toRightOf attribute is also used with left, right, top, bottom, start, and end. What does that mean?

• The first Right represents the Right side of the control
• The second Right means to be to the Right of the target control.
• So the app: layout_constraintRight_toRightOf = “parent”; The right side of the red A is to the right of the parent container

Notice the start and end because reading habits are different in many countries. For example, we read from left to right. So start is left for us and end is right.

---

2.1.2 Example 2, as shown in figure 2: center

Realize the functions shown in the figure:

<TextView
    ...
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    />
Copy the code

The right is aligned to the right of the parent control, and the left is aligned to the left of the parent control. So you can center it horizontally, and you can center it vertically.

Notice it’s centered here. Margin can also be used to offset. You can also use the property layout_constraintHorizontal_bias=”0.5″, which is also fairly neutral. Same thing with the vertical property.

---

2.1.3 Example 3, as shown in figure: Full screen

For example, B should be to the right of A and centered up and down relative to A, and B should fill the remaining landscape:

<TextView
    app:layout_constraintLeft_toRightOf="@+id/txt_a"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="@+id/txt_a"
    app:layout_constraintBottom_toBottomOf="@id/txt_a"
    android:layout_width="0dp". />Copy the code

To fill the screen, set the width to 0dp. Then pass the following code:

• App: layout_constraintLeft_toRightOf = “@ + id/txt_a”; The left of B is aligned with the right of A
• App: layout_constraintRight_toRightOf = “parent”; The right side of B is aligned with the right side of the parent container

So B is to the right of A, and it fills the screen horizontally. Note: match_parent does not work in constraint layouts.

To make B vertical parallel to A, use the following code:

• App: layout_constraintTop_toTopOf = “@ + id/txt_a”; The top of B is aligned with the top of A
• App: layout_constraintBottom_toBottomOf = “@ id/txt_a”; The bottom of B is aligned with the bottom of A

So that puts B to the right of A, up and down.

---

2.1.4 Example 4, as shown in figure 4: No nesting centered

In lists we often encounter the requirement that A is an image, title is A title, and des is A description. To use A RelativeLayout, wrap the title and DES with A layout, center it and place it to the right of A.

ConstraintLayout uses three views instead of nesting. As follows:

<ImageView
    ...
    />


<TextView
    app:layout_constraintTop_toTopOf="@+id/image"
    app:layout_constraintBottom_toTopOf="@+id/txt_des"
    android:id="@+id/txt_title". /> <TextView app:layout_constraintTop_toBottomOf="@+id/txt_title"
    app:layout_constraintBottom_toBottomOf="@+id/image"* At this point you will notice that it is not centered yet because there is a constraint missing, title above des; android:id="@+id/txt_des". />Copy the code

In example 3, we already talked about how to center the title and des in full screen:

• Des is under the title. app:layout_constraintTop_toBottomOf=”@+id/txt_title”
• Align above title with above picture A; app:layout_constraintTop_toTopOf=”@+id/image”
• Align the bottom of des with the bottom of picture A; app:layout_constraintBottom_toBottomOf=”@+id/image”
• At this point you’ll notice that it’s not centered yet because there’s a constraint missing, title above DES; App :layout_constraintBottom_toTopOf=”@+id/ txT_DES “. This is a little different from RelativeLayout

---

There is also a property text baseline alignment that has the same effect as layout_alignBaseline within a RelativeLayout

• app:layout_constraintBaseline_toBaselineOf=”@+id/txt_a”

So we’re done with relative positioning.

2.2. Angle positioning

As shown in figure:

The implementation code is as follows:

<TextView
    android:id="@+id/txt_a". /> <TextView app:layout_constraintCircle="@+id/txt_a"; app:layout_constraintCircleAngle="90"
    app:layout_constraintCircleRadius="100dp"
    android:id="@+id/txt_b". />Copy the code

• App: layout_constraintCircle = “@ + id/txt_a”; B is positioned with respect to A
• App: layout_constraintCircleAngle = “90”; The positioning Angle is 90°
• App: layout_constraintCircleRadius = “100 dp”; The difference between center B and center A is 100DP

At this time I also want to have what use? I think it could be used for some custom views. For example, the circular menu, the realization of the clock is simpler. I’m going to animate the properties, and I’m going to do an effect and you get the idea. The recording is a little bit slow, the real machine will not..

2.3, margins

2.3.1, margin

Margin values must be accompanied by constraint attributes for them to work. What does that mean? To implement the function shown in the picture:

The code implementation is as follows:

<TextView
    android:id="@+id/txt_a". /> <TextView android:layout_marginLeft="20dp"
    app:layout_constraintLeft_toRightOf="@+id/txt_a"
    android:id="@+id/txt_b". />Copy the code

• For example, align app:layout_constraintLeft_toRightOf=”@+id/txt_a”, add margin to B
• If you add Android :layout_marginRight=”50dp” to A at this point, it won’t work. Keep in mind that

---

2.3.2, goneMargin

The goneMargin property is interesting. For example, to implement the following functions, see Figure 1–> Figure 2:

Figure 1 is as follows:

Figure 2 is as follows:

B should be placed on top when hiding A. Within A RelativeLayout, we just use Margin_Bottom=”20dp” inside A and then hide it. In ConstraintLayout, margin must be constrained, so the goneMargin attribute is used.

<TextView
    android:id="@+id/txt_a"
    android:visibility="gone". />When constrained controls are hidden, goneMargin takes effect, and B is placed at the top.
<TextView
    android:id="@+id/txt_b"
    app:layout_constraintTop_toBottomOf="@+id/txt_a"
    android:layout_marginTop="20dp"
    app:layout_goneMarginTop="0dp". />Copy the code

Size of 2.4,

ConstraintLayout, ConstraintLayout, has three sizes:

• Set a fixed dp value
• wrap_content
• 0dp (MATCH_CONSTRAINT), match_parent does not work. The match_parent effect can only be achieved with 0DP and constraints.

Against 2.4.1, full screen

For example, control A is full screen (as in 2.1.3).

It is implemented by the following code:

<TextView
    android:layout_width="0dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent". />Copy the code

---

2.4.2, layout_constraintWidth_max

The layout_constraintWidth_max attribute is used with the same fixed dp value as android:maxWidth=”100dp”.

But layout_constraintWidth_max can be used with the app:layout_constraintWidth_percent=”0.5″.

For example, we want the red area to be half the width of the parent container:

The implementation code is as follows:

<TextView
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_width="0dp"
    android:text=""
    app:layout_constraintWidth_max="wrap"
    app:layout_constraintWidth_percent="0.5". />Copy the code

When set this way, it means that the maximum width is half of the parent container. Note that when text=”” is empty, half of the parent container is displayed as shown in the figure. Suppose we set text=”A” as shown below, then only the width of A is displayed, but the maximum width is half of the parent container.

---

2.4.3, app: layout_constrainedWidth

App :layout_constrainedWidth=”true”; Instead of adding this property, the result looks like this:

The code looks like this:

<TextView
    android:id="@+id/txt_a". /> <TextView app:layout_constraintLeft_toLeftOf="@id/txt_a"
    app:layout_constraintRight_toRightOf="@id/txt_a"
    app:layout_constraintTop_toBottomOf="@+id/txt_a"
    android:id="@+id/txt_b"
    android:layout_width="wrap_content"
    android:text="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB". />Copy the code

Adding app:layout_constrainedWidth=”true” to txt_b results in the following:

That means that the maximum width of B is constrained by the width of A, and the thing to notice here is that the width of B is wrap_content. If this is 0dp, then this is the other case, which means that the width of B is the same width as the width of A.

---

2.4.4 layout_constraintDimensionRatio

App :layout_constraintDimensionRatio=”1:1″, note that two conditions must be met for this attribute to work:

• One of the sides is 0dp
• One of the edges is fixed or WRAP_content

For example, to implement the following, A square A:

The code is as follows:

<TextView
    android:id="@+id/txt_a"
    android:layout_width="0dp"
    android:layout_height="50dp"
    app:layout_constraintDimensionRatio="1". />Copy the code

2.5. Chains/constraints.

Refers to a plurality of controls in a direction of mutual restraint, the formation of a chain. (It’s not a linear layout yet, because it’s not weighted yet.)

The code is as follows:

<TextView
    android:id="@+id/txt_1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/txt_2". /> <TextView android:id="@+id/txt_2"
    app:layout_constraintLeft_toRightOf="@+id/txt_1"
    app:layout_constraintRight_toLeftOf="@id/txt_3". /> <TextView android:id="@+id/txt_3"
    app:layout_constraintLeft_toRightOf="@id/txt_2"
    app:layout_constraintRight_toRightOf="parent". />Copy the code

This creates a chain in the horizontal direction (and also in the vertical direction). In the first control of a chain, the chain header, we can add layout_constraintHorizontal_chainStyle to change the style of the chain

• Spread is what it looks like up here
• spread_inside

• packed

---

The width of the drop above is wrAP_content. If we set the width to 0DO and then add the weight to the layout_constraintHorizontal_weight attribute (again vertically), we have a linear layout. For example:

Code:

<TextView
    android:id="@+id/txt_1"
    android:layout_width="0dp"
    app:layout_constraintHorizontal_weight="2"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/txt_2". /> <TextView android:id="@+id/txt_2"
    android:layout_width="0dp"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@+id/txt_1"
    app:layout_constraintRight_toLeftOf="@id/txt_3". /> <TextView android:id="@+id/txt_3"
    android:layout_width="0dp"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@id/txt_2"
    app:layout_constraintRight_toRightOf="parent". />Copy the code

2.6 Auxiliary tools

2.6.1, Guideline,

Guideline is not displayed on the screen when the project is running, just like auxiliary. There is also no need to worry about performance loss, as there is no concrete implementation in its onDraw method. The properties of guideline are as follows:

• Android: Orientation =”vertical
• The next step is to determine the position of the auxiliary line by using the following 3 attributes. If multiple occurrences occur, only one of them will take effect. The weight is percentage > BEGIN > end

App :layout_constraintGuide_begin=”10dp” from the start of the parent layout, horizontal to the left, App :layout_constraintGuide_end=”10dp” from the end of the parent layout

For example, we used to write controls like the timeline. We can just do it with this guideline.

2.6.2, Barrier

Suppose we have three controls A,B, and C. If we have A variable width of A,B, and we want C to be to the right of A,B. If you wrap A and B in A layout and put C to the right of A and B, you will pass the Barrier if it does not resemble nesting, as shown in the following figure:

The implementation code is as follows:

<TextView
    android:id="@+id/txt_1". /> <TextView android:id="@+id/txt_2"
    app:layout_constraintTop_toBottomOf="@+id/txt_1". /> <androidx.constraintlayout.widget.Barrier android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="right"
    app:constraint_referenced_ids="txt_1,txt_2" />

<TextView
    android:id="@+id/txt_3"
    app:layout_constraintLeft_toRightOf="@+id/barrier". />Copy the code

Barrier properties include:

• App :barrierDirection=”right”, which direction is the barrier, in the picture is A and B right
• App :constraint_referenced_ids=”txt_1,txt_2″ is the id of the barrier reference, separated by a comma

Note that this is done to reduce layout nesting. I think nesting can be used flexibly when necessary.

2.6.3, Group

Control A, control B, which is nested by Layout Layout, we want to hide it by hiding the nested Layout Layout. In ConstraintLayout, with no layout nesting to hide A, B is implemented with A Group:

<androidx.constraintlayout.widget.Group
    android:visibility="gone"
    android:id="@+id/group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="txt_1,txt_2"
    />
Copy the code

2.6.4, Placeholder: small focus.

A lot of online data on this Placeholder than with. You’ll get a better idea of how to use Placeholder if you look at my introduction here.

Placeholder from the name, it means Placeholder. You can set up multiple placeholders in different locations on a page. And then we can change a view to move into our placeholder map directly with the setContentId code. What does that mean? See the picture below:

I’ve put 2 Placeholder in the interface. So we have 2 buttons that control which PlaceHolder the blue TextView is in.

• Mydb: placeholder1 = @@id /txt_blue @@id /txt_blue
• Notice that the blue textView still needs to be in XML.

<TextView
    android:id="@+id/txt_red". /> <androidx.constraintlayout.widget.Placeholder android:id="@+id/placeholder_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/txt_1"
    app:content="@+id/txt_blue"
    />

<TextView
    android:id="@+id/txt_green"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/placeholder_1". /> <androidx.constraintlayout.widget.Placeholder android:id="@+id/placeholder_2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


<TextView
    android:id="@+id/txt_blue"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content". />Copy the code

I didn’t write the 2 buttons on it and I understand everything. What about the code on the 2 buttons? Pay attention. This is probably because Google hasn’t solved this bug yet. So let me talk about it

• When you click on the button “In Position 2”, put the blue textView into placeholder, by showing off another product,
• So, notice that placeholder 1 still occupies the height of the blue textView.
• When you click “In Position 1,” we first remove the reference to a blue TextView for a project, using placeholder 2.setContentid (-1);
• So, because placeholder 1 has a reference to the previous blue TextView, it’s the same thing, but that setting will not work. Previous references must be clearly removed (as shown in the source code). Through placeholde_1. SetContentId (1);
• So, how about another product, how about another product, or how about another product, how about another product, how about another product, how about another product, how about another product, how about another product, how about another product? So that textView goes back to placeholder 1

The specific code is as follows:

findViewById(R.id.buttonPanel).setOnClickListener(v ->{
    placeholde_2.setContentId(R.id.txt_2);
});


findViewById(R.id.buttonPane2).setOnClickListener(v ->{
    placeholde_2.setContentId(-1);
    placeholde_1.setContentId(-1);
    placeholde_1.setContentId(R.id.txt_2);
});
Copy the code

---

So if at this point, we want to just Placeholder remove the blue TextView. We’re going to make Placeholder invisible as well. There is a way.

• Add attribute app:placeholder_emptyVisibility=”gone” to the Placeholder.
• Step 2: In addition to the above steps, we also need to match setContentId(-1) to achieve the effect.

See the effect:

The code implementation is as follows:

findViewById(R.id.buttonPanel).setOnClickListener(v ->{
    placeholde_1.setContentId(-1);
    placeholde_2.setContentId(R.id.txt_2);
});


findViewById(R.id.buttonPane2).setOnClickListener(v ->{
    placeholde_2.setContentId(-1);
    placeholde_1.setContentId(R.id.txt_2);
});
Copy the code

2.6.5, Layer

Layer what effect. For example, A, B and C are arranged in the figure, and A, B and C are wrapped with A black background to achieve the effect as shown in the figure:

The implementation is as follows:

<androidx.constraintlayout.helper.widget.Layer
    android:id="@+id/layer"
    android:background="# 000"
    app:constraint_referenced_ids="txt_a,txt_b,txt_c"
    android:padding="15dp". /> <TextView android:id="@+id/txt_a". /> <TextView android:id="@+id/txt_b". /> <TextView android:id="@+id/txt_c". />Copy the code

According to my actual test, Layer can completely replace the Group of 2.6.3, but cannot realize the function of Barrier.

2.6.6, Flow

Directly look at the picture, simple to achieve this grid layout:

The code is as follows:

<androidx.constraintlayout.helper.widget.Flow
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:flow_verticalGap="10dp"
    app:flow_wrapMode="aligned"
    app:flow_maxElementsWrap="4"
    app:constraint_referenced_ids="txt_1,txt_2,txt_3,txt_4,txt_5,txt_6" />

<TextView
    android:id="@+id/txt_1". /> <TextView android:id="@+id/txt_2". /> <TextView android:id="@+id/txt_3". /> <TextView android:id="@+id/txt_4". /> <TextView android:id="@+id/txt_5". /> <TextView android:id="@+id/txt_6". /> <TextView android:id="@+id/txt_7"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Seven"
    app:layout_constraintLeft_toLeftOf="@+id/txt_3"
    app:layout_constraintRight_toRightOf="@+id/txt_4"
    app:layout_constraintBottom_toBottomOf="@+id/txt_6"
    app:layout_constraintTop_toTopOf="@+id/txt_6". />Copy the code

You can do this without constraints. Txt_7 can be nested according to the Flow element constraints to achieve their desired style, here is not more introduced, interested friends can try to introduce the following attributes:

• App :flow_wrapMode=”aligned” has 3 values.

aligned	none	chain	chain2
Absolute alignment (i.e. how the grid is aligned)	By default, it will be in a row, and when the screen width is not enough, the two sides go out	A little bit different from absolute alignment, if you have six elements, four in the first row, two in the second row, those two elements will split the width of the landscape	This is similar to None, except that if there is not enough space, it will wrap other lines

• App :flow_maxElementsWrap=”4″ several elements in a row
• App :flow_verticalGap=”10dp” vertical spacing
• App :flow_horizontalGap=”10dp” horizontal spacing
• Android: Orientation =”horizontal
• App :flow_verticalAlign =”top” top, bottom, center, baseline Alignment of elements in each line
• App: flow_horizontalStyle = “spread | spread_inside | the packed” when wrapMode chain or ALIGNED to take effect
• App :flow_horizontalBias = “float” LOW Bias only applies if style is packed

2.6.7, ImageFilterButton/ImageFilterView

Very powerful controls, including rounded corners, image filters, etc. ImageFilterButton/ImageFilterView

Three, code dynamic modification constraints and animation implementation.

Let’s say I have a TextView in the upper left corner, and it’s centered. The code is as follows:

ConstraintSet constraintSet = new ConstraintSet();
// Clone a parent constraint. Constraint is the current parent
constraintSet.clone(constraint);
// r.id.txt_1 is horizontally centered relative to the parent layout
constraintSet.centerHorizontally(R.id.txt_1,ConstraintSet.PARENT_ID);
//R.id.txt_1 is vertically centered relative to the parent layout
constraintSet.centerVertically(R.id.txt_1,ConstraintSet.PARENT_ID);
constraintSet.applyTo(constraint);
Copy the code

Look at the following explanation, which may be even clearer:

// The top of meaning R.i.D.viiew1 is aligned with the top of r.I.D.viiew2
set.connect(R.id.view1, ConstraintSet.TOP, R.id.view2, ConstraintSet.TOP)

// This is equivalent to this line in XML layout
//app:layout_constraintTop_toTop="@+id/view2"
Copy the code

Constraintset.applyto () to animate the drawing, we simply add this code to interpret aintset.applyto () :

TransitionManager.beginDelayedTransition(constraint);
Copy the code

---

The above mentioned a code can be changed, and can be animated. Next, the constraint is added directly through two XML layouts, and then changed. Transform 2 layouts:

R.layout.constraint_activity_three layout is as follows:

The layout of r.layout. constraint_activity_four is as follows:

First we use r.layout.constraint_activity_three in our activity. Click the button to make the red TextView A and the blue button “click change.” Animate to style R.layout.constraint_activity_four. Click “Restore” and return to the original appearance. Note that the id of the element changing the constraint must be the same in both layouts, otherwise it will be invalid. Let’s look at the code implementation:

public class ConstraintLayoutSecondActivity extends AppCompatActivity {
    ConstraintLayout constraint;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.constraint_activity_three);
        constraint= findViewById(R.id.constraint);
        / / change
        findViewById(R.id.button_change).setOnClickListener(v ->{
            ConstraintSet constraintSet = new ConstraintSet();
            constraintSet.clone(ConstraintLayoutSecondActivity.this,R.layout.constraint_activity_four);
            TransitionManager.beginDelayedTransition(constraint);
            constraintSet.applyTo(constraint);
        });

        / / recovery
        findViewById(R.id.button_reset).setOnClickListener(v->{
            ConstraintSet constraintSet = new ConstraintSet();
            constraintSet.clone(ConstraintLayoutSecondActivity.this,R.layout.constraint_activity_three); TransitionManager.beginDelayedTransition(constraint); constraintSet.applyTo(constraint); }); }}Copy the code

The final result is as follows:

Four, MotionLayout

Want to achieve the following cool effect:

I found a tutorial on the B website, a detailed MotionLayout tutorial

It’s all done now. There will be updates and supplements later.