TextView with different text lengths aligning next to horizontally

Question

I'm looking for efficient way (best XML only) to align two TextViews horizontally, smth like this:

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/opinion_author"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:lines="1"
            android:maxLines="1"/>
        <TextView
            android:id="@+id/opinion_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:lines="1"
            android:maxLines="1"/>
    </LinearLayout>

opinion_date will always have ~50-70dp length and must be fully visible aligned to right of opinion_author. author may have 0-255 chars and if too much for screen then ellipsize then.

In above when author is too long view is pushing out date view. Same situation when using toRightOf/toLeftOf when using RelativeLayout. Setting layout_weight=1 for author keeping date sticked to right edge of parent viewgroup even when author have only few characters, so thre is a lot of space... I'm looking for a way, which aligns date to right of author even when it is ellipsized and ends with... I have few ideas how to solve it in Java (measuring views or textpaint, but all seems not so efficient...)

score 3 · Accepted Answer · answered Aug 19 '16 at 06:52

Try this code:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="0">
<TableRow
    android:gravity="center_horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:gravity="center"
        android:lines="1"
        android:singleLine="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:ellipsize="none"
        android:gravity="center"
        android:lines="1"
        android:singleLine="true" />
</TableRow>

and we have the winner! `TableLayout` and `shrinkColumns`, so obvious... thank you, dziękuję :) — snachmsm, Aug 19 '16 at 07:18

Dhalloo · Answer 2 · 2016-08-19T07:33:34.533

0

Give android:weightSum = "1" to your linear layout. Give android:maxWidth="250dp" to opinion_author textview. Give android:layout_weight="0.3" to opinion_date textview.

Something like given below.

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="1"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/opinion_author"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxWidth="250dp"
            android:lines="1"
            android:maxLines="1"/>
        <TextView
            android:id="@+id/opinion_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:lines="1"
            android:layout_weight="0.3"
            android:maxLines="1"/>
    </LinearLayout>

edited Aug 19 '16 at 07:33

answered Aug 19 '16 at 06:53

Dhalloo

155
3
14

let author be "a" and date "27 october" - how the date will align next to "a" when "a" will occupy 0.7 of screen width ?! date must be aligned on end of author text, not to right of parent, which its written in question... – snachmsm Aug 19 '16 at 07:07
Use maxWidth attribute to opinion_author according to screen and remove layout_weight from it. It will work. Tested @snachmsm – Dhalloo Aug 19 '16 at 07:23
no it will not work, you misunderstood the question. `opinion_date` will occupy 0.3 of screen width always, on tablet there will be a lot of unnecessary empty space. theoretically on smaller devices text for date might be too long – snachmsm Aug 19 '16 at 07:37
you can manage your weights and width according to screen and according to text for date. – Dhalloo Aug 19 '16 at 07:41
so you suggesting measuring how much text each author/date have. Java solution, not XML only, not so efficient. if Java is necessary needed then I will just use meauring views or texts, but solution with `TableLayout` (already accepted) is better, without any Java, working fine – snachmsm Aug 19 '16 at 07:45

score 0 · Answer 3 · answered Aug 19 '16 at 06:53

use weights!

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3">
        <TextView
            android:id="@+id/opinion_author"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:lines="1"
            android:maxLines="1"
            android:layout_weight="2"/>
        <TextView
            android:id="@+id/opinion_date"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:lines="1"
            android:maxLines="1"
            android:layout_weight="1"/>
    </LinearLayout>

example:

android:weightSum="3" divies up into 3 parts

android:layout_weight="2" gives 2 parts to author

android:layout_weight="1" gives 1 part to date

play with the ratios till you're pleased!

(oh, android:layout_width="0dp" because layout_weights overrides them)

let author be "a" and date "27 october" - how the date will align next to "a" when "a" will occupy 2/3 of screen width ?! date must be aligned on end of author text, not to right of parent, which its written in question... — snachmsm, Aug 19 '16 at 07:06

score 0 · Answer 4 · answered Aug 19 '16 at 07:01

0

set size in android:layout_width

like:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <TextView
        android:id="@+id/opinion_author"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:maxLines="1"/>
    <TextView
        android:id="@+id/opinion_date"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:lines="1"
        android:maxLines="1"/>
</LinearLayout>

you can use android:layout_weight in LinearLayout child.

answered Aug 19 '16 at 07:01

yasser karimi

329
3
13

you have fixed width set, you didn't read the question? second `TextView` must align right of first, which must wrap text. visually they should look like one line – snachmsm Aug 19 '16 at 07:10
use `android:gravity="right"` in `LinearLayout` or you can use java code. – yasser karimi Aug 19 '16 at 12:27
then `opinion_author` will be also aligned to the right. whole text should align left, text itself and view – snachmsm Aug 19 '16 at 20:08

TextView with different text lengths aligning next to horizontally

4 Answers4