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!

With your `RelativeLayout` attempt, have you tried `android:layout_width="wrap_content"` to prevent the `TextView` from overlapping the `Button` when the text is long? — Squonk, May 30 '12 at 18:53
Yes, both android:layout_width="wrap_content" and android:layout_width="fill_parent" for the TextView give the same overlap problem. — socoho, May 30 '12 at 19:08
I've been trying for about 30 minutes now in the eclipse layout editor and I can't find an answer - but then again layouts aren't my strongest point. If you haven't solved it in 48 hours, add a comment here starting with @MisterSquonk and it should alert me - I'll put a bounty on the question to see if it attracts any layout gurus. It takes 48 hours before a question is eligible for a bounty though. — Squonk, May 30 '12 at 20:36
@Connie, see my answer below, I believe it does what you were looking for. Let me know if it's not what you need. — Barak, May 31 '12 at 14:06
You can use this [solution](http://stackoverflow.com/questions/40410786/constraintlayout-chains-and-text-ellipsis-image-on-the-right/43414504#43414504). RelativeLayout and negative margin — Dmitry, Apr 14 '17 at 15:31

score 20 · Accepted Answer · answered May 31 '12 at 04:54

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: Shorter Button

And again with a button with more text: Longer Button

Thank you so much! This works :) it turns out the main thing causing my problem was from the custom button I'm using. — socoho, May 31 '12 at 21:40
Note, with this solution the button is always right-aligned... still trying to find a solution where the right element moves left to stay next to the text if the text is small — Thymine, Nov 16 '15 at 18:30
@Thymine, did you manage to achieve that? Do you mind sharing how you did it please? — Rat-a-tat-a-tat Ratatouille, Jul 01 '19 at 16:47

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

1 Answers1