How to end TextView with 3 dots by using maxLength

Question

I have a TextView in my layout which is wrap_content in layout_width. It is limited to maximum of 15 characters so I'm using maxLength.

I need to end this TextView with 3 dots (...) and it happens only when I give the layout_width a fixed size in dp, something that I don't want to do.

I know it is possible programmatically by trimming the string after the 15th character and then adding the 3 dots, but I prefer to do that by XML.

Any idea how to end the text with 3 dots and leave it wrap_content?

<TextView
    android:id="@+id/inbox_contactName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:lines="1"
    android:maxLines="1"
    android:ellipsize="end"
    android:singleLine="true"
    android:maxLength="15"
    android:textColor="#0670b4"
    android:textSize="16sp" />

see : http://stackoverflow.com/questions/1666736/android-textview-automatically-truncate-and-replace-last-3-char-of-string — HelmiB, Oct 02 '12 at 08:04
@Yaniv : you have try `android:ellipsize="marquee"` instead of `android:ellipsize="end"` ? — ρяσѕρєя K, Oct 02 '12 at 08:05
@HelmiB: It is not the same problem since there is no use there with maxLength. Anyway, I tried and it didn't solve it. Thanks — Yaniv, Oct 02 '12 at 08:12
how about setting the layout_width in sp? (15 x width of letter with font size 16sp) — Tamir Scherzer, Oct 02 '12 at 08:15
It's the same for me as giving it a dp width, can't do that. Thanks. — Yaniv, Oct 02 '12 at 11:02
@Ravi I didn't find any good solution for that, I've cut the string by code and not by XML. It is something that I didn't want to do, but no other choice. — Yaniv, Apr 18 '13 at 05:22
@Yaniv I had a similar requirement - posted my solution as an answer just incase. — Ravi, Apr 18 '13 at 17:49

score 79 · Answer 1 · edited Jul 27 '16 at 11:12

79

This will solve your problem, Use ellipsize Property in your XML Code

android:ellipsize="end" <!-- This makes the magic ... thing -->
android:maxEms="15" <!-- Limit of the Text -->
android:singleLine="true" <!-- In case if you want everything in one line -->

Edit: singleLine is deprecated. Use maxlines="1" instead.

edited Jul 27 '16 at 11:12

Ali Bdeir

4,591
9
46
101

answered Jan 01 '14 at 12:19

Kirk

4,604
2
27
54

I noticed today that `singleLine="true"` and `maxlines="1"` behave differently when used with `maxWidth` and `ellipsize` - for some reason it truncates more with `maxlines` - don't know why though. – NemoOudeis Nov 30 '16 at 06:14
8

@Kirk maxEms is not working for restricting the number of digits, whereas, using maxLength, doesn't show dots. – Narendra Singh Feb 04 '17 at 11:14
2

@king possibly deprecated. At the time of answering this question, It was a working solution. If anybody knows the latest patch to this, Kindly update my answer. – Kirk Feb 04 '17 at 11:23
Ems != number of characters – AlexAndro May 02 '18 at 13:50
@AlexAndro what's that dude? – Kirk May 02 '18 at 19:23
@Kirk Just an info! It seems to me that some people think is the same thing. – AlexAndro May 03 '18 at 08:44
This doesn't solve the problem, as `maxEms` limit the width to fixed value. It will work only if you are developin app for certain resolution, which is usually never. – Firzen May 01 '19 at 15:41
@Firzen Answer is targetted for the OP's question, not for you. In my answer, I didn't state what EMS does or how it behaves. Also, it's called EMS, not pixel limiter. You might be expecting a different answer to your question. Hope you understand the difference as well before you downvote. – Kirk May 06 '19 at 07:58

score 19 · Answer 2 · answered Jan 07 '15 at 09:52

You cannot use both maxLength and Ellipsize although you can define Maximum EMS see the example below

<TextView
        android:id="@+id/tv_hist_source_lang"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxEms="8"
        android:maxLines="1"
        android:text="TextView"
        android:textAppearance="?android:attr/textAppearanceMedium" />

It looks like this

Ravi · Answer 3 · 2014-01-10T15:47:17.137

18

I gather (from comment) that @Yaniv already solved it using code - but this is the right way to do it (with xml). May help other users who land here. Trick is to use both toleftof and torightof.

<RelativeLayout>
...
 <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:singleLine="true"
        android:layout_toRightOf="@id/some_element1"
        android:layout_toLeftOf="@id/some_element2"/>
...
<RelativeLayout>

edited Jan 10 '14 at 15:47

answered Apr 18 '13 at 17:47

Ravi

3,159
6
24
39

I only had to use `toLeftOf`. – theblang Jan 22 '14 at 18:56

score 13 · Answer 4 · answered Oct 20 '16 at 07:43

13

You can use

android:maxWidth="100dp"
android:maxLines="1"
android:ellipsize="end"

Only this works for me.

answered Oct 20 '16 at 07:43

Zhou Hongbo

499
5
13

score 7 · Answer 5 · answered Jan 01 '14 at 11:47

7

use this android:ellipsize="end"

answered Jan 01 '14 at 11:47

Mahmoud Hashim

552
5
13

score 4 · Answer 6 · answered Aug 22 '15 at 12:38

4

One of the easiest way is to add Right Padding + Ellipsize

<TextView
            android:id="@+id/txtvw_contentcell_subhead"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Polem sampler, Lorem Ipsum golep tolem burop yemit noski"
            android:ellipsize="end"
            android:maxLines="1"
            android:textColor="@color/caption_black_color"
            android:textSize="@dimen/caption_size"
            android:paddingRight="40dp"/>

Here is an example Subtitle Text with char limit.

answered Aug 22 '15 at 12:38

Enzokie

7,079
6
28
39

When i am using android:maxLines="3" then how it is possible in end line of text see "..." ? – Praveen Kumar Verma Apr 30 '16 at 14:49
@PraveenKumarVerma sorry I dont get your question, can you add more details. Thankyou – Enzokie Apr 30 '16 at 14:51
I mean, I have TextView in set 3 lines of text and last 3rd line set "..." dotted. – Praveen Kumar Verma Apr 30 '16 at 21:12
@PraveenKumarVerma I believe it will work, the 3 dots only appears if the text overflow otherwise it will not. In my example I have only 1 line and my text seems too long for it, so a 3 dots appears. – Enzokie May 01 '16 at 01:37
yes I am trying solved my problem. Thanks neferpitou. – Praveen Kumar Verma May 01 '16 at 12:58
You should probably use paddingEnd instead of paddingRight to account for right-to-left languages. But otherwise great suggestion, this is what I wanted. :) – Tony Wickham Aug 10 '17 at 17:24

Benjamin Livinus · Answer 7 · 2018-12-20T09:48:43.747

1

Very Important: ellipsize = "end" only works when maxLength is set to a value that is more than the number of characters on one line. You can use wrap_content if you align the TextView's end and start to any other view(s).

edited Dec 20 '18 at 09:48

answered Aug 23 '17 at 13:42

Benjamin Livinus

29
3

score 1 · Answer 8 · answered Jan 25 '20 at 00:18

1

Tried most of the solutions above. Using maxWidth was the key for me:

android:maxWidth="100dp"
android:maxLines="1"
android:ellipsize="end"

answered Jan 25 '20 at 00:18

John T

455
6
16

score 0 · Answer 9 · answered Feb 24 '14 at 12:03

I needed to do this with Radio Button and I wanted to limit the size to one line. When I used Android:singleline="true", radio button's check circle disappeared. Here's the code that finally worked:

android:ellipsize="end"
android:maxLines="1"

There's no need to set ems. This will probably work also in TextView and other UI components. Hope this helps to someone.

score 0 · Answer 10 · answered Apr 06 '17 at 21:39

0

You can just modify the String when it's length is above 20 to add the ellipsize.

answered Apr 06 '17 at 21:39

Horatio

1,405
1
16
26

score -1 · Answer 11 · answered Apr 23 '13 at 13:52

-1

remove the line from xml

android:lines="1"
        android:maxLines="1"

answered Apr 23 '13 at 13:52

Muhammad Aamir Ali

18,753
9
62
54

How to end TextView with 3 dots by using maxLength

11 Answers11

Linked