ConstraintLayout view with width of 0dp disappears-CodePudding

I am trying to learn constraint layout by converting a list item from a linear relative layout. I have a checkbox and 3 text views arranged in a line followed by a recyclerview underneath.

Phone preview:

Tablet preview:

Code:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <CheckBox
        android:id="@ id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBaseline_toBaselineOf="@ id/line_item_qty"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@ id/line_item_qty"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingRight="8dp"
        android:textAppearance="?attr/textAppearanceBody2"
        android:textStyle="bold"
        app:layout_constraintBaseline_toBaselineOf="@ id/line_item_name"
        app:layout_constraintStart_toEndOf="@ id/checkBox"
        tools:text="5 x" />

    <TextView
        android:id="@ id/line_item_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:textAppearance="?attr/textAppearanceBody2"
        app:layout_constraintEnd_toStartOf="@ id/line_item_price"
        app:layout_constraintStart_toEndOf="@ id/line_item_qty"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Club sandwich with ranch dressing and extra mustard" />

    <TextView
        android:id="@ id/line_item_price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:textAppearance="?attr/textAppearanceBody1"
        app:layout_constraintBaseline_toBaselineOf="@ id/line_item_name"
        app:layout_constraintEnd_toEndOf="parent"
        tools:text="€4.50" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@ id/item_mods_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@ id/line_item_name"
        tools:itemCount="3"
        tools:listitem="@layout/item_line_modifier"
        tools:orientation="vertical" />


</androidx.constraintlayout.widget.ConstraintLayout>

As you can see the preview renders fine but when I run the code, the name of the item is gone (it's width needs to be 0dp, if it's wrap_content then on phones it just previews as one line of text and overlaps the qty and price text views).

Image from device (tablet):

Is it because I am aligning baselines to the name and the name itself has no bottom constraint?

CodePudding user response：

Add app:layout_constraintStart_toEndOf="line_item_name" to your line_item_price, so your price will be always come after your item name

    <TextView
        android:id="@ id/line_item_price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:textAppearance="?attr/textAppearanceBody1"
        app:layout_constraintBaseline_toBaselineOf="@ id/line_item_name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="line_item_name" //Add this
        tools:text="€4.50" />

CodePudding user response：

It's good that you are learning new things and trying to implement them. Below is the code that will give you your desired output.

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <CheckBox
            android:id="@ id/checkBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

        <TextView
            android:id="@ id/line_item_qty"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="8dp"
            app:layout_constraintTop_toTopOf="@ id/checkBox"
            app:layout_constraintBottom_toBottomOf="@ id/checkBox"
            app:layout_constraintStart_toEndOf="@ id/checkBox"
            android:textAppearance="?attr/textAppearanceBody2"
            android:textStyle="bold"
            tools:text="5 x" />

        <TextView
            android:id="@ id/line_item_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:textAppearance="?attr/textAppearanceBody2"
            app:layout_constraintEnd_toStartOf="@ id/line_item_price"
            app:layout_constraintStart_toEndOf="@ id/line_item_qty"
            app:layout_constraintTop_toTopOf="@ id/line_item_qty"
            app:layout_constraintBottom_toBottomOf="@ id/line_item_qty"
            tools:text="Club sandwich with ranch dressing and extra mustard" />

        <TextView
            android:id="@ id/line_item_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:textAppearance="?attr/textAppearanceBody1"
            app:layout_constraintTop_toTopOf="@ id/line_item_name"
            app:layout_constraintBottom_toBottomOf="@ id/line_item_name"
            app:layout_constraintEnd_toEndOf="parent"
            tools:text="€4.50" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@ id/item_mods_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@ id/checkBox"
            tools:itemCount="3"
            tools:listitem="@layout/item_line_modifier"
            tools:orientation="vertical" />


    </androidx.constraintlayout.widget.ConstraintLayout>

Do let me know if you have any queries on this.

Output :

CodePudding user response：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <CheckBox
        android:id="@ id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBaseline_toBaselineOf="@ id/line_item_qty"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@ id/line_item_qty"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingRight="8dp"
        android:textAppearance="?attr/textAppearanceBody2"
        android:textStyle="bold"
        app:layout_constraintBaseline_toBaselineOf="@ id/line_item_name"
        app:layout_constraintLeft_toRightOf="@ id/checkBox"
        tools:text="5 x" />

    <TextView
        android:id="@ id/line_item_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:textAppearance="?attr/textAppearanceBody2"
        app:layout_constraintRight_toLeftOf="@ id/line_item_price"
        app:layout_constraintLeft_toRightOf="@ id/line_item_qty"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Club sandwich with ranch dressing and extra mustard" />

    <TextView
        android:id="@ id/line_item_price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:textAppearance="?attr/textAppearanceBody1"
        app:layout_constraintBaseline_toBaselineOf="@ id/line_item_name"
        app:layout_constraintRight_toRightOf="parent"
        tools:text="€4.50" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@ id/item_mods_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@ id/line_item_name"
        tools:itemCount="3"
        tools:listitem="@layout/item_line_modifier"
        tools:orientation="vertical" />


</androidx.constraintlayout.widget.ConstraintLayout>

Use Left/Right instead of Start/End
Don't set horizontal constraint when you set as Match Parent.