views:

53

answers:

3

I want to have two TextView elements appear side by side (in a list item), one aligned to the left, one to the right. Something like:

|<TextView>               <TextView>|

(the | represent the screen's extremities)

However, the TextView on the left can have content that is too long to fit on the screen. In this case, I want to have it ellipsize but still show the entire right TextView. Something like:

|This is a lot of conte...<TextView>|

I have had numerous attempts at this, using both LinearLayout and RelativeLayout, and the only solution I have come up with is to use a RelativeLayout and put a marginRight on the left TextView big enough to clear the right TextView. As you can imagine, though, this is not optimal.

Are there any other solutions?

Final, LinearLayout solution:

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:orientation="horizontal"
    >
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:ellipsize="end"
        android:inputType="text"
        />
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="0"
        android:layout_gravity="right"
        android:inputType="text"
        />
</LinearLayout>

Old, TableLayout solution:

<TableLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="1"
    android:shrinkColumns="0"
    >
    <TableRow>
        <TextView android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:singleLine="true"
            />
        <TextView android:id="@+id/date"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:singleLine="true"
            android:ellipsize="none"
            android:gravity="right"
            />
    </TableRow>
</TableLayout>
+1  A: 

USe tablelayout and put both textbox in table row have a try . i didn't tried

ud_an
Thanks, that ultimately worked. I've edited the question to include the solution I found.
Felix
:) :) u welcom...
ud_an
A: 

Why don't you put a left margin on the right TextView? I'm using this approach for a

|<TextView>       <ImageButton>|

and it works.

Maragues
It may work for you because your `ImageButton` always has the same width. Mine varies, so it didn't work for me.
Felix
Glad the TableLayout worked for you :) This was a similar question with self-adjustable buttons http://stackoverflow.com/questions/3530182/linearlayout-text-wrap-problem-when-having-two-buttons-of-same-size-plus-one-stre/3530322
Maragues
+1  A: 

Just an idea, why don't you declare first in the xml layout the textview on the right and set its width as wrap content, android:layout_alignParentRight="true" and android:gravity="right". Then declare the textview on the left, set its width as fill parent, android:layout__toLeftOf={the id of the textview on the right} having RelativeView as the root view.

By declaring first the right textview, its required width will be computed first and occupy the view while the textview on the left will occupy the remaining space of the view.

I still have not tried this though it might give you some idea.

[Update]

I tried creating an xml resource layout... and it somehow works...

<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
  <TextView 
    android:id="@+id/right"
    android:layout_alignParentRight="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="right"
    android:text="right"
    >
  </TextView>
  <TextView 
    android:id="@+id/left"
    android:layout_alignParentLeft="true"
    android:layout_toLeftOf="@id/right"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:lines="1"
    android:singleLine="true"
    android:maxLines="1"
    android:text="too looooooooooong ofskgjo sdogj sdkogjdfgds dskjgdsko jgleft"
    >
  </TextView>
</RelativeLayout>
M.A. Cape
Just tried it, doesn't work. The reason for that is that `RelativeLayout` allows its children to overlap, so ultimately the left `TextView` appears "under" the right `TextView`.
Felix
I added a sample xml layout. Hope this is what you are looking for. cheers!
M.A. Cape
About the left `TextView` appearing "under" the right `TextView`, it won't happen if you specify the layout explicitly that it should be on the left of the right `TextView`. The attribute `android:layout_toLeftOf="@id/right"` will do the trick to achieve that. Hope this helps.
M.A. Cape
Interesting, thanks for your solution. However, I ultimately found a `LinearLayout`-based solution which works better (for me). I posted it in the question body.
Felix