Two TextViews sharing line left and right, fails when right text becomes too large

Question

I use a solution for an input field with the field description taking the left space and the value uses the right space. It normally works, but not if the right most text gets too wide. Then it is just laid out after the left most text instead of getting the "wrap_content" it asks for:

<LinearLayout 
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginLeft="20dp"
  android:layout_marginRight="20dp"
  android:layout_marginTop="20dp"
  android:background="@drawable/edittext_background"
  android:orientation="horizontal"
  android:padding="10dp">
    <TextView
      android:layout_width="0dp"
      android:layout_weight="1"
      android:layout_height="wrap_content"
      android:background="@null"
      android:ellipsize="end"
      android:singleLine="true"
      android:text="Make of car"
      android:textColor="@android:color/black"
      android:textSize="19dp"/>
    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@null"
      android:gravity="center_vertical|end"
      android:singleLine="true"
      android:text="Ford Focus 2.0 Gold edition with ..."
      android:ellipsize="end"
      android:textColor="@android:color/black"
      android:textSize="@dimen/edittext_value" />
</LinearLayout>

edittext_background:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/input_field_grey" />
    <corners android:radius="6dp" />
</shape>

Result is like this:

It works as intented, when the value text takes up more space than there is room for, just ellipsing the type text like this:

But if the value text is too wide, the type and value text ellipsis are disregarded and the entire text is just appended to the right like this:

My goal is that the value text takes up all the space and uses ellipsis to limit the text like this:

Does someone have a better solution?

Answer 1

Try removing the weight in textview and setting its width as wrap_content

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:background="#60000000"
android:orientation="horizontal"
android:padding="10dp">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@null"
    android:ellipsize="end"
    android:singleLine="true"
    android:text="Make of car"
    android:textColor="@android:color/black"
    android:textSize="19dp"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@null"
    android:ellipsize="end"
    android:gravity="center_vertical|end"
    android:maxLines="1"
    android:text="Ford Focus 2.0 Gold edition with huge amount getting sort out"
    android:textColor="@android:color/black"
    android:textSize="17sp"/>
</LinearLayout>

If this is not what you want, try using relativelayout with alignParentLeft and alignParentRight for the left and right textviews respectively. The android:layout_toLeftOf attribute prevents texts from overlapping:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:background="#60000000"
android:padding="10dp">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_toLeftOf="@+id/right_value"
    android:background="@null"
    android:ellipsize="end"
    android:maxLines="1"
    android:text="Make of car"
    android:textColor="@android:color/black"
    android:textSize="19sp"/>

<TextView
    android:id="@+id/right_value"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:ellipsize="end"
    android:gravity="center_vertical|end"
    android:maxLines="1"
    android:text="Ford Focus 2.0 Gold edition with huge amount getting sort out"
    android:textColor="@android:color/black"
    android:textSize="17sp"/>
</RelativeLayout>

Answer 2

You are using LinearLayout so simply use weights :) adding a weight as 1 to Ford Focus 2.0 Gold edition with ... ensures that it will always be shown in full no matter what is the screen size and the other TextView will simply take the remaining space :)

<LinearLayout 
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginLeft="20dp"
  android:layout_marginRight="20dp"
  android:layout_marginTop="20dp"
  android:background="@drawable/edittext_background"
  android:orientation="horizontal"
  android:padding="10dp">
    <TextView
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:background="@null"
      android:ellipsize="end"
      android:singleLine="true"
      android:text="Make of car"
      android:textColor="@android:color/black"
      android:textSize="19dp"/>

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@null"
      android:gravity="center_vertical|end"
      android:singleLine="true"
      android:text="Ford Focus 2.0 Gold edition with ..."
      android:ellipsize="end"
      android:textColor="@android:color/black"
      android:textSize="@dimen/edittext_value" 
      android:layout_weight ="1"/>
</LinearLayout>