Why is my relative layout taking up the entire width of the screen

Question

Why is my relative layout taking up the entire width of the screen

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#f00" > <Button android:id="@+id/Button01" android:text="Press Here" android:layout_alignParentRight="true" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button> <Button android:id="@+id/Button02" android:text="02" android:layout_alignParentLeft="true" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button> </RelativeLayout> 

I pointed the relative layout to "wrap_content" and why it takes up full-screen space. Out put is the same even if I say android: layout_width = "fill_parent".

Enlighten me, please!

EDITOR: I think I was not very clear with my question before. I apologize for that. When I have 2 child views in a relative layout and one of them is left-aligned and the other is right-aligned and the relative width of the layout is WRAP_CONTENT, then I expected the width of the layouts to be equal to the sum of the width of 2 buttons (not that mean WRAP_CONTENT?). I know that there are other ways to achieve the user interface I'm looking for, but I'm just trying to correctly understand these relative tags.

EDIT 2: I was experimenting a bit, and it looks like if we use Layout_AlighParentRight with its parent width, like WRAP_CONTENT, then the upper layout width is used for the calculation (for example, a few answers listed below). But we use only Layout_alignParentLeft, then it works as expected, and the width of the layout does not apply to the entire screen. Thanks for helping people!

Answer 1

Other answers correctly state that when your relative layout width is set to wrap_content and its children are aligned both left and right, the relative layout takes the width of its parent - in this case, the entire screen. If, however, both children were aligned on one side, the relative layout would be as wide as the widest child.

Now, if you want the two buttons to be next to each other, and the relative layout to be as wide as the sum of the width of the buttons, a slightly different approach is required. Instead of positioning both buttons relative to the parent, do this with only one button (for example, the first). Let them say that its positioning remains unchanged ( android:layout_alignParentRight="true" ). Now the button moves to the right, so the second button must be aligned with the first left button to be next to it. So we just add android:layout_toLeftOf="@id/Button01" (and remove the android:layout_alignParentLeft="true" ).

Moreover, I suggest you familiarize yourself with a very friendly guide to relative layouts .

Answer 2

because you have

  android:layout_alignParentLeft="true" 

object width and

  android:layout_alignParentRight="true" 

width is another object, then the layout expands on both sides, giving you the full width layout.

But when you use Layout_alignParentXXXXX and you put the parent WRAP_CONTENT, this forces the children to go to the top layout with a certain width.

Answer 3

This line makes the Click Here button ( Button01 ) to the right:

 android:layout_alignParentRight="true" 

This makes your layout fill the parent in width.

Answer 4

Another problem that you may encounter is that if you set parental alignment + wrap_content for your two children and your relative layout is wrap_content, and this relative layout is contained in LinearLayout full screen , your relative layout will occupy the entire width of LinearLayout.

If you do this with both “align parent left”, the relative layout will lie to the left, and its width will truly be “carry content”. But the behavior is different from "align parent right", which is a bit strange.

Workaround:

To solve this problem (I had to align one of the children on the right), I actually set the 2 children to “align the parent left” and play with the addition for the children, so that one of the children takes the upper position on the right corner. This is a dirty workaround, but the only thing I have found now.

Possible cleaner solutions:

Another trick would be to put 2 LinearLayout inside the FrameLayout, and then put your real children into each LinearLayout and play with LinearLayout's gravity to put the children in the right position.

• RelativeLayout
  • Linearlayout
    • Baby 1 (wrap_content)
  • LinearLayout (Gravity: Top Right)
    • Child 2 (wrap_content)