How to avoid overlap view in relative layout in android?
<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?
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
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!!