Preventing TextView and ImageView Overlap In Relative Layout

Question

I have a textView ( titleTv ) and an imageView ( buyButton ) which are sometimes have an overlap if the titleTv has a somewhat long name.

How might this be prevented? I understand this can be done using an external library - but it seems strange there isn't a simple way to accomplish this.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingBottom="7dip"
    android:paddingTop="7dip" >

    <TextView
        android:id="@+id/titleTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:paddingLeft="5dp"
        android:text=""
        android:textSize="20sp" />

    <TextView
        android:id="@+id/uploaderTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/titleTv"
        android:paddingLeft="5dip"
        android:paddingTop="5dp"
        android:textColor="@color/verylightgrey"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/viewCountTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/titleTv"
        android:layout_toRightOf="@id/uploaderTv"
        android:paddingTop="5dp"
        android:textColor="@android:color/black"
        android:textSize="16sp" />

    <ImageView
        android:id="@+id/buyButton"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:adjustViewBounds="true"
        android:paddingTop="7dip"
        android:src="@drawable/buy_a_up_btn" />
</RelativeLayout>

Example:

(the overlapping fields are the video's title and the $ button)

http://i.stack.imgur.com/clpNv.png

Answer 1

Try this:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingBottom="7dip"
    android:paddingTop="7dip" >

    <ImageView
        android:id="@+id/buyButton"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:adjustViewBounds="true"
        android:paddingTop="7dip"
        android:src="@drawable/buy_a_up_btn" />

    <TextView
        android:id="@+id/titleTv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/buyButton"
        android:background="@color/white"
        android:paddingLeft="5dp"
        android:text=""
        android:textSize="20sp" />

    <TextView
        android:id="@+id/uploaderTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/titleTv"
        android:paddingLeft="5dip"
        android:paddingTop="5dp"
        android:textColor="@color/verylightgrey"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/viewCountTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/titleTv"
        android:layout_toRightOf="@id/uploaderTv"
        android:paddingTop="5dp"
        android:textColor="@android:color/black"
        android:textSize="16sp" />


</RelativeLayout>

Answer 2

just add your ImageView below that TextView . Add this attribute in your ImageView declaration

android:layout_below="@+id/titleTv"

Now the xml should be like this:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingBottom="7dip"
    android:paddingTop="7dip" >

    <TextView
        android:id="@+id/titleTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:paddingLeft="5dp"
        android:text=""
        android:textSize="20sp" />

    <TextView
        android:id="@+id/uploaderTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/titleTv"
        android:paddingLeft="5dip"
        android:paddingTop="5dp"
        android:textColor="@color/verylightgrey"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/viewCountTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/titleTv"
        android:layout_toRightOf="@id/uploaderTv"
        android:paddingTop="5dp"
        android:textColor="@android:color/black"
        android:textSize="16sp" />

    <ImageView
        android:id="@+id/buyButton"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_below="@+id/titleTv"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:adjustViewBounds="true"
        android:paddingTop="7dip"
        android:src="@drawable/buy_a_up_btn" />
</RelativeLayout>