display Full width textview with look like another textview inside that constraint Layout

Question

I want to display view like above.I know its very simple one but I want to know in constraint layout what would be best approach? I have added below constraints.If test text string should be long then it should not go beyond the arrow icon.

        <?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"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
    // test textview
            <TextView
            android:id="@+id/item_title"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_toStartOf="@id/item_accessory"
            android:background="@color/error_red"
            android:paddingEnd="40dp"
            android:text="test"
            android:gravity="center"
            android:textColor="@android:color/white"
            app:layout_constraintTop_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

// Arrow icon
     <com.wrx.wazirx.views.custom.TextViewPlus
            android:id="@+id/item_accessory"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/icon_arrowhead_right"
            android:textColor="?attr/colorLabel"
            android:textSize="24sp"
            android:layout_marginVertical="@id/item_title"
            android:layout_marginEnd="25dp"
            android:visibility="visible"
            app:layout_constraintTop_toTopOf="@id/item_title"
            app:layout_constraintBottom_toBottomOf="@id/item_title"
            app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Let me know what wrong am doing and what is the best approach.

Answer 1

There are a couple of ways to do what you are asking. Take a look at ConstraintLayout chains for a way to place views side-by-side with constraints. In the XML below, I have replaced you custom view with a simple view but the concept works with either.

<androidx.constraintlayout.widget.ConstraintLayout 
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/item_title"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_toStartOf="@id/item_accessory"
        android:background="@color/error_red"
        android:gravity="center"
        android:paddingEnd="40dp"
        android:text="This is some long text for the button This is some long text for the button"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <View
        android:id="@+id/item_accessory"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginVertical="@id/item_title"
        android:background="@drawable/ic_baseline_arrow_forward_ios_24"
        android:layout_marginEnd="16dp"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="@+id/item_title"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/item_title" />
</androidx.constraintlayout.widget.ConstraintLayout>

With short text:

and longer text: