Home » Android » android – How can I prevent views from overlapping in relative layout?

android – How can I prevent views from overlapping in relative layout?

Posted by: admin May 14, 2020 Leave a comment

Questions:

Right now I have two textViews one on aligned to the left of the relative layout and one aligned to the right. The text on the left is much longer than that on the right. On some occasions, the text on the left is two lines. When this happens this text overlaps the text that is aligned to the right.

Is there anyway to prevent this? Or is there a way to say if the text on the left is two lines put the text 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>
  <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>
  <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>
  <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"></TextView>

</RelativeLayout>
How to&Answers:

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:

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:

Result of attached example

Answer:

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>

Answer:

<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:

Best Fix:

android:layout_toStartOf="@id/item_on_the_right"