Develop Reference

Distributing extra space in RelativeLayout

I'm trying to build a RelativeLayout which distributes excess space between its children, much as shown here:
I've figured out how to center the red widget inside the blue one, but what I also want to do is distribute any excess vertical space evenly above, below, and between the blue and olive widgets. Currently, everything is bunched up at the top.
My XML looks roughly like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
>
<ImageButton android:id="#+id/blue_button"
android:src="#drawable/blue_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentTop="true"
/>
<ImageView
android:id="#+id/red_box"
android:src="#drawable/red_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/blue_button"
android:layout_marginLeft="10dp"
android:layout_alignTop="#id/blue_button"
android:layout_alignBottom="#id/blue_button"
/>
<ImageButton
android:id="#+id/green_button"
android:src="#drawable/green_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/blue_button"
android:layout_weight="1"
/>
</RelativeLayout>

First, you are using layout_weight with RelativeLayout parent. It's useless because layout_weight works only with LinearLayout parent.
Actually I didn't understand your question (an image of wanted layout would be good) but I guess this will work for you:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
>
<RelativeLayout
android:id="#+id/blueAndRedWrapperLay"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageButton android:id="#+id/blue_button"
android:src="#00CCFF"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_weight="1"
android:layout_centerInParent="true" />
<ImageView
android:id="#+id/red_box"
android:src="#ff0000"
android:layout_width="100dp"
android:layout_height="70dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/greenWrapperLay"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageButton
android:id="#+id/green_button"
android:src="#669900"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</LinearLayout>

Image under another image not shown Android

Hi I wanna implement following picture
When I go to XML-design of android studio it's exactly what I want but when I run app the straight line under the circle not shown Can any body give me some hint to solve this issue ? ( I also use FrameLayout instead of RelativeLayout but not worked )
Edit : In fact my problem is RelativeLayout which contains straight line not as height as other RelativeLayout. Does anyone knows how to solve this ?!
Edit 2: I change relativeLayout of parent to LinearLayout and it's worked ! I dont know why but it's work !
Here is my row of list after some changes :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="#dimen/circle_area_radius"
android:layout_height="match_parent">
<ImageView
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/half_circle_area_radius"
android:background="#color/orange" />
<ImageView
android:id="#+id/circle"
android:layout_width="#dimen/circle_area_radius"
android:layout_height="#dimen/circle_area_radius"
android:src="#drawable/circle" />
<com.mycompany.ui.customui.PersianTextView
android:id="#+id/araNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="22dp"
android:text="1299"
android:textColor="#color/abc_secondary_text_material_dark"
android:textSize="12sp" />
</RelativeLayout>
<!-- our content -->
<LinearLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="#dimen/pager_margin"
android:layout_marginTop="#dimen/global_padding_large"
android:background="#drawable/balloon_incoming_normal"
android:orientation="vertical">
<com.mycompany.ui.customui.PersianTextView
android:id="#+id/itemText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginLeft="#dimen/global_padding_large"
android:layout_marginRight="#dimen/global_padding"
android:layout_marginTop="#dimen/global_padding"
android:ellipsize="end"
android:gravity="right"
android:textColor="#color/dark_gray"
android:textSize="#dimen/textsize_medium" />
<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="#dimen/global_padding_large"
android:layout_marginRight="#dimen/global_padding_large"
android:layout_marginTop="#dimen/global_padding"
android:background="#color/gray_20" />
<com.mycompany.ui.customui.IconTextView
android:id="#+id/favoriteButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:padding="#dimen/global_padding"
android:layout_marginRight="#dimen/global_padding"
android:text="#string/icon_star_empty"
android:textColor="#color/black_light"
android:textSize="#dimen/textsize_smaller" />
</LinearLayout>
</LinearLayout>

The thing is line might actually form, but you are not able to see it, because it's behind the circle. If I'm right, test it by adding this to the circle android:alpha="20". The line could be seen behind the circle. If that works the solution below should work.
Change the fill_parent to match_parent, fill_parent is deprecated.
Since you use match_parent in the first layout.
The solution could be this
Better Implementation would be using this:
| Circle(V1) | TextView with information(V2) |
Align V1 to left and top (with circle and line as center of the layout).
Align V2 to the right of V1.
EDIT
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent">
<!-- this is my straight line -->
<ImageView
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_marginEnd="-65dp"
android:layout_marginLeft="31dp"
android:src="#f6802e" />
Your line's height matches parent's height, change
android:layout_height="fill_parent">
to
android:layout_height="match_parent">
EDIT #2
<?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" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#00aaaaaa"
android:paddingLeft="65sp"
android:src="#drawable/ic_launcher" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentTop="true" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="3sp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="#aa00aa"
android:paddingLeft="65sp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="65sp"
android:layout_height="65sp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#aaaaaa"
android:paddingLeft="65sp"
android:layout_marginTop="65sp"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
The above code runs and gives you the desired output as well, just replace the imageViews(Also the first RelativeLayout is unnecessary, inflating them takes memory). Here's the screenshot.

Try This.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent">
<ImageView
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_marginEnd="-65dp"
android:layout_marginLeft="31dp"
android:src="#f6802e" />
<ImageView
android:id="#+id/circle"
android:layout_width="65dp"
android:layout_height="match_parent"
android:layout_marginEnd="-65dp"
android:layout_marginRight="-65dp"
android:src="#drawable/circle" />

layout_centerHorizontal is not centering

I have a relative layout, and inside it i place 3 items, 2 imageviews and one scrollview.
My layout is like this...
<?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="fill_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal"
android:baselineAligned="true"
android:background="#drawable/background">
<RelativeLayout
android:id="#+id/logosLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
android:layout_margin="16dp"
android:gravity="center">
<!-- An image will be placed here -->
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:background="#33ffffff"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/up" />
<ScrollView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_margin="8dp"
android:fadingEdgeLength="32dp"
android:scrollbars="none" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="#+id/hotelBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#drawable/button_background"
android:contentDescription="#string/hotelBtnDesc"
android:gravity="center"
android:src="#drawable/icon1" />
<TextView
android:id="#+id/hotelBtnDescTxtVw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="#string/hotelBtnDesc"
android:textColor="#ffffff"
android:textSize="14sp" />
<!-- more scrollview items -->
</LinearLayout>
</ScrollView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/down" />
</RelativeLayout>
</LinearLayout>
The above code produces the view shown here:
You may note that the arrows are not aligned in the center, but are slightly moved to the right. Why is that, and how can I fix it ? Note that i have already used android:layout_centerHorizontal="true" to my imageviews.
Thank you in advance

Its problem with your
android:layout_margin="8dp"
remove it from both scrollview and imageView
and pass it to RelativeLayout direct.
or add
android:layout_marginTop="8dip"
android:layout_marginBottom="8dip"
in your RelativeLayout.
and pass
android:layout_centerHorizontal="true"
to your scrollview

they are aligned to the center if you put the marginRight into consideration, try adding android:layout_margin="8dp" to the arrows.

u need to set image view that is under the Relative layout set this image view width fill parent.

Try removing android:layout_weight="1" from your RelativeLayout and see if it works.
In your LinearLayout, the attribute android:orientation="horizontal" causing your display to be aligned horizontaly. Therefore your RelativeLayout is in center but since its shared with another layout thats why you cant note the difference. If you completely remove the first RelativeLayout (the one with id logosLayout) then i hope you'll see the second layout in center.
So, first you need to define the hierarchy of layout you require and then adjust your views accordingly.

It seems problem with your android:layout_margin="8dp" for your scrollview only and pass it to RelativeLayout direct but instead of using margin use padding = "8dp".

Button in relative layout not affected by setting layout margins

A custom Dialog box with a RelativeLayout contains a Button widget that won't change its margins, regardless of direction. Here's the xml:
<?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" android:background="#99000000">
<TextView android:id="#+id/dialogtitle" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="Some text" />
<TextView android:id="#+id/dialogtext" android:layout_width="300dp"
android:layout_height="wrap_content" android:textSize="15dp"
android:layout_alignParentLeft="true" android:layout_below="#id/dialogtitle"
android:paddingLeft="8dp" />
<Button android:id="#+id/dialogbuttoninfo" android:layout_width="80dp"
android:layout_height="wrap_content" android:text="Doesn't care about margins"
android:layout_alignParentRight="true" android:layout_marginLeft="128dp" />
</RelativeLayout>
Padding works but only moves the text inside the button. Any suggestions?

This seems crappy but have you tried putting it all in a LinearLayout instead? or perhaps removing android:orientation="horizontal". I dont think RelativeLayout cares about orientation from what I've seen. Also I think, but might be wrong, that if you do a LinearLayout then you won't need to have android:layout_alignParentLeft="true" in there either.
After cleaning it up a bit (sorry but its so hard to read when its compressed as it was in the question) you also didn't state where the last TextView , dialogbuttoninfo was supposed to be relative to everything else, I think you have to do that for Relative layouts to behave properly, I've had some squirrely things happen.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#99000000">
<TextView
android:id="#+id/dialogtitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Some text" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/dialogtext"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:textSize="15dp"
android:layout_alignParentLeft="true"
android:paddingLeft="8dp" />
<Button
android:id="#+id/dialogbuttoninfo"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:text="Doesn't care about margins"
android:layout_alignParentRight="true"
android:layout_marginLeft="128dp" />
</LinearLayout>
</LinearLayout>

You may need to align the left of the button against something before the margin has real meaning.

How to display a TextView below an other one in Android with XML files?

I am pretty sure that a parameter will do the trick but I can't find the one I am looking for.
I am trying to display one TextView -file_type- below the file_title TextView.
What would be the parameter that I should add to the file_type TevxtView block to come under the file_title TextView block ?
There is what I am doing :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/file_type_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="25px"
android:paddingTop="25px" />
<TextView android:id="#+id/file_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="30px"
android:textSize="22sp"
android:background="#FF0000"
android:textColor="#FFFFFF" />
<TextView android:id="#+id/file_type"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="30px"
android:paddingTop="10px"
android:layout_gravity="bottom"
android:textSize="22sp"
android:background="#FF0000"
android:textColor="#FFFFFF" />
</LinearLayout>
Thank you ,

By default linearlayout wraps things horizontally. If you want the imageview to be at the left of the both textviews (that are wrapped vertically), use following:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView .../>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:orientation="vertical">
<TextView1..../>
<TextView2..../>
</LinearLayout>
</LinearLayout>
Or you can just pass the parameter android:orientation="vertical" to the top level LinearLayout. Have a look at RelativeLayout definition as well.