Android TextView and Button side-by-side, ellipsize left TextView

Question

I have a left-aligned TextView and a right-aligned button side-by-side. I want the button to take up as much space as it needs on the right (depending on the text that goes in it) and the left text to fill as much as it can and ellipsize on any overflow.

|Long title that may or may not ellipsi... <Button with text>|

I've read and tried lots of other posts that seem to have similar problems, none of which have worked for me. I've tried both using a LinearLayout with weights as well as a RelativeLayout with layout_toLeftOf assigned, none of which is resulting in what I need.

This is my LinearLayout code (with unnecessary parts taken out) where I give the left TextView a layout_weight of 1 and the button a layout_weight of 0. This should give the right-side button all the space it needs and give the TextView the rest, but instead the left title stops showing up and the right button gets smushed to the side and cut off. I've tried replacing the widths of both the Text and button to 0dip as I've seen suggested, which doesn't change anything.

<LinearLayout
    android:layout_height="@dimen/title_bar_height"
    android:layout_width="fill_parent"
    android:orientation="horizontal">
  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:ellipsize="end"
      android:layout_gravity="left|center_vertical"
      android:gravity="left|center_vertical"
      android:textSize="22sp"
      android:lines="1"/>
  <include layout="@layout/action_buttons"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="0"/>
</LinearLayout>

Replacing the layout_weight of the TextView with 0 actually allows the right-side button to properly fit on the screen fully, but the left text still does not show up. If I have both layout_weights set to 0 for the TextView and button and I then change the TextView's width from 0dip to wrap_content, everything shows up but the button instead is squished to fill the remaining space (and the text inside is truncated).

Here is my attempt with a RelativeLayout:

<RelativeLayout
    android:layout_height="@dimen/title_bar_height"
    android:layout_width="wrap_content">
  <include layout="@layout/action_buttons"/>
  <TextView
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_gravity="center_vertical"
      android:layout_alignParentLeft="true"
      android:layout_toLeftOf="@layout/action_buttons"
      android:gravity="center_vertical"
      android:scaleType="center"
      android:textSize="22sp"
      android:ellipsize="end"
      android:lines="1"/>
</RelativeLayout>

Everything aligns fine and shows up, except that the left TextView (when it's too long) overlaps and appears on top of the button rather than truncating and ellipsizing. Shouldn't android:layout_toLeftOf"@layout/action_buttons" specify that the TextView should stay to the left boundary of the button?

I've tried seemingly everything I can find on this site related to this issue, and I still can't get a solution. Any help would be greatly appreciated!

Answer 1

This will do the trick for you:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="left|center_vertical"
        android:layout_weight="1"
        android:ellipsize="end"
        android:gravity="left|center_vertical"
        android:singleLine="true"
        android:text="Some really long textttttttttt tooooooooooo make the ellipsize work in the preview"
        android:textSize="22sp" />
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Text" />
</LinearLayout>

Here's what it looks like when run:

And again with a button with more text: