3

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

10
  • 1
    I think Linear-layout with it's weight property will solve your issue. You can set weight as per your requirement as 4:2 or 3:1 or may be 3:2 ? Otherwise, try it with Constraint layout. Commented Sep 18, 2018 at 9:20
  • @JaiminModi can you give me an example of Constraint layout in this context? With Linearlayout weight wouldn't it still keep space between the textviews if there is a fixed weight? Commented Sep 18, 2018 at 9:23
  • With Constraint layout you can specify space between those two view in layout by specifying minimum two constraints vertically and horizontally. For more detail you can go through Google developer console. Commented Sep 18, 2018 at 9:26
  • or you can simply limit tv_username size by setting android:maxEms="10" (ex) Commented Sep 18, 2018 at 9:29
  • @renzvader maxEms did not work in this case Commented Sep 18, 2018 at 9:34

3 Answers 3

2

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.

0

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>
0
-1

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

2
  • Thanks for the answer. Isn't singleLine deprecated? Commented Sep 18, 2018 at 9:35
  • date should ... not aligned to right in the parent
    – Selvin
    Commented Sep 18, 2018 at 9:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.