Show three dots when TextView is too long

Question

One would think that showing three dots in 2019 at the end of string will be easy, but the opposite seems to be true. I have tried:

maxLines="1"
drawablePadding="10dp"
ellipsize="end"
ellipsize="marquee"
singleLine="true"
layout_width="match_parent"
layout_width="wrap_content"

I went through dozens of questions here at stackoverflow, but it just doesn't work.

My layout file is quite simple:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/dialog_nearest_charger"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minHeight="40dp"
    android:orientation="horizontal"
    android:weightSum="10">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:minWidth="55dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/itemChargerDistance"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textColor="@color/colorCoarseDistance"
            android:textStyle="bold"
            android:textSize="20sp"
            android:text="1.2" />

        <TextView
            android:id="@+id/itemChargerUnits"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textSize="12sp"
            android:text="miles" />

    </LinearLayout>

    <ImageView
        android:id="@+id/itemChargerOperator"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:minWidth="40dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/dot_cpo_cps_copy_5" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="7dp"
        android:layout_weight="2"
        android:drawablePadding="10dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/itemChargerTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawablePadding="10dp"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="Kinross Park and Ride"
            android:textSize="18sp"
            android:textStyle="bold" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/itemChargerAddress"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginStart="5dp"
                android:textSize="14sp"
                android:text="Junction Road" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

All I need is to show three dots when TextView itemChargerTitle overflows. So far none of the solutions I found worked even in Android Studio preview.

just specify an height that is different from wrap_content. otherwise, the widget will always adapt and never ellipsize the text inside it — Gregorio Palamà, May 29 '19 at 09:56
Added `android:ellipsize="end" android:maxLines="1"` and it works for me. — Arun, May 29 '19 at 09:56

score 0 · Answer 1 · answered May 29 '19 at 09:56

Try this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/dialog_nearest_charger"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minHeight="40dp"
    android:orientation="horizontal"
    android:weightSum="10">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="55dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/itemChargerDistance"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textColor="@color/colorPrimary"
            android:textStyle="bold"
            android:textSize="20sp"
            android:text="1.2" />

        <TextView
            android:id="@+id/itemChargerUnits"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:textSize="12sp"
            android:text="miles" />

    </LinearLayout>

    <ImageView
        android:id="@+id/itemChargerOperator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="40dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/ic_launcher_background" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginStart="7dp"
        android:layout_weight="8"
        android:orientation="vertical">

        <TextView
            android:id="@+id/itemChargerTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:singleLine="true"
            android:maxLines="1"
            android:text="Kinross Parkcvcxvxcgjghjhjhjvxcvcvcvcvcv and Ride"
            android:textSize="18sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/itemChargerAddress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:textSize="14sp"
            android:text="Junction Road" />

    </LinearLayout>

</LinearLayout>

OUTPUT

score 0 · Answer 2 · answered May 29 '19 at 10:01

Please try this. I've updated width as 0dp. When you are using android:layout_weight make sure you are using android:layout_width="0dp" and total of all child layout_weight is 1 or 10. That means 100% width.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dialog_nearest_charger"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorWhite"
    android:minHeight="40dp"
    android:orientation="horizontal"
    android:weightSum="10">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/itemChargerDistance"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="1.2"
            android:textColor="@color/colorCoarseDistance"
            android:textSize="20sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/itemChargerUnits"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="miles"
            android:textSize="12sp" />

    </LinearLayout>

    <ImageView
        android:id="@+id/itemChargerOperator"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/dot_cpo_cps_copy_5"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginStart="7dp"
        android:layout_weight="8"
        android:drawablePadding="10dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/itemChargerTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawablePadding="10dp"
            android:ellipsize="end"
            android:lines="1"
            android:maxLines="1"
            android:padding="@dimen/ten_dp"
            android:text="Kinross Park and Ride"
            android:textSize="18sp"
            android:textStyle="bold" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/itemChargerAddress"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_weight="1"
                android:text="Junction Road"
                android:textSize="14sp" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

score 0 · Answer 3 · answered May 29 '19 at 10:02

Your TextView shows three dots at the end but you can't see it, because your layout is beyond the edges of the screen. Change it's parent layout android:layout_weight to 8 to match the container android:weightSum=10 and you will see your dots.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/dialog_nearest_charger"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="40dp"
android:orientation="horizontal"
android:weightSum="10">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:minWidth="55dp"
    android:layout_weight="1"
    android:orientation="vertical">

    <TextView
        android:id="@+id/itemChargerDistance"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textColor="@color/colorCoarseDistance"
        android:textStyle="bold"
        android:textSize="20sp"
        android:text="1.2" />

    <TextView
        android:id="@+id/itemChargerUnits"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="12sp"
        android:text="miles" />

</LinearLayout>

<ImageView
    android:id="@+id/itemChargerOperator"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:minWidth="40dp"
    android:layout_weight="1"
    app:srcCompat="@drawable/dot_cpo_cps_copy_5" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginStart="7dp"
    android:layout_weight="8"
    android:drawablePadding="10dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/itemChargerTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawablePadding="10dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="Kinross Park and Ride"
        android:textSize="18sp"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/itemChargerAddress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginStart="5dp"
            android:textSize="14sp"
            android:text="Junction Road" />
    </LinearLayout>
</LinearLayout>

score 0 · Answer 4 · answered May 01 '21 at 09:47

TextView has the property of ellipsize you can use like this

<TextView
  android:id="@+id/topicName"
  android:layout_width="50dp"
  android:layout_height="wrap_content"
  android:layout_marginStart="10dp"
  android:layout_marginTop="10dp"
  android:layout_marginEnd="10dp"
  android:maxLines="1"
  android:ellipsize="end"
  android:text="Very long long long long text"
  android:textColor="@color/black"
  android:textSize="16sp" />

it will show this text like this Very long long long long...

Show three dots when TextView is too long

4 Answers4