How to avoid overlap view in relative layout in android?

Question

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView1"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView2"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView3"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView4"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView5"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView6"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView7"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView8"
        android:textSize="20sp" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView9" />

    <TextView
        android:id="@+id/textView10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="商店圖片:"
        android:textSize="15sp"
        android:layout_alignParentTop="true"
        android:layout_alignLeft="@id/imageView1" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@id/textView10"
        android:contentDescription="@string/top" />
</RelativeLayout>

Simple output:
textview1     textview9
textview2     imageview1
.
.
.
button1

The above layout is a page that divide horizitonally, for the left side , there is a list of textview and button , for the right side, there is an image view. The problem is: when the textview content is too long, the imageview will overlap the content of it, besides using bringtofront(), are there any way (in xml ) to resize the width of the text view if it overlap with image view?

Why don't you try putting `android:layout_alignParentTop="true"` to `ImageView` and `android:layout_alignLeft="@id/textView1"`. Then put `android:layout_below="@id/button1` to `textView10`. — g00dy, Jul 31 '13 at 11:02
What's the general idea, you need all the `TextViews` one below the other and at the end a `Button` (left column) and only one `ImageView` to the right (right column)? — g00dy, Jul 31 '13 at 11:03

score 102 · Answer 1 · edited Oct 19 '16 at 22:02

Use layout_toStartOf in the first item with second item +id under double quotes

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

    <TextView
        android:id="@+id/email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_toStartOf="@+id/selectaccount"
        android:text="very long text which used to overlap over radio button"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <RadioButton
        android:id="@+id/selectaccount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true" />

</RelativeLayout>

note this argument in textview

android:layout_toStartOf="@+id/selectaccount"

An XML is read from top to bottom

so this is how the Layout is rendered in Android

android:layout_toStartOf="@id/item means that item is defined above this line
android:layout_toStartOf="@+id/item means that item will appear later somewhere below this line

+1 for "@+id/item means that item will appear later somewhere below this line. I never knew you could do that. I always reordered my Views in the xml. Thank you! — Eric Cochran, Oct 09 '14 at 17:06
In case anyone's confused by the wording, +id denotes declaration of a new ID, it's not specifically related to things being "above" or "below". It's just like declaring a variable before you use it in code. The first time you want to use an ID, you have to declare it. — Niall, Nov 02 '18 at 14:46

score 27 · Accepted Answer · answered Jul 31 '13 at 11:01

If you are using this kind of design than you should use linear Layout. and use Table Rows in it to display this kind of view.

and also use weight so that your view doesn't et overlap on other views. try like this:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
<TableRow 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:weightSum="10">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:textSize="30sp"
        android:text="test"
        android:layout_weight="5" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView1"
        android:textSize="20sp" 
        android:text="test"
        android:layout_weight="5"/>
</TableRow>

</LinearLayout>
</ScrollView>

Hope it Helps!!

As far as i know, if you are using layout_weight attribute, one of your dimensions(layout_height or layout_width) should be set to 0dp. — faizal, Sep 18 '14 at 06:00
Yup..dats right, But here we didn't needed to set weight.it was just one property that i have showed. If we really want to set weight than we need to set 0dp either height or width. — Armaan Stranger, Sep 18 '14 at 12:03
Hey @ArmaanStranger can you please help me with this https://stackoverflow.com/questions/49952965/recyclerview-horizontal-scrolling-to-left?noredirect=1#comment87836903_49952965 — , May 18 '18 at 12:28

score 6 · Answer 3 · edited Jun 23 '15 at 19:06

6

Align the all the textviews to leftOf imageview like lastone : android:layout_toLeftOf="@id/imageView1"

edited Jun 23 '15 at 19:06

Vicky Chijwani

10,191
6
56
79

answered Jul 31 '13 at 11:00

Harish Godara

2,388
1
14
28

1

Ya all textview should be left align of imageview so that none of these textview will overlap the image – Harish Godara Jul 31 '13 at 11:29
@HarishGodara he meant you have to use `layout_toLeftOf` rather than `layout_alignLeft`. I've updated your answer to the correct code. – Vicky Chijwani Jun 23 '15 at 19:10

score 2 · Answer 4 · answered Jul 31 '13 at 11:11

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="1.0" >

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight=".5"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Large Text"
         />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        />

</LinearLayout>

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight=".5"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

score 2 · Answer 5 · edited Jul 02 '16 at 06:51

I had a similar problem and tried pretty much everything suggested here and in other similar threads.

The one additional thing that did it for me was to add:

android:layout_toStartOf="@+id/youroverlappeditem"

so the overlapping item will only run up to the overlapped item.

layout_toLeftOf was not enough on its own

and of course ellipsize="end" was needed as appropriate.

Mine was for a recyclerview with a relative layout.

score 1 · Answer 6 · edited Dec 05 '18 at 01:27

1

You can overcome that issue by clicking on "infer constraints". Follow the picture which will show the way:

edited Dec 05 '18 at 01:27

bunbun

2,595
3
34
52

answered May 27 '17 at 18:19

mohamed

11
1

score 1 · Answer 7 · answered Dec 05 '18 at 01:34

1

Try constraint layout. It simplifies your layout.

answered Dec 05 '18 at 01:34

Juan Mendez

2,658
1
27
23

score -3 · Answer 8 · answered May 31 '18 at 11:03

-3

Add this line one your xml layout

tools:ignore="RelativeOverlap"

answered May 31 '18 at 11:03

Raj

103
9

That doesn't help at all. Things in the "tools" namespace only affect what you see in the Android Studio visual preview, not what happens in the app running on a device. – Niall Nov 02 '18 at 14:42

How to avoid overlap view in relative layout in android?

8 Answers8

Linked