Setting Ellipsize on TextView reduces lines shown by one (instead of only ellipsizing last)

Question

when I am using TextView with singleLine="true" and ellipsize="end"(my top TextView), it works well

but in another TextView having more then 1 lines (in my case 3 lines in my bottom TextView), lines="3" and maxLines="3" and ellipsize="end", doesn't work properly.

When I DON'T put ellipsize="end" in tvDesc, it shows 3 line, which is OK. Here is code : XML :

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

    <ImageView
        android:id="@+id/imgv"
        android:layout_width="65dp"
        android:layout_height="80dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/img1"
        android:scaleType="fitXY" />

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/imgv"
        android:background="@android:color/white"
        android:textColor="@android:color/black"
        android:text="Title testing line number and ellipsize at end"
        android:maxLines="1"
        android:singleLine="true"
        android:ellipsize="end"    <---  WORKS WELL
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/tvDesc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvTitle"
        android:layout_toRightOf="@+id/imgv"
        android:layout_alignBottom="@+id/imgv"
        android:layout_alignParentRight="true"
        android:textSize="14dp"
        android:lines="3"
        android:maxLines="3"
                       <----------  WITHOUT ellipsize
        
        android:text="I wanna this textview of having 3 lines and ellipsize at END and at this time I am Testing for it. This TextView shows 3 lines WITHOUT ellipsize property, but shows only 2 Lines when ELLIPSIZE property is setted"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

Above code shows TextView tvDesc with 3 Lines and No-Ellipsize. Here is Image :

But, I wanna ellipsize, so I uses followin code : XML :

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

    <ImageView
        android:id="@+id/imgv"
        android:layout_width="65dp"
        android:layout_height="80dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/img1"
        android:scaleType="fitXY" />

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/imgv"
        android:background="@android:color/white"
        android:textColor="@android:color/black"
        android:text="Title testing line number and ellipsize at end"
        android:maxLines="1"
        android:singleLine="true"
        android:ellipsize="end"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/tvDesc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvTitle"
        android:layout_toRightOf="@+id/imgv"
        android:layout_alignBottom="@+id/imgv"
        android:layout_alignParentRight="true"
        android:textSize="14dp"
        android:lines="3"
        android:maxLines="3"
        android:ellipsize="end"    <------  WITH  ELLIPSIZE
        
        android:text="I wanna this textview of having 3 lines and ellipsize at END and at this time I am Testing for it. This TextView shows 3 lines WITHOUT ellipsize property, but shows only 2 Lines when ELLIPSIZE property is setted"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

Which shows TextView tvDesc with only 2 lines and Ellipsize,

which is not properly dezired UI, as Followin:

I wanna 3 lines in TextView tvDesc with ellipsize

CAN ANYONE HELP ME.?

Actinon

I think you are running into a known problem – Teammate

I dont know exactly why this is happenning. But if you want to go with ellipsize then you keep its none property instead of end. – Crumpler

Answer 1

This is by far the simplest solution I've found and am currently using in deployment. Let me know if you need any other assistance!

Oh and remember to remove the android:ellipsize tag in your XML since you will be using the bottom code to automatically ellipsize at the end of 3 lines.

TextView snippet;
snippet.setText("loren ipsum dolor loren ipsum dolor loren ipsum dolor loren ipsum dolor loren ipsum dolor loren ipsum dolor loren ipsum dolor loren ipsum dolor loren ipsum dolor loren ipsum dolor loren ipsum dolor loren ipsum dolor loren ipsum dolor loren ipsum dolor ")
ViewTreeObserver vto = this.snippet.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

    @Override
    public void onGlobalLayout() {
        ViewTreeObserver obs = snippet.getViewTreeObserver();
        obs.removeGlobalOnLayoutListener(this);
        if (snippet.getLineCount() > 3) {
            int lineEndIndex = snippet.getLayout().getLineEnd(2);
            String text = snippet.getText().subSequence(0, lineEndIndex - 3) + "...";
            snippet.setText(text);
        }
    }
});

Reena

This a good solution, but there is an easier and cleaner way, see my answer. – Halcomb

Thanks this worked for me but it would be a lot easier if maxLines and ellipsize worked together. – Indonesian

Is it possible to add this inside a CustomTextView object to wrap all this logic and avoid adding it to every setText ? – Belfort

This doesn't seem to work within a ListView. The listener is not triggered when list items are swapped out with new text. – Hairston

@Vishwa Patel It gives wrong value when using it with html in textview using HTML.fromHtml. Can you plz help to work it with HTML? – Japha

@Himanshu-HD, I've just tested at Android 5.0, Html.fromHtml works, but probably not in all cases. – Graze

To clarify: snippet is my pre-existing TextView, right? So in my case, if I'm getting TextView notes, I should use everything after the setText line and use notes in place of snippet? – Kattie

Answer 2

Just set android:maxLines and android:ellipsize.

<TextView
        android:id="@+id/tv_dua"
        android:ellipsize="end"
        android:maxLines="3"
        android:text="long text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

Aletheaalethia

Except it doesn't work on versions of Honeycomb. What I get is the textview sized to 2 lines, but you get the tops of the letters on the third line and no ellipsis. – Clematis

Somewhere around KitKat or Lollipop this started working correctly (I forget the exact API level). Before that it still limits to the correct maxLines but doesn't include the ellipsis too. Still, I think it's somewhat reasonable these days to live with this since it's a much simpler alternative to the manual string manipulation in code. – Ridings

Answer 3

Use the following to get a multiline textview with ellipsis on the last line :

android:maxLines="4"
android:ellipsize="end"
android:singleLine="false"

Replace 4 with the number of lines you want. Hope it helps !

Bainite

Answer 4

I tried it out with maxLines and ellipsize on Android 7 & 8.

android:maxLines="3"
android:ellipsize="end"

The preview shows 2 lines and on the third line "...".

But this seems to be a bug in the previewer.

On the device it just works fine, 3 lines with text, at the end of the third line "..."

Brueghel

Answer 5

Try it

tv.setSingleLine(false);
tv.setEllipsize(TextUtils.TruncateAt.END);
int n = 3; // the exact number of lines you want to display
tv.setLines(n);

refer Programmatically create TextView with ellipsis

Bernhardt

See the edit. I missed to add the two lines. tv.setSingleLine(false); and tv.setLines(n); – Bernhardt

Answer 6

Just use ellipsize combined with scrollHorizontally="true". Simple & clean.

It worked perfectly for me.

Billibilliard

This just makes it single line which you can already do with the singleLine property – Hairston

@AliGangji I don't think that was the case when I posted. Good to know – Halcomb

For me this solution works (Android 5.0) even for multiline TextView. But number of lines changes among TextViews (from 1 to maxLines). – Graze