Relative Layout Textview text Overlapping

Question

I have a problem with my Textview in a RelativeLayout. As you can see they are overlapping each other.

<?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="wrap_content"
android:paddingBottom="2dp"
android:paddingTop="2dp" >

<ImageView
    android:id="@+id/row_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentTop="true"
    android:layout_marginBottom="1dp"
    android:layout_marginRight="2dp"
    android:contentDescription="@string/desc" />

<ImageView
    android:id="@+id/multiselect_icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@id/row_image"
    android:contentDescription="@string/desc"
    android:src="@drawable/singlecheck"
    android:visibility="gone" />

<TextView
    android:id="@+id/top_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@id/multiselect_icon"
    android:dividerHeight="2sp"
    android:ellipsize="end"
    android:lineSpacingExtra="1sp"
    android:paddingBottom="13dp"
    android:paddingLeft="1dp"
    android:paddingTop="13dp"
    android:singleLine="true"
    android:textColor="?android:attr/textColorPrimaryDisableOnly"
    android:textIsSelectable="false"
    android:textSize="16sp" />

<TextView
    android:id="@+id/bottom_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_below="@id/top_view"
    android:dividerHeight="2sp"
    android:ellipsize="end"
    android:gravity="right"
    android:maxLength="50"
    android:paddingBottom="13dp"
    android:paddingLeft="1dp"
    android:paddingTop="13dp"
    android:singleLine="true"
    android:textColor="?android:attr/textColorPrimaryDisableOnly"
    android:textIsSelectable="false"
    android:textSize="16sp"
    android:textStyle="bold" />

    </RelativeLayout>

Answer 1

This is because you have set the TextView to be SingleLine, and not have a fixed width. This causes the TextView to grow to the size of it's content, and thus overlapping the other TextView.

Thus, try setting a width on the first TextView, or wrap both TextViews in a View of which you can control the dimensions.

Edit:

According to Android Developer you only need to add android:layout_width="0dp" to your first TextView, and add android:layout_width="xdp" to the 2nd, where x is the width you want that view to have.

The RelativeLayout then should scale the first TextView to use the rest of the width.