Align end with element start relativelayout

Viewed 5358

I want my one textbox to only wrap content till the beginning of the next textbox.

Screenshot now:

enter image description here

and how I want it:

enter image description here

I was thinking I could set the width but it wouldn't display correctly on different size screens, I want it to end there so I can have it ellipses if the content goes out of the area.

Please help!

Layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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/cardView_item_assesment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:clickable="true"
android:focusable="true"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textView_title"
        android:layout_width="285dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:layout_marginEnd="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginTop="5dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:scrollHorizontally="true"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="30sp"
        tools:text="PlaceHolder" />

    <TextView
        android:id="@+id/textView_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="15sp"
        android:layout_margin="5dp"
        tools:text="2018/09/02" />

    <TextView
        android:id="@+id/textView_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView_date"
        android:layout_alignParentEnd="true"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="15sp"
        android:layout_margin="5dp"
        tools:text="09:00" />

    <TextView
        android:id="@+id/textView_total"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/editText_achieved"
        android:layout_below="@+id/textView_title"
        android:textColor="@color/colorPrimaryDark"
        android:layout_alignBaseline="@id/editText_achieved"
        android:textSize="20sp"
        android:layout_margin="5dp"
        tools:text="Total: 100" />

    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/editText_achieved"
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView_title"
        android:maxLines="1"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="20sp"
        tools:text="Result: 50" />

    <TextView
        android:id="@+id/textView_contribution"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView_total"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="20sp"
        android:layout_margin="5dp"
        tools:text="Weight: 25%"/>

    <TextView
        android:id="@+id/txtID"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible" />

</RelativeLayout>

2 Answers

add:

android:layout_alignParentLeft="true"
android:layout_toLeftOf="@+id/textView_date"

and set width to wrap_content in your first TextView

<TextView
        android:id="@+id/textView_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:layout_marginEnd="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginTop="5dp"
        android:layout_toLeftOf="@+id/textView_date"
        android:layout_alignParentLeft="true"
        android:ellipsize="end"
        android:maxLines="1"
        android:scrollHorizontally="true"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="30sp"
        tools:text="PlaceHolder" />

result

Use LinearLayout for this...

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="1"
    android:padding="10dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="text"
        android:layout_weight=".4"/>

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="12/12/1212"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="9:00"/>
    </LinearLayout>

</LinearLayout>

Result:

enter image description here

Related