Handle Overflowing Text in TextView

Question

I have a layout where I show some amount next to person's name. I have set it in LinearLayout and provided weigh to put it exactly when laied out in list. But if my amount value goes larger, it splits into the 2 row which I don't want. If amount is large, name should be shrink to show full amount.

It looks like this when amount is small:

My layout file is below:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:paddingBottom="5dp"
    android:paddingTop="5dp">

    <ImageView
        android:id="@+id/contact_image"
        style="@style/ContactImageView.ExtraSmall"
        app:contactBadge="@{contact}" />

    <TextView
        android:id="@+id/contact_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_weight="3"
        android:gravity="left"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="@{contact.name}"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/colon" />

    <TextView
        android:id="@+id/amount"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="end"
        app:amount="@{amount}"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black" />

</LinearLayout>

I am handling overflowing name with ellipsize="end". But, full amount should be shown full. It can not be cut to show 3 dots of overflowing.

What layout changes will do the trick? Thanks.

Answer 1

You are almost there, update your code with the code below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/contact_image"
        style="@style/ContactImageView.ExtraSmall"
        app:contactBadge="@{contact}" />

    <TextView
        android:id="@+id/contact_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@+id/contact_image"
        android:layout_toStartOf="@+id/column"
        android:ellipsize="end"
        android:maxLines="1"
        android:paddingStart="@dimen/activity_horizontal_margin"
        android:text="@{contact.name}"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black" />

    <TextView
        android:id="@+id/column"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toStartOf="@+id/amount"
        android:text=":" />

    <TextView
        android:id="@+id/amount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        app:amount="@{amount}"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/black" />

</RelativeLayout>

Answer 2

Okay, I found out.

Removing layout_weight,adding minWidth and setting layout_width to wrap_content did the trick.

Here is the changed TextView of id amount:

<TextView
    android:id="@+id/amount"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="70dp"
    android:gravity="end"
    app:amount="@{amount}"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@color/black" />