CODEWITHSUNDEEP
androidtextviewellipsis
Hesam
Hesam

Reputation: 53610

Android, How to limit width of TextView (and add three dots at the end of text)?

I have a TextView that I want to limit characters of it. Actually, I can do this but the thing that I'm looking for is how to add three dots (...) at the end of string. This one shows the text has continue. This is my XML but there is no dots although it limit my text.

<TextView 
        android:id                      = "@+id/tvFixture"
        android:layout_width            = "wrap_content"
        android:layout_height           = "wrap_content"
        android:layout_toLeftOf         = "@id/ivFixture_Guest"
        android:text                    = "@string/test_06"
        android:lines                   = "1"
        android:ems                     = "3"
        android:gravity                 = "right"
        style                           = "@style/simpletopic.black" 
        android:ellipsize="end"/>

Upvotes: 392

Views: 299830

Answers (25)

Kontick
Kontick

Reputation: 123

In this way you can set the maximum length of the view and, at the same time, you will have dots at the end ("num" is your number of dp):

android:maxWidth="{num}dp"
android:ellipsize="end"

Upvotes: 1

Preetam S Mailare
Preetam S Mailare

Reputation: 81

Steps to add '...' at end of the text if it is too long:

  1. check that the text width is constant
  2. add these two lines android:ellipsize="end" android:maxLines="1"

Complete code of textview in constraint layout:

<TextView
        android:layout_width="75dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:textSize="15sp"
        android:textAllCaps="false"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="parent" />

Upvotes: 8

Sana Ebadi
Sana Ebadi

Reputation: 7220

1.set static width like 7odp

2.use android:ellipsize="end"

3.use android:maxLines="1"

4.use android:singleLine="true"

<TextView
        android:id="@+id/tv_status"
        **android:layout_width="70dp"**
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/padding_8"
        android:gravity="center|center_horizontal"
        android:includeFontPadding="false"
        android:textColor="@color/black_2a"
        android:textSize="@dimen/text_size_1"
        **android:ellipsize="end"
        android:maxLines="1"
        android:singleLine="true"**
        app:layout_constrainedWidth="true"
        app:borrowStatusText="@{item.lenders[0].status}"
        app:layout_constraintEnd_toStartOf="@id/iv_vector"
        app:layout_constraintTop_toTopOf="parent" />

Upvotes: 0

Rahul Singh
Rahul Singh

Reputation: 168

set android:maxLength="8" in Textview

if you want to set yourString >5. then set textview length 5+3 (for three-dot)

if (yourString.length()>5) // 
    {
        textview.setText(yourString.substring(0,5)+"...");
    }
    else {
        textview.setText(title);
    }

Upvotes: 0

Fortran
Fortran

Reputation: 2336

Simple for three dots

android:layout_width="100dp" <!--your dp or match_parent or 0dp>
android:maxLines="2" <!--count your line>
android:ellipsize="end"

Upvotes: 2

Nekomajin42
Nekomajin42

Reputation: 692

Apart from

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

you should set

android:layout_width="0dp"

also know as "match constraint", because the wrap_content value just expands the box to fit the whole text, and the ellipsize property can't make its effect.

Upvotes: 2

KeTaN
KeTaN

Reputation: 722

You just change ...

android:layout_width="wrap_content"

Use this below line

android:layout_width="match_parent"

.......

   <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerVertical="true"
       android:layout_marginLeft="10dp"
       android:layout_marginTop="10dp"
       android:layout_toRightOf="@+id/visitBox"
       android:orientation="vertical" >

             <TextView
                  android:id="@+id/txvrequestTitle"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:singleLine="true"
                  android:text="Abcdefghighiklmnon"
                  android:textAppearance="? 
                  android:attr/textAppearanceLarge"
                  android:textColor="@color/orange_color" />

   </LinearLayout>

Upvotes: -1

kamran rahmatullah
kamran rahmatullah

Reputation: 35

        <TextView
            android:id="@+id/product_description"
            android:layout_width="165dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:paddingLeft="12dp"
            android:paddingRight="12dp"
            android:text="Pack of 4 summer printed pajama"
            android:textColor="#d2131c"
            android:textSize="12sp"
            android:maxLines="2"
            android:ellipsize="end"/>

Upvotes: 4

kyrylo
kyrylo

Reputation: 121

Use

  • android:singleLine="true"
  • android:maxLines="1"
  • app:layout_constrainedWidth="true"

It's how my full TextView looks:

    <TextView
    android:id="@+id/message_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="5dp"
    android:maxLines="1"
    android:singleLine="true"
    android:text="NAME PLACEHOLDER MORE Text"
    android:textColor="@android:color/black"
    android:textSize="16sp"

    android:textStyle="bold"
    app:layout_constrainedWidth="true"
    app:layout_constraintEnd_toStartOf="@id/message_check_sign"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintStart_toEndOf="@id/img_chat_contact"
    app:layout_constraintTop_toTopOf="@id/img_chat_contact" />

Picture of <code>TextView</code>

Upvotes: 12

Varad Mondkar
Varad Mondkar

Reputation: 1561

I am using Horizonal Recyclerview.
1) Here in CardView, TextView gets distorted vertically when using 

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

Check the bold TextViews Wyman Group, Jaskolski... enter image description here

2) But when I used singleLine along with ellipsize - 

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

Check the bold TextViews Wyman Group, Jaskolski... enter image description here

2nd solution worked for me properly (using singleLine). Also I have tested in OS version: 4.1 and above (till 8.0), it's working fine without any crashes.

Upvotes: 6

Khalid Taha
Khalid Taha

Reputation: 3313

you can do that by xml:

<TextView 
    android:id="@+id/textview"
    android:maxLines="1" // or any number of lines you want
    android:ellipsize="end"
    />

Upvotes: 0

Androwed
Androwed

Reputation: 443

In order to work with the android:ellipsize attribute, you have to limit the layout width of the TextView, such that the text is out of bounds from view of TextView.

So, android:layout_width attribute plays a key role here, set it accordingly.

One example can be:

<TextView        
    android:layout_width="120dp"
    android:layout_height="wrap_content"
    android:ellipsize="end"
    android:text="This is a very long text to be displayed"
    android:textSize="12sp"
    android:maxLines="1"            
     />

Now, here if the text in android:text="This is a very long text to be displayed" goes out of view from TextView with a android:layout_width="120dp", android:ellipsize="end" will truncate the text and place ...(3 dots) after it. i.e. This is very long... will be displayed in the TextView.

Upvotes: 4

Suragch
Suragch

Reputation: 512766

The following is what I learned by playing around with various options for forcing a TextView to a single line (with and without the three dots).

enter image description here

android:maxLines="1"

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:maxLines="1"
    android:text="one two three four five six seven eight nine ten" />

This just forces the text to one line. Any extra text is hidden.

Related:

ellipsize="end"

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:maxLines="1"
    android:ellipsize="end"
    android:text="one two three four five six seven eight nine ten" />

This cuts off the text that doesn't fit but lets users know that the text has been truncated by adding an ellipsis (the three dots).

Related:

ellipsize="marquee"

<TextView
    android:id="@+id/MarqueeText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:maxLines="1"
    android:singleLine="true"
    android:ellipsize="marquee"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:text="one two three four five six seven eight nine ten" />

This makes the text scroll automatically across the TextView. Note that sometimes it needs to be set in code:

textView.setSelected(true);

Supposedly android:maxLines="1" and android:singleLine="true" should do basically the same thing and since singleLine is apparently deprecated I would prefer not to use it, but when I take it out, the marquee doesn't scroll anymore. Taking maxLines out doesn't affect it, though.

Related:

HorizontalScrollView with scrollHorizontally

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/horizontalScrollView">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxLines="1"
        android:scrollHorizontally="true"
        android:text="one two three four five six seven eight nine ten" />
</HorizontalScrollView>

This allows the user to manually scroll to see the whole line of text.

Upvotes: 187

Phong Nguyen
Phong Nguyen

Reputation: 7117

The approach of @AzharShaikh works fine.

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

But I realize a trouble that TextView will be truncated by word (in default). Show if we have a text like:

test long_line_without_any_space_abcdefgh

the TextView will display:

test...

And I found solution to handle this trouble, replace spaces with the unicode no-break space character, it makes TextView wrap on characters instead of words:

yourString.replace(" ", "\u00A0");

The result:

test long_line_without_any_space_abc...

Upvotes: 2

SANJAY GUPTA
SANJAY GUPTA

Reputation: 1604

Add These two lines in your text

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

Upvotes: 1

Niranj Patel
Niranj Patel

Reputation: 33258

Try this property of TextView in your layout file..

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

Upvotes: 90

Mohammed Azharuddin Shaikh
Mohammed Azharuddin Shaikh

Reputation: 42026

Deprecated:

Add one more property android:singleLine="true" in your Textview

Updated:

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

Upvotes: 864

Mayank Bhatnagar
Mayank Bhatnagar

Reputation: 2191

You need to add following lines into your layout for the textview

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

Hope this works for you.

Upvotes: 4

TheLittleNaruto
TheLittleNaruto

Reputation: 8473

You can limit your textview's number of characters and add (...) after the text. Suppose You need to show 5 letters only and thereafter you need to show (...), Just do the following :

String YourString = "abcdefghijk";

if(YourString.length()>5){

YourString  =  YourString.substring(0,4)+"...";

your_text_view.setText(YourString);
}else{

 your_text_view.setText(YourString); //Dont do any change

}

a little hack ^_^. Though its not a good solution. But a work around which worked for me :D

EDIT: I have added check for less character as per your limited no. of characters.

Upvotes: 4

user1974433
user1974433

Reputation: 77

I got the desired result by using 

android:maxLines="2"
android:minLines="2"
android:ellipsize="end"

The trick is set maxLines and minLines to the same value... and Not just android:lines = "2", dosen't do the trick. Also you are avoiding any deprecated attributes.

Upvotes: 4

ruin3936
ruin3936

Reputation: 555

code:

TextView your_text_view = (TextView) findViewById(R.id.your_id_textview);
your_text_view.setEllipsize(TextUtils.TruncateAt.END);

xml:

android:maxLines = "5"

e.g.

In Matthew 13, the disciples asked Jesus why He spoke to the crowds in parables. He answered, "It has been given to you to know the mysteries of the kingdom of heaven, but to them it has not been given.

Output: In Matthew 13, the disciples asked Jesus why He spoke to the crowds in parables. He answered, "It has been given to you to know...

Upvotes: 5

Nayanesh Gupte
Nayanesh Gupte

Reputation: 2775

eg. you can use 

android:maxLength="13"

this will restrict texview length to 13 but problem is if you try to add 3 dots(...), it wont display it, as it will be part of textview length. 

     String userName;
     if (data.length() >= 13) {
            userName = data.substring(0, 13)+ "...";

     } else {

            userName = data;

    }
        textView.setText(userName);

apart from this you have to use

 android:maxLines="1"

Upvotes: 17

Jay Thakkar
Jay Thakkar

Reputation: 743

you can write this line in xml where you take the textview :

android:singleLine="true"

Upvotes: 3

Muz
Muz

Reputation: 5980

I take it you want to limit width to one line and not limit it by character? Since singleLine is deprecated, you could try using the following together:

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

Upvotes: 32

Vinay Kumar Baghel
Vinay Kumar Baghel

Reputation: 192

I think you give fix height and width of text view. Then your solution will work.

Upvotes: 3

Related Questions