How can I prevent a textfield from overflowing adjacent text fields on android?

Question

I've got a problem with an android layout.

I've got one line with three TextViews: a job title, an age and a date. I want the date to be aligned to the right and the job title to the left. The age should be aligned right to the job title.

The problem is that the job title can become very long. I want that it does not overlap the other to views but gets truncated automatically instead. The other two text views should always be visible.

Any ideas how I can achieve this? I want my layout to span the whole width of the screen and thus don't want to work with absolute widths.

My layout looks as follows:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
        >

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Softwaredeveloper and some more very long job titles so that the text overflows"
            android:id="@+id/occupation"
            android:layout_gravity="left|center_vertical"
            android:padding="5dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:singleLine="true"
            android:ellipsize="end"/>

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="(32)"
            android:id="@+id/age"
            android:layout_gravity="left|center_vertical"
            android:padding="5dp"
            android:layout_alignParentLeft="false"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/occupation"
            android:singleLine="true"/>

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="01.02.2013"
            android:id="@+id/date"
            android:layout_alignParentLeft="false"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:singleLine="true"
            android:padding="5dp"/>
</RelativeLayout>

And this is what I get:

enter image description here

Provide layout-weight to all of your textview. Take a look at [here][1]. [1]: http://stackoverflow.com/questions/4986861/android-layout-weight — Purush Pawar, Jan 31 '13 at 14:53
Provide layout-weight to all of your textview. Take a look at [here][1]. [1]: http://stackoverflow.com/questions/4986861/android-layout-weight — Purush Pawar, Jan 31 '13 at 14:54
I've already tried that but didn't achieve what I want. I want that the 'age' textfield is directly right to the 'job title' textfield. With a linear layout with weights both textfields will take up the same amount of space or the proportion of space of the weights of the space I assign to them, but I don't get it right so that there is no space between the job title and the age.. — Frank, Jan 31 '13 at 14:59

Anand · Accepted Answer · 2013-01-31T15:24:58.977

try this :

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="wrap_content">

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Softwaredeveloper and some more very long job titles so that the text overflows"
            android:id="@+id/occupation"
            android:padding="5dp"
            android:singleLine="true"
            android:layout_weight="1"
            android:ellipsize="end"/>

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="(32)"
            android:id="@+id/age"
            android:padding="5dp"
            android:singleLine="true"/>

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="01.02.2013"
            android:id="@+id/date"
            android:singleLine="true"
            android:padding="5dp"/>
</LinearLayout>

now try this , it's working fine :

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

        <TableRow>

            <TextView
                android:id="@+id/occupation"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:singleLine="true"
                android:text="Softwaaaaaaa aared " />

            <TextView
                android:id="@+id/age"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:text="(32)" />

              <TextView
            android:id="@+id/date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:text="01.02.2013" />

        </TableRow>


    </TableLayout>

Thanks, I tried it. But know when the job title is shorter, there is a big gap between the title and the age. I want the age to be directly right to the job title. Remaining space should only be between the age and the date. How is this possible? — Frank, Jan 31 '13 at 15:02
Thanks Anand. Haven't seen that you have edited your post. Its the same solution I came up with in the meantime. This works! — Frank, Jan 31 '13 at 15:54

score 0 · Answer 2 · answered Jan 31 '13 at 15:02

I'd do something like this, and adjust the layout_weight's to get desired width's

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="horizontal"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
>
   <TextView
        android:layout_width="fill_parent"
        android:layout_height="20dip"
        android:layout_weight=0.3
        android:text="Softwaredeveloper and some more very long job titles so that the text overflows"
        android:textSize="18dip"
        android:id="@+id/occupation"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:singleLine="true"
        android:ellipsize="end"/>
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="20dip"
        android:layout_weight="2"
        android:textSize="18dip"
        android:text="(32)"
        android:id="@+id/age"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:layout_toRightOf="@+id/occupation"
        android:singleLine="true"/>
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="20dip"
        android:layout_weight="1"
        android:textSize="18dip"
        android:text="01.02.2013"
        android:id="@+id/date"
        android:singleLine="true"
        android:padding="5dp"/>

Unfortunatly is not what I need. See my comment to the suggestion of @Anand above. — Frank, Jan 31 '13 at 15:07

score 0 · Answer 3 · answered Jan 31 '13 at 15:23

0

I suggest u add the property of weight sum for your parent layout and give the weights to the children accordingly.

answered Jan 31 '13 at 15:23

Ajay

1,796
3
18
22

score 0 · Answer 4 · edited May 23 '17 at 10:24

Thanks to the hint in this post (How to get a layout where one text can grow and ellipsize, but not gobble up the other elements on the layout), I finally found a working solution.

What helped me was the hint to use a table layout.

My solution looks as follows:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:shrinkColumns="0"
              android:stretchColumns="1">

    <TableRow
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

        <TextView
                android:layout_width="fill_parent"
                android:layout_weight="1"
                android:text="Softwaredeveloper and some more very long job titles so that the text overflows"
                android:id="@+id/occupation"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:singleLine="true"
                android:ellipsize="end"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"/>

        <TextView
                android:layout_width="fill_parent"
                android:layout_weight="2"
                android:text="(32)"
                android:id="@+id/age"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:singleLine="true"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"/>

        <TextView
                android:layout_width="fill_parent"
                android:layout_weight="1"
                android:text="01.02.2013"
                android:id="@+id/date"
                android:singleLine="true"
                android:padding="5dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|right"/>
    </TableRow>

</TableLayout>

A long job title now gets truncated correctly and the age is now directly adjacent even to a shorter job title.

This looks like that:

Long job title: Long job title with ellipses

Short job title:

Steven_BDawg · Answer 5 · 2013-01-31T15:53:33.177

I copied and pasted your layout (EDIT: into an app of mine) to play with it some. I wrapped your first two (occupation and age) TextViews in a LinearLayout and added two lines to the occupation TextView to make it work. I hope this helps. I added android:maxEms and android:singleLine. Adjust the android:maxEms value to your liking!

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Softwaredeveloper and some more very long job titles so that the text overflows"
        android:maxEms="25"
        android:singleLine="false"
        android:id="@+id/occupation"
        android:layout_gravity="left|center_vertical"
        android:padding="5dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:singleLine="true"
        android:ellipsize="end"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="(32)"
        android:id="@+id/age"
        android:layout_gravity="left|center_vertical"
        android:padding="5dp"
        android:layout_alignParentLeft="false"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/occupation"
        android:singleLine="true"/>
</LinearLayout>

How can I prevent a textfield from overflowing adjacent text fields on android?

5 Answers5