Why does TextView in single line elipsized with "end" show boxes?

Question

I'm using a TextView in Android, what I want to show 1 line in TextView ending with ". " but this give [] type box at the end. I don't know why? I just want to remvoe this box and only to show text ending with "... "

TextView shown box at end

Update code for the list_row.xml

<?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="85dp"
android:orientation="horizontal"
android:gravity="center_vertical"
android:cacheColorHint="#4C7B8D"
android:background="#4C7B8D">
<ImageView
    android:id="@+id/videoListImage"
    android:src="@drawable/audio_thumbnail60x60"
    android:layout_height="75dp"
    android:layout_alignParentLeft="true"
    android:layout_centerInParent="true"
    android:scaleType="fitXY"
    android:layout_width="75dp"
    android:padding="4dp"
    android:background="@color/light_gray" />
<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginRight="5dp"
        android:layout_toLeftOf="@+id/next_arrow"
        android:orientation="vertical"
        android:gravity="center_vertical"
        android:paddingLeft = "5dp">
        <TextView
            android:id="@+id/row_title"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:textColor="@color/app_background_color"
            android:textSize="18sp"
            android:ellipsize="end"             
            android:maxLines="1" />
        <TextView
            android:id="@+id/row_dis"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:textColor="@color/color_black"
            android:layout_marginRight="2dp"
            android:textSize="15sp"
            android:ellipsize="end"
            android:maxLines="1" />
        <TextView
            android:text="$7.50"
            android:id="@+id/audio_price_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16dp"
            android:textColor="@color/color_white"
            android:textStyle = "bold"
            android:paddingLeft = "12dp"
            android:paddingRight = "12dp"
            android:background="@drawable/blue_round_cornor_background" />
    </LinearLayout>
    <ImageView
        android:id="@+id/next_arrow"
        android:src="@drawable/next_arrow"
        android:layout_toLeftOf="@+id/saved_purchased"
        android:scaleType="fitXY"
        android:layout_height="25dp"
        android:layout_width="18dp"
        android:layout_centerVertical="true"
        android:visibility = "gone"/>
    <ImageView
        android:id="@+id/saved_purchased"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop ="true"
        android:scaleType="fitXY"
        android:layout_height="25dp"
        android:layout_width="25dp"
        android:layout_marginRight="2dp"/>
</RelativeLayout>

Here is the images of "next_arrow" enter image description here

Here is the code I am using the getView() in adapter.

  String discription = listData.getDescription();
    if (discription != null && discription.length() > 0) {
        if (textViewDis != null) {
            textViewDis.setTypeface(titleFont);
            Log.e("data", ""+discription);
            discription.replaceAll("\r\n", "");
            textViewDis.setText(discription);
        }
    }

Here is the actual String of description to be display.

Andrew and Stephanie Tidwell candidly share their success story in this business. This story will help everyone listening realize that no one is perfect, even in a second generation business. This is a streaming audio file.

Still have some issue? I can update question more.

I don't see any problem with your layout. Where does the value for your TextView come from? Is it possible that you get a carriage return / line feed sign attached to your string, somehow? — iDroid, Jun 27 '11 at 11:32
Oh yes that might be a problem... I want not considering it. How to resolve it? — Arslan Anwar, Jun 27 '11 at 11:47
Try to apply `String.replaceAll("\r\n", "")` to your String. — iDroid, Jun 27 '11 at 11:57

score 44 · Accepted Answer · answered Jun 27 '11 at 12:36

Quoting myself from one of my books:

Android's TextView class has the built-in ability to "ellipsize" text, truncating it and adding an ellipsis if the text is longer than the available space. You can use this via the android:ellipsize attribute, for example. This works fairly well, at least for single-line text. The ellipsis that Android uses is not three periods. Rather it uses an actual ellipsis character, where the three dots are contained in a single glyph. Hence, any font that you use that you also use the "ellipsizing" feature will need the ellipsis glyph.

Beyond that, though, Android pads out the string that gets rendered on-screen, such that the length (in characters) is the same before and after "ellipsizing". To make this work, Android replaces one character with the ellipsis, and replaces all other removed characters with the Unicode character 'ZERO WIDTH NO-BREAK SPACE' (U+FEFF). This means the "extra" characters after the ellipsis do not take up any visible space on screen, yet they can be part of the string.

However, this means any custom fonts you use for TextView widgets that you use with android:ellipsize must also support this special Unicode character. Not all fonts do, and you will get artifacts in the on-screen representation of your shortened strings if your font lacks this character (e.g., rogue X's appear at the end of the line).

Thank you very much sir for your time. I got it. But how to resolve this issue? Have you solve it? — Arslan Anwar, Jun 27 '11 at 12:45
@Arslan: Use a built-in font. Or, fix the font to contain the missing U+FEFF glyph. Or, use a font that already has this glyph. — CommonsWare, Jun 27 '11 at 12:46
@Manu-iAndyDev : Yes I change the font. You can use built in fonts as well. — Arslan Anwar, Dec 25 '13 at 07:22

score 6 · Answer 2 · edited Oct 27 '12 at 07:12

I have bumped into the same problem when was trying to use custom "MetaPro-Medium.otf" as font for TextView with a android:singleLine="true". The box at the end of the string was really annoying.

I found no way how to solve this problem in Android, but at the same time found following work around.

I have installed "FontLab Studio v5.04"
Opened my font
Selected one of symbols I was not going to use
Menu->Glyph->Rename Glyph
Changed the name and unicode index from it`s original value to "FEFF" (Thank CommonsWare)
Double click on selected symbol and then remove all lines this symbol was created from.
Menu->File->Generate Font->save as type otf

As a result I got updated font and problem gone away.

score 3 · Answer 3 · edited Aug 27 '13 at 15:31

Arslan, your layout is working fine in my case, I have tested the same with:

 <TextView
    android:id="@+id/row_title"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:singleLine="true"
    android:textSize="18sp"
    android:ellipsize="end"             
    android:maxLines="1"
    android:text="This is the demo testing demo testing This is the demo testing demo testing"/>

... and getting the exact output as you want "one line ended with ..." and box should be removed. So I think there may be a something wrong with any character or text you are setting.

Thanks for your time. Let me check it again. I this the ">" image then may be causing problem. — Arslan Anwar, Jun 27 '11 at 11:39

score 2 · Answer 4 · answered Jan 11 '13 at 10:29

2

I face the same issue (show boxes([])) for some special symbols when I try to show content which is coming from webservice url even, I don't use android:ellipsize. then I replace code from

textview.settext(content);

to

textview.settext(Html.fromHtml(content));

working fine.

answered Jan 11 '13 at 10:29

Krishna Prasad

693
1
6
19

Don' know why this isn't working for me. Is there any special time you set the textview is it in onCreate? – JPM May 28 '13 at 18:54

score 1 · Answer 5 · answered May 28 '13 at 19:35

1

Actually I was running into this issue and instead of changing the font or using setText I just added scrollHorizontally as false and it fixed the extra box character

android:singleLine="true"
android:scrollHorizontally="false"
android:ellipsize="end"

answered May 28 '13 at 19:35

JPM

9,077
13
78
137

It seems that this solution does not work after I recompiled. What does work is not to use ellipsize. The only way so far I have found to make this work is to edit the font. I don't have Fontlab Studio and can't afford $900. So I will remove it for now and make my own version of ellipsize later. – JPM May 30 '13 at 14:08

score 0 · Answer 6 · answered Aug 30 '13 at 15:03

0

There was a similar problem which i was facing in my project where in i was using a font type for the text view. few font types have these problem of making the ... appear as [] at the last. The problem would be solved if u try changing the font.

answered Aug 30 '13 at 15:03

khubaib

535
4
12

Why does TextView in single line elipsized with "end" show boxes?

6 Answers6

Linked