Setting up two text views next to each other using constraint layout so both views are visible

Question

I have the following XML views that show the price in a text view.

The one on the left/start is referred to a primary price view, while the one of the right/end is referred to as a secondary price view.

What I want to do is as follows:

1. I want the secondary price view to always be seen. Its end is anchored to the parent's end.
2. The width of the primary view will vary, but its end should always be at the start of the secondary view
3. The secondary view should always start next to the end of the primary view.

I am unable to do so, as you can see from the screenshot. How can I achieve this?

My layout uses constraint layout, and is shown as below

        <TextView
            android:id="@+id/primary_price_view"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="@id/body"
            app:layout_constraintTop_toBottomOf="@+id/body"
            app:layout_constraintStart_toEndOf="@+id/image"
            app:layout_constraintEnd_toStartOf="@id/secondary_price_view"
            app:layout_constraintHorizontal_bias="0"
            android:maxLines="2"
            android:ellipsize="end"
            android:textAppearance="?android:attr/textAppearanceMedium"
            />
        <TextView
            android:id="@+id/secondary_price_view"
            android:layout_marginStart="8dp"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_marginEnd="16dp"
            app:layout_goneMarginEnd="16dp"
            app:layout_constraintTop_toBottomOf="@+id/body"
            app:layout_constraintTop_toTopOf="@id/primary_price_view"
            app:layout_constraintStart_toEndOf="@id/dot"
            app:layout_constraintBottom_toBottomOf="@id/primary_price_view"
            app:layout_constraintVertical_bias="0"
            app:layout_constraintHorizontal_bias="0"
            app:layout_goneMarginStart="16dp"
            android:maxLines="1"
            android:ellipsize="end"
            android:visibility="gone"
            android:textAppearance="?android:attr/textAppearanceSmall"
            />

Answer 1

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content"
    android:orientation="vertical"
    android:background="@color/nonfullscreen_webview_background">

    <TextView
        android:id="@+id/primary_price_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="2"
        android:text="50.50 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ..."
        android:textAppearance="?android:attr/textAppearanceMedium"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/secondary_price_view"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/secondary_price_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="15%Off . $259.00"
        android:textAppearance="?android:attr/textAppearanceSmall"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0"
        app:layout_goneMarginEnd="16dp"
        app:layout_goneMarginStart="16dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

you can make a three text view and separate 15%off to $259.00

   <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/primary_price_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:maxLines="2"
            android:textColor="@color/Black"
            android:ellipsize="end"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="50.50"
            />
        <TextView
            android:id="@+id/secondary_price_view"
            android:layout_marginStart="8dp"
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_marginEnd="16dp"
            app:layout_goneMarginEnd="16dp"
            app:layout_constraintStart_toEndOf="@+id/primary_price_view"
            app:layout_constraintEnd_toStartOf="@+id/third_price_view"
            app:layout_constraintTop_toTopOf="@+id/primary_price_view"
            app:layout_constraintBottom_toBottomOf="@+id/primary_price_view"
            app:layout_goneMarginStart="16dp"
            android:maxLines="1"
            android:ellipsize="end"
            android:textColor="@color/Gray800"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="15%Off"
            />
        <TextView
            android:id="@+id/third_price_view"
            android:layout_marginStart="8dp"
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:layout_marginEnd="16dp"
            app:layout_goneMarginEnd="16dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_goneMarginStart="16dp"
            android:maxLines="1"
            android:ellipsize="end"
            android:textColor="@color/Gray800"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="$259.00"
            />
    </androidx.constraintlayout.widget.ConstraintLayout>