Convert LinearLayout to ConstraintLayout Problem

Question

I am trying to convert a horizontal LinearLayout that has 4 buttons of the same size as ConstraintLayout . The problem is that when I set one or more buttons in android:visibility="gone" in LinearLayout , the rest of the buttons change to take up all the space (all will be the same size), and in ConstraintLayout buttons will be removed, but still take up space.

EDIT: Depending on the state of the application, various buttons will be displayed.

What do I need to change so that ConstraintLayout behaves like LinearLayout ?

EDIT: I found an error in ConstraintLayout (link restrictions), so I updated it and the images (the problem still exists).

LinearLayout xml:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:id="@+id/b1" android:text="B1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="50" /> <Button android:id="@+id/b2" android:text="B2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="50" android:visibility="gone" /> <Button android:id="@+id/b3" android:text="B3" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="50" /> <Button android:id="@+id/b4" android:text="B4" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="50" /> </LinearLayout> 

EDIT: ConstraintLayout xml:

 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/b1" android:text="B1" android:layout_width="0px" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/b2" app:layout_constraintTop_toTopOf="parent" app:layout_constraintHorizontal_weight="1" /> <Button android:id="@+id/b2" android:text="B2" android:layout_width="0px" android:layout_height="wrap_content" android:visibility="gone" app:layout_constraintLeft_toRightOf="@+id/b1" app:layout_constraintRight_toLeftOf="@+id/b3" app:layout_constraintTop_toTopOf="parent" app:layout_constraintHorizontal_weight="1" /> <Button android:id="@+id/b3" android:text="B3" android:layout_width="0px" android:layout_height="wrap_content" app:layout_constraintLeft_toRightOf="@+id/b2" app:layout_constraintRight_toLeftOf="@+id/b4" app:layout_constraintTop_toTopOf="parent" app:layout_constraintHorizontal_weight="1" android:layout_marginTop="0dp"/> <Button android:id="@+id/b4" android:text="B4" android:layout_width="0px" android:layout_height="wrap_content" app:layout_constraintLeft_toRightOf="@+id/b3" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintHorizontal_weight="1" /> </android.support.constraint.ConstraintLayout> 

Answer 1

You can easily convert any layout to ConstraintLayout simply by following these guidelines:

• Go to the design tab inside the Android Studio layout editor
• Open the component tree
• Right-click the LinearLayout (or other layout) that you want to convert.
• Click Convert LinearLayout to ConstraintLayout

Answer 2

You can probably change your layout to something like:

 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:id="@+id/b1" android:layout_width="0dp" android:layout_height="wrap_content" android:text="B1" app:layout_constraintBaseline_toBaselineOf="@+id/b3" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@+id/b3" tools:layout_constraintBaseline_creator="1" tools:layout_constraintLeft_creator="1" tools:layout_constraintRight_creator="1" /> <Button android:id="@+id/b2" android:layout_width="0dp" android:layout_height="wrap_content" android:text="B2" android:visibility="gone" app:layout_constraintBottom_toTopOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" tools:layout_constraintBottom_creator="1" tools:layout_constraintLeft_creator="1" tools:layout_constraintRight_creator="1" tools:layout_constraintTop_creator="1" /> <Button android:id="@+id/b3" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginEnd="128dp" android:layout_marginLeft="128dp" android:layout_marginRight="128dp" android:layout_marginStart="128dp" android:text="B3" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" tools:layout_constraintLeft_creator="1" tools:layout_constraintRight_creator="1" tools:layout_constraintTop_creator="1" /> <Button android:id="@+id/b4" android:layout_width="0dp" android:layout_height="wrap_content" android:text="B4" app:layout_constraintBaseline_toBaselineOf="@+id/b3" app:layout_constraintLeft_toRightOf="@+id/b3" app:layout_constraintRight_toRightOf="parent" tools:layout_constraintBaseline_creator="1" tools:layout_constraintLeft_creator="1" tools:layout_constraintRight_creator="1" /> </android.support.constraint.ConstraintLayout> 

If it’s difficult for you to switch your existing layout to ConstraintLayout , you can continue to work with Android Studio’s internal design tools to help you with this. You can go to the Design tab and open the Component Tree window, right-click the item you want to convert, and select Convert to ConstraintLayout.