Convert LinearLayout to ConstraintLayout issue

Question

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

EDIT: According to the app state, different buttons will be visible.

What do I need to change so the ConstraintLayout will behave like the LinearLayout?

EDIT: I found a mistake in the ConstraintLayout (constraint references) 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 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 you are having a tough time switching an existing layout to ConstraintLayout, you can go ahead and try out Android Studio's internal design tools to help you with it. You can switch to Design tab and open up Component Tree window, right click on the element you want to convert and select Convert to ConstraintLayout.

Answer 2

As per this android documentation, You can use Weighted Chains for this functionality.

For anyone still looking for a solution, I guess.

Answer 3

You can easily convert any layout to a ConstraintLayout, just follow these directions:

1. Go to the design tab inside the layout editor of Android Studio
2. Open the Component Tree
3. Right click the LinearLayout (or other layout) you want to convert
4. Click on "Convert LinearLayout to ConstraintLayout"