What is Ellipsize in Android?

by

In simpler words, ellipsize in Android means to shorten the text to fit it inside the given view. A part of the text is replaced with three dots (…) or “ellipsis” to be exact.

You can see the official documentation for android:ellipsize here. The official documentation says:

If set, causes words that are longer than the view is wide to be ellipsized instead of broken in the middle. You will often also want to set scrollHorizontally or singleLine as well so that the text as a whole is also constrained to a single line instead of still allowed to be broken onto multiple lines.

You can use the following properties with ellipsize:

Ellipsize end

This will truncate your text from the end and put three dots at the end. 

XML

Set max lines to 1 and  set ellipsize to end.

    <TextView
        android:id=“@+id/textView”
        android:layout_width=“0dp”
        android:layout_height=“50dp”
        android:layout_marginStart=“8dp”
        android:layout_marginLeft=“8dp”
        android:layout_marginTop=“8dp”
        android:layout_marginEnd=“8dp”
        android:layout_marginRight=“8dp”
        android:text=“@string/long_text”
        android:maxLines=“1”
        android:ellipsize=“end” />

Java Code

First find the text view. Then setMaxLines to 1 and setEllipsize to TextUtils.TruncateAt.END. An import for android.text.TextUtils needs to be added.

        TextView textView=findViewById(R.id.textView);
        textView.setMaxLines(1);
        textView.setEllipsize(TextUtils.TruncateAt.END);

Ellipsize middle

This will keep the strating and ending of the text and place three dots in the middle. See the following screenshot:

XML

In  this you will have to set singleLine true instead of setting maxLines to 1. Setting maxLines to 1 can give strange results in some cases.

    <TextView
        android:id=“@+id/textView”
        android:layout_width=“0dp”
        android:layout_height=“50dp”
        android:layout_marginStart=“8dp”
        android:layout_marginLeft=“8dp”
        android:layout_marginTop=“8dp”
        android:layout_marginEnd=“8dp”
        android:layout_marginRight=“8dp”
        android:text=“@string/long_text”
        android:singleLine=“true”
        android:ellipsize=“middle” />

Java Code

To set it programatically, setSingleLine instead of maxLines to 1 and set the ellipsize to TextUtils.TruncateAt.MIDDLE. Make sure to add import for android.text.TextUtils.

        TextView textView=findViewById(R.id.textView);
        textView.setSingleLine();
        textView.setEllipsize(TextUtils.TruncateAt.MIDDLE);

Ellipsize start

This will keep the ending portion of your text and replace the strting part with three dots.

XML

Set singleLine to true and ellipsize to start.

    <TextView
        android:id=“@+id/textView”
        android:layout_width=“0dp”
        android:layout_height=“50dp”
        android:layout_marginStart=“8dp”
        android:layout_marginLeft=“8dp”
        android:layout_marginTop=“8dp”
        android:layout_marginEnd=“8dp”
        android:layout_marginRight=“8dp”
        android:text=“@string/long_text”
        android:singleLine=“true”
        android:ellipsize=“start” />

Java Code

Find the textView, set single line and then set the ellipsize to TextUtils.TruncateAt.START

        TextView textView=findViewById(R.id.textView);
        textView.setSingleLine();
        textView.setEllipsize(TextUtils.TruncateAt.START);

Ellipsize marquee

This is something different. There are no three dots involved in it. It will make your text automatically scroll across the screen horizontally.

XML

Set single line and ellipsize to marquee in XML.

    <TextView
        android:id=“@+id/textView”
        android:layout_width=“0dp”
        android:layout_height=“50dp”
        android:layout_marginStart=“8dp”
        android:layout_marginLeft=“8dp”
        android:layout_marginTop=“8dp”
        android:layout_marginEnd=“8dp”
        android:layout_marginRight=“8dp”
        android:text=“@string/long_text”
        android:singleLine=“true”
        android:ellipsize=“marquee” />

But the magic does not happen with XML only. You will have to set the textView as selected using java code.

        textView.setSelected(true);

Java Code

Instead of doing half thing from XML and half from java code, you can make your text scroll automaticaly accross the screen using java code only.

        TextView textView=findViewById(R.id.textView);
        textView.setSingleLine();
        textView.setEllipsize(TextUtils.TruncateAt.MARQUEE);
        textView.setSelected(true);

Make textView manually scrollable across the screen

The ellipsize marquee makes the text automaticaly scroll accross the screen but if you want to give the scrolling control to the user, you can put your texView inside a horizontalScrollView and set the textView’s scrollHorizontally property to true.

    <HorizontalScrollView
        android:layout_width=“match_parent”
        android:layout_height=“match_parent”
        android:layout_marginStart=“8dp”
        android:layout_marginLeft=“8dp”
        android:layout_marginTop=“8dp”
        android:layout_marginEnd=“8dp”
        android:layout_marginRight=“8dp”>

        <TextView
            android:id=“@+id/textView”
            android:layout_width=“wrap_content”
            android:layout_height=“match_parent”
            android:layout_marginStart=“8dp”
            android:layout_marginLeft=“8dp”
            android:layout_marginTop=“8dp”
            android:layout_marginEnd=“8dp”
            android:layout_marginRight=“8dp”
            android:text=“@string/long_text”
            android:scrollHorizontally=“true”/>
    </HorizontalScrollView>

Post Views: 7,411

3 thoughts on “What is Ellipsize in Android?”

      • I meant in code.
        how can the code understand if the text in textView is getting ellipsized?

        for e.g. in case of an ellipsized textView I want to show a ‘read more’ button. how can that be done?

        Reply

Leave a Comment