CODEWITHSUNDEEP
androidtextviewtruncateandroid-relativelayoutellipsize
user3034944
user3034944

Reputation: 1751

Truncate TextView based on String length

I am trying to achieve a layout where two TextViews ie. tv_username and tv_date are to be aligned side by side. If the username is short the username and date should show completely and if the name is long, the username should truncate at the end and the date should show completely. Something like so :-

enter image description here

In any case both the TextViews shold have a max of 5dp spacing between them i.e the date should always be at the right of username with a margin of 5dp and not aligned to right in the parent. I have tried the below code, but it pushes the date Textview out of the screen with a longer username :-

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/value_3"
            android:padding="@dimen/value_5"
            android:paddingEnd="@dimen/value_10"
            android:paddingStart="@dimen/value_10"
            android:paddingTop="@dimen/value_5">

                 <android.support.v7.widget.AppCompatTextView
                android:id="@+id/tv_username"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxLines="@integer/value_1"
               android:text="Samantha George Jefferson and some more text"
                android:textColor="@color/colorPrimary"
                android:textSize="@dimen/size_fourteen"
                android:layout_alignParentStart="true"/>

            <android.support.v7.widget.AppCompatTextView
                android:id="@+id/tv_date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"                
                android:layout_marginLeft="@dimen/value_5"
                android:layout_alignParentRight="true"
                android:text="@string/friendly_date"
                android:textColor="@color/colorBlack_a38"
                android:textSize="@dimen/size_twelv"/>

    </RelativeLayout>

Any help would be appreciated.

UPDATE

I used ConstraintLayout but the result is the same.

<android.support.constraint.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                 <android.support.v7.widget.AppCompatTextView
                android:id="@+id/tv_username"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxLines="@integer/value_1"
                android:text="Johnvfvjdfjgdkjhgjdgdjkghdjkghkjdhgdhgdgjkhjdfg"
                android:textColor="@color/colorPrimary"
                android:textSize="@dimen/size_fourteen"
                android:layout_alignParentStart="true"/>

            <android.support.v7.widget.AppCompatTextView
                android:id="@+id/tv_date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"                
                android:layout_marginLeft="@dimen/value_5"
                android:layout_alignParentRight="true"
                android:text="@string/friendly_date"
                android:textColor="@color/colorBlack_a38"
                app:layout_constraintLeft_toRightOf="@+id/tv_username"
                android:textSize="@dimen/size_twelv"/>

    </android.support.constraint.ConstraintLayout>

enter image description here

Upvotes: 3

Views: 1088

Answers (3)

m4n3k4s
m4n3k4s

Reputation: 1303

You can achieve this with a TableLayout

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

    <TableRow>
        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/tv_username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="1"
            android:text="@string/lorem"
            android:textColor="@color/colorPrimary"
            android:textSize="14sp" />

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/tv_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:text="1 hour ago"
            android:textColor="#5000"
            android:textSize="12sp" />
    </TableRow>
</TableLayout>

Upvotes: 0

nobody special
nobody special

Reputation: 505

TableLayout can do what you want, as stated by @m4n3k4s, but if you want to do it with a ConstraintLayout, then just add this to your TextView in the xml layout

android:maxLines="1"
android:maxWidth="160dp"

Obviously set maxWidth to your desired value.

Upvotes: 2

Rohit Khirid
Rohit Khirid

Reputation: 49

All you need to do is add following line to your tv_username TextView which are 

android:singleLine="true"
android:maxLines="1"
android:toLeftOf="+@id/tv_date"
android:toStartOf="+@id/tv_date"
android:ellipsize="end|right"

The way it will work is once your tv_date is drawn at the end tv_username will be drawn and it will be truncated if it needs more space than available

Upvotes: -1

Related Questions