android make left textview to be shorten and right remain fully visible

Question

I need to display two single-line TextViews horizontally. The left TextView (let's name it 1) may have a longer text which may shortened and finished with "...". The right text view (2) has a short text and should never get shortened.

I want the 1 to remain aligned to the left end of the parent. The 2 aligned to the right side of 1.

There are now 2 conditions that I have to meet

a) if the 1 has a short text then the 2 should get aligned to the right of 1 (none of the gets shortened).

b) but if the 1 has a too long text then the text of 1 should be shortened by '...' while the view 2 is moved maximally to the right of the parent but still remains fully visible (no ...)

My current solution is the following below. The scenario b) is fine with mine, but in case of a) the problem is that the view 2 is moved to the right side of the parent and the 1 to the left side - both are short and there's pretty much space in between which looks odd. I want 2 to move to the further left (next to 1) and leave this space on the right side.

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_marginTop="1dp"
    android:layout_weight="0.5">

    <TextView
        android:id="@+id/ns_in_txt"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:gravity="top|left"
        android:maxLines="1"
        android:singleLine="true"
        android:textColor="#00a2ff"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/ns_txt"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/ns_in_txt"
        android:gravity="top|left"
        android:maxLines="1"
        android:singleLine="true"
        android:textColor="#00a2ff"
        android:textSize="18sp" />
</RelativeLayout>

Answer 1

Try doing this

<RelativeLayout
     android:orientation="horizontal"
     android:layout_width="fill_parent"
     android:layout_height="wrap_context"
     android:layout_marginTop="1dp">

     <TextView
          android:id="@+id/ns_in_txt"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:layout_alignParentRight="true"
          android:gravity="left"
          android:maxLines="1"
          android:ellipsize="end"
          android:singleLine="true"
          android:textColor="#00a2ff"
          android:textSize="18sp" />

     <TextView
          android:id="@+id/ns_txt"
          android:layout_width="wrap_content"
          android:layout_height="match_parent"
          android:layout_alignParentLeft="true"
          android:layout_toLeftOf="@id/ns_in_txt"
          android:gravity="left"
          android:maxLines="1"
          android:singleLine="true"
          android:textColor="#00a2ff"
          android:textSize="18sp" />

</RelativeLayout>

Answer 2

May I suggest to use combination of LinearLayout and a little bit of coding. The idea is to have them side by side regardless of the size. and after the right textview is measured and laid out, set the max width of the left textview to whatever space left.

Here is the layout file, nothing special here:

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

    <TextView
        android:id="@+id/ns_in_txt"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:ellipsize="end"
        android:gravity="top|left"
        android:maxLines="1"
        android:singleLine="true"
        android:textColor="#00a2ff"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/ns_txt"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:ellipsize="none"
        android:gravity="top|left"
        android:maxLines="1"
        android:singleLine="true"
        android:textColor="#00a2ff"
        android:textSize="18sp" />

</LinearLayout>

and add some codes to the activity/fragment:

final TextView tvLeft = (TextView) findViewById(R.id.ns_txt);
final TextView tvRight = (TextView) findViewById(R.id.ns_in_txt);
ViewTreeObserver obs = tvRight.getViewTreeObserver();
obs.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
            @Override
    public void onGlobalLayout() {
        tvLeft.setMaxWidth(SCREEN_WIDTH - tvRight.getWidth());
    }
});

Answer 3

Apparently, you want two scenarios which require to set a different orientation to the parent layout: first horizontal, second vertical. Maybe I'm wrong (and I hope so but) in static xml, there will be difficult to do this.

Try the code below to test if I'm wrong:

Scenario 1: orientation horizontal = the text 1 is not big enough

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="1dp"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/textLong"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:ellipsize="end"
        android:singleLine="true"
        android:textColor="#00a2ff"
        android:textSize="18sp"
        android:text="This is a normal text not big" />

    <TextView
        android:id="@+id/textShort"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:singleLine="true"
        android:textColor="#00a2ff"
        android:textSize="18sp"
        android:text="short text" />

</LinearLayout>  

Scenario 2: orientation vertical = the text 1 is too big

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="1dp"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textLong"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:ellipsize="end"
        android:singleLine="true"
        android:textColor="#00a2ff"
        android:textSize="18sp"
        android:text="This is a biiiggg loooonnng teeeeexxxxxtttt" />

    <TextView
        android:id="@+id/textShort"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:singleLine="true"
        android:textColor="#00a2ff"
        android:textSize="18sp"
        android:text="short text" />

</LinearLayout>  

To resolved your issue, you can try 2 solutions.

First, try to create a maxLenght limit, which calculate in your Activity and change the parent orientation of the LinearLayout. Get the number of chars that you have and display the orientation as well.
Second, customise your own class extend TextView. And create a getWidth method which return the width of the long TextView in comparison to it parent and change the orientation.

Maybe the following questions/answers could be useful (I think there are not solutions but more as inspiration):
In Android how to get the width of the Textview which is set to Wrap_Content
Get the size of a text in TextView
How to find android TextView number of characters per line?
Auto Scale TextView Text to Fit within Bounds

---

EDIT:

I found a solution with the last url that I writed above. See this answer where the dev wanted to make the same as you. So he decided to create a autoresizable textview. Take a look here: Move two side by side textviews to be one under another if text is too long

I hope this will help you.