Android TextView ellipsize property example

Leave a Comment / Android, Beginner / By

This article is about how to work with Android TextView ellipsize property.

Android Ellipsize

Android TextView ellipsize property Causes words in the text that are longer than the view’s width to be ellipsized ( means to shorten text using an ellipsis, i.e. three dots …) instead of broken in the middle to fit it inside the given view.

Ellipsize property values

You can use the following values for ellipsize property:

Ellipsize end

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

XML

Set maxLines to 1 and set ellipsize to “end”

<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:ellipsize="end"
android:maxLines="1"
android:text="The quick brown fox jumps over the lazy dog."
android:textColor="@android:color/holo_red_dark"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
Kotlin Code

Find the textview. Then setMaxLines to 1 and setEllipsize to TextUtils.TruncateAt.END.

textView.ellipsize = TextUtils.TruncateAt.END
textView.maxLines = 1

Ellipsize start

This will keep the ending portion of your text and replace the starting 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="wrap_content"
android:layout_margin="20dp"
android:ellipsize="start"
android:singleLine="true"
android:text="The quick brown fox jumps over the lazy dog."
android:textColor="@android:color/holo_red_dark"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
Kotlin Code

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

textView.ellipsize = TextUtils.TruncateAt.START
textView.isSingleLine = true

Ellipsize middle

This will keep the starting and ending of the text and place three dots in the middle. 

XML

Set singleLine to true and ellipsize to “middle”.

<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:ellipsize="middle"
android:singleLine="true"
android:text="The quick brown fox jumps over the lazy dog."
android:textColor="@android:color/holo_red_dark"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
Kotlin Code

Find the textView, set singleLine to “true” set the ellipsize to TextUtils.TruncateAt.MIDDLE

textView.ellipsize = TextUtils.TruncateAt.MIDDLE
textView.isSingleLine = true

Ellipsize marquee

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

 

 

XML

Set singleLine to true and ellipsize to “marquee”

<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:ellipsize="marquee"
android:singleLine="true"
android:text="The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog."
android:textColor="@android:color/holo_red_dark"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

You will also have to set the textView as selected using kotlin code.

textView.isSelected = true
Kotlin Code

Instead of doing half thing from XML and half from kotlin code, you can make your text scroll automatically across the screen using kotlin code only.

textView.ellipsize = TextUtils.TruncateAt.MARQUEE
textView.isSingleLine = true
textView.isSelected = true

Make textView manually scrollable across the screen

The ellipsize marquee makes the text automatically scroll across the screen but if you want to give the scrolling control to the user, you can put your TextView inside a HorizontalScrollView and set the textView’s scrollHorizontally property to “true”.

<HorizontalScrollView
    android:id="@+id/hs_textview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:scrollHorizontally="true"
        android:text="The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog."
        android:textColor="@android:color/holo_red_dark"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</HorizontalScrollView>

Leave a Reply