Long text in Android TextView pushes out other Objects

Question

I have created a ListView which shows different media files with the possibility to play them.

Each row consists of a RelativeLayout with two widgets. (The SeekBar and the Rest)

The upper part of this RelativeLayout is a RelativeLayout too. It consists of three parts:

• A play button (inside a LinearLayout for padding)
• A TextView for the file name
• A LinearLayout box containing some labels

They are put together using the android:layout_toRightOf property.

This works quite well, unless the file name is extremely long.

A long file name causes the right LinearLayout 'Box' to be pushed outside the screen.

In addition the whole (inner) RelativeLayout gets stretched vertically without reason.

I have already tried to setandroid:ellipsize="end" and android:singleLine="true". But that didn't fix it.

Heres the full code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:padding="8dp" >

<!-- Top Box -->
<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/fragment_play_row_topbox" >

    <!--  Play button -->
    <LinearLayout android:id="@+id/fragment_play_row_iconBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:padding="4dip" >

        <ImageButton
            android:id="@+id/fragment_play_row_icon"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:src="@android:drawable/ic_media_play" />

    </LinearLayout>

    <!-- Big Text -->
    <TextView
        android:id="@+id/fragment_play_row_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/fragment_play_row_iconBox"
        android:text="\??"
        android:textSize="24dp"
        android:ellipsize="end"
        android:singleLine="true" />

    <!-- Size & Duration & Button-->
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/fragment_play_row_text"
        android:layout_alignParentRight="true"
        android:gravity="right" >

        <TextView
            android:id="@+id/fragment_play_row_size"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text=" ?? MB" />

        <TextView
            android:id="@+id/fragment_play_row_duration"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text=" ??:??" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:src="@android:drawable/arrow_down_float" />

    </LinearLayout>
</RelativeLayout>

<!-- Seek Bar -->
<SeekBar
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/fragment_play_row_topbox" />

</RelativeLayout>

I hope someone can help me fix this.

Thanks in advance,

Uriel

Answer 1

You have to reference as the info layout as the root of your items, referencing it to the parent and the text referencing to the info layout, by this way you will not have this problem, I've modified a little bit your layout just adding an id to the info layout (linearInfo), remmember when you set an id is "@+id/my_item" but when you are referencing to it is "@id/my_item", here is your layout modified, hope it helps you:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:padding="8dp" >

<!-- Top Box -->
<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/fragment_play_row_topbox" >

    <!--  Play button -->

    <LinearLayout
        android:id="@+id/fragment_play_row_iconBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/linearInfo"
        android:layout_alignTop="@+id/linearInfo"
        android:padding="4dip" >

        <ImageButton
            android:id="@+id/fragment_play_row_icon"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:src="@android:drawable/ic_media_play" />

    </LinearLayout>

    <!-- Big Text -->

    <TextView
        android:id="@+id/fragment_play_row_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/linearInfo"
        android:layout_alignTop="@+id/linearInfo"
        android:layout_centerVertical="false"
        android:layout_toLeftOf="@+id/linearInfo"
        android:layout_toRightOf="@+id/fragment_play_row_iconBox"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:singleLine="true"
        android:text="\?? Ultra Hyper Mega Giant Text"
        android:textSize="24dp" />

    <!-- Size & Duration & Button-->

    <LinearLayout
        android:id="@+id/linearInfo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_centerVertical="true"
        android:gravity="right"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/fragment_play_row_size"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" ?? MB" />

        <TextView
            android:id="@+id/fragment_play_row_duration"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text=" ??:??" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:src="@android:drawable/arrow_down_float" />

    </LinearLayout>
</RelativeLayout>

<!-- Seek Bar -->
<SeekBar
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/fragment_play_row_topbox" />

</RelativeLayout>