如何防止视图在相对布局中重叠？

Question

Right now, I have two TextView 's. One is aligned to the left of the RelativeLayout and one aligned to the right. The TextView on the left is much longer than the one on the right. On some occasions, the TextView on the left is two lines. When this happens it overlaps the TextView that is aligned to the right.

Is there a way to prevent this? Or is there a way to say if the TextView on the left is two lines, to put the TextView on the right on the second line?

I'm having trouble with name and time down here:

<RelativeLayout 
    android:layout_width="wrap_content"
    android:id="@+id/relativeLayout"
    android:layout_height="wrap_content">

    <TextView
        android:text="TextView"
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10sp"
        android:textStyle="bold"
        android:textSize="16sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:id="@+id/address"
        android:text="address"
        android:layout_height="wrap_content"
        android:layout_below="@+id/name"
        android:layout_alignLeft="@+id/name"
        android:layout_marginLeft="30sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_toRightOf="@+id/address"
        android:text=""
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/address"
        android:layout_alignBottom="@+id/address"
        android:id="@+id/crossStreet"/>

    <TextView
        android:layout_width="wrap_content"
        android:id="@+id/time"
        android:text="Time"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10sp"/>

</RelativeLayout>

Answer 1

To get same result using RelativeLayout please use android:layout_toLeftOf="@+id/right_text" . It will position the right edge of this view to the left of the given anchor view ID.

Please follow this example:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="@dimen/margin_material_small"
    android:paddingRight="@dimen/margin_material_small">
    <TextView
        android:id="@+id/long_text"
        style="@style/Base.TextAppearance.AppCompat.Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/right_text"
        android:singleLine="true"
        tools:text="Some text field that will definitely overlap with another one" />
    <TextView
        android:id="@+id/right_text"
        style="@style/Base.TextAppearance.AppCompat.Display1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:singleLine="true"
        tools:text="10.34" />
    <TextView
        android:id="@+id/subtext"
        style="@style/Base.TextAppearance.AppCompat.Medium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/long_text"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/right_text"
        android:singleLine="true"
        tools:text="Some other text slightly smaller"/>
</RelativeLayout>

Result of above layout:

Answer 2

Could you instead contain those two TextViews within a horizontal LinearLayout (which itself would still be a child of your RelativeLayout). Then, assign appropriate weight attributes to each of the two TextViews within that LinearLayout.

Answer 3

Best Fix:

android:layout_toStartOf="@id/item_on_the_right"

Answer 4

<RelativeLayout
        android:id="@+id/relativeParent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/titleLeft"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_toLeftOf="@+id/imageRight"
            android:layout_alignParentStart="true" />

        <ImageView
            android:id="@+id/imageRight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:src="@drawable/image" />
</RelativeLayout>



android:layout_toLeftOf="@+id/imageRight"
android:layout_alignParentStart="true"

did the trick without adding additional LinearLayout

Answer 5

Please check below code more helpful to you.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:orientation="horizontal">
    <LinearLayout android:layout_width="fill_parent"
        android:weightSum="1.0" android:id="@+id/relativeLayout"
        android:layout_height="wrap_content">
        <TextView android:text="TextView1 hhhhh hhhhhhhh hhhhhhhh hhhhhhh hhhhhh"
            android:id="@+id/name" android:layout_weight="0.5"
            android:layout_width="0dip" android:layout_height="wrap_content"
            android:layout_marginLeft="10sp" android:textStyle="bold"
            android:textSize="16sp"></TextView>
        <TextView android:layout_width="0dip" android:layout_weight="0.5"
            android:id="@+id/time" android:text="Textview4"
            android:layout_height="wrap_content" android:layout_alignParentRight="true"
            android:layout_marginRight="10sp"></TextView>
    </LinearLayout>
</LinearLayout>