Best practice to fill horizontal width in ConstraintLayout android

Question

I need to make this design

Usually I create these kind of designs using LinearLayout but in this case its a list item so I don't want to use nested linearLayouts.

I want to create this design in a single ConstraintLayout. But I am unable to find any solution where I will be able to give most of horizontal space to ProductTitle and some width to image and stock button.

I know we provide weights in LinearLayout but how I can achieve this in ConstraintLayout in such way that if text is long enough then it should not override/misplace the stock button

Any help will be highly appreciated

Answer 1

if I understand your problem correctly what you want to achieve is something like this

example image

The code is the following:

<ImageView
    android:id="@+id/image1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_close_dark_grey"
    android:layout_marginStart="50dp"
    android:layout_marginTop="50dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<TextView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
    android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pretium, velit egestas fringilla congue, magna massa fringilla metus, nec fermentum nunc justo quis arcu. Aliquam erat volutpat"
    app:layout_constraintStart_toEndOf="@id/image1"
    app:layout_constraintEnd_toStartOf="@id/image2"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/image2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_close_dark_grey"
    android:layout_marginEnd="50dp"
    android:layout_marginTop="50dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

But you want to break the line and show dots. This is very easy: just add this two attributes to the TextView

android:lines="1"
android:ellipsize="end"

In this way you are saying to show only one line, while the ellipsis is used to show dots and break the text.