How to prevent overlapping in view?

Question

I want to create a view like this.

The problem is, that when the TextView size is bigger, it looks like this.

So it overlaps "View all (35)" TextView. How to prevent the overlapping? The ImageView should be right of TextView, but it has not to overlap "View all (35)". I think you understand. Thank you.

Here's the xml file.

<RelativeLayout
    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="wrap_content">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:fontFamily="@font/montserrat_semi_bold"
        android:maxLines="1"
        android:layout_alignParentStart="true"
        android:textColor="@color/colorTextDark"
        android:textSize="@dimen/text_extra_large"
        tools:text="Birthday" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="16dp"
        android:layout_toEndOf="@+id/textView"
        android:src="@drawable/wishlist_public" />

    <TextView
        android:id="@+id/textViewAll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:fontFamily="@font/montserrat_semi_bold"
        android:text="View all (35)"
        android:layout_alignParentEnd="true"
        android:textColor="@color/colorTextPrimary"
        android:textSize="@dimen/text_small" />

</RelativeLayout>

Answer 1

Try to put your imageView to textView's drawableEnd property, after put it in nested linear layout and give to it a weight.

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableEnd="@drawable/imageView"
            android:layout_marginStart="16dp"
            android:maxLines="1"
            android:gravity="start|center"
            android:textSize="@dimen/text_extra_large"
            android:ellipsize="end"
            android:text="Your text here" />

        <Space
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </Space>

        </LinearLayout>

        <TextView
            android:id="@+id/textViewAll"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:gravity="end"
            android:layout_gravity="center_vertical"
            android:text="View All"
            android:textSize="@dimen/text_small" />
    </LinearLayout>