Make TextView to expand to fill container space (with multiple views) then truncate

Question

I have a layout where I have a two TextViews horizontally next to each other. What I am trying to achieve is a view where the second TextView is aligned to the right of the first, but if the TextView in the first gets too long it will truncate when the right edge of the right TextView hits the edge of the container. The text is set dynamically and can be of varying lengths.

A diagram of what I am trying to achieve is below (yellow = container, red box = second TextView): diagram

The code I have at the moment is below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:ellipsize="end"
        android:singleLine="true"
        android:textColor="@android:color/white"
        android:textIsSelectable="false"
        android:text="Test"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@id/textView1"
        android:background="@drawable/textView2Background"
        android:paddingBottom="2dp"
        android:paddingLeft="6dp"
        android:paddingRight="6dp"
        android:paddingTop="2dp"
        android:text="TextView2"
        android:textColor="@android:color/white"
        android:textSize="15sp" />

</RelativeLayout>

However, the first TextView is only truncating when it hits the end of the container, at which point the second TextView has been pushed outside it and is no longer visible.

Thanks

do you definitely need to use a textview for this? Have you explored the possibility of a spannable string? — AndroidEnthusiast, Sep 26 '14 at 14:00
Unfortunately the second TextView has a specific background which needs to be applied. I could turn it into an ImageView instead, but I would still be faced with the same issue — Michael, Sep 26 '14 at 14:12
You can give fixed width to first tetxview with singleline=true — Jatin, Sep 26 '14 at 14:13
No, unfortunately it's a specific image which has to be shown. Also @Jatin the text is dynamically set (updated question to include this) so I can't give it a fixed width — Michael, Sep 26 '14 at 14:16
you can divide that yellow background in 2 parts using weight. so your red textview reside in 2nd part. — Jatin, Sep 26 '14 at 14:18
But then the first TextView would not correctly adjust to fit the text? — Michael, Sep 26 '14 at 14:19
@AndroidEnthusiast would this be able to deal with my use case above? Where the image wouldn't go off the screen and the text before would be truncated? — Michael, Sep 26 '14 at 14:23
depending on the size of the image / device as well, it could go to the next line if it is too big. But it would still be visible. — AndroidEnthusiast, Sep 26 '14 at 14:26

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

You could use an ImageSpan, check out this previous question:

SpannableString with Image example

edited May 23 '17 at 10:26

Community

1
1

answered Sep 26 '14 at 14:24

AndroidEnthusiast

6,557
10
42
56

Unfortunately it has to all be on one line :( thanks for your help – Michael Sep 26 '14 at 15:43

score 0 · Accepted Answer · answered Sep 29 '14 at 09:39

I was able to solve this using the following layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:ellipsize="end"
        android:singleLine="true"
        android:textColor="@android:color/white"
        android:textIsSelectable="false"
        android:textSize="18sp" />

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="2dp">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/textView2Background"
            android:paddingBottom="2dp"
            android:paddingLeft="6dp"
            android:paddingRight="6dp"
            android:paddingTop="2dp"
            android:textColor="@android:color/white"
            android:textSize="15sp" />
    </FrameLayout>

</LinearLayout>

Make TextView to expand to fill container space (with multiple views) then truncate

2 Answers2