CODEWITHSUNDEEP
androidandroid-relativelayout
Santosh
Santosh

Reputation: 419

Why does my relative layout occupy full screen width

Why does my relative layout occupy full screen width

<?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 have specified the relative layout to "wrap_content", then why does it occupy full screen space. Out put is same even if i say android:layout_width="fill_parent". Enlighten

Enlighten me please!

EDIT : I think i was not very clear with my question earlier. Apologies for that. When I have 2 child views in a relative layout and one of them is left aligned to parent and other is right aligned and relative layouts width is WRAP_CONTENT then I expected the layouts width to be just the sum of width of 2 buttons (isn't that's what WRAP_CONTENT means??). I know there are other ways of achieving the UI im looking for but Im just trying to understand these relative layout tags properly.

EDIT 2: I have experimented a bit and it looks like if we using Layout_AlighParentRight with its parent's width as WRAP_CONTENT then the upper layout width is used for calculation (like few answers pointed out below). But we are using just the Layout_alignParentLeft then it works as expected and layout width is not extending to the complete screen. Thanks for the help folks!

Upvotes: 7

Views: 11239

Answers (4)

Benjamin Piette
Benjamin Piette

Reputation: 3783

Another issue you may face is that if you set your 2 children to "align parent right"+"wrap_content", and your relative layout to "wrap_content", and that relative layout is contained in a full screen LinearLayout your relative layout will occupy the whole LinearLayout width.

If you do that with both "align parent left", the relative layout sticks on the left, and its width is really a "wrap content". But the behaviour is different for "align parent right", that's a bit strange.

Workaround:

To solve that issue (I had to align one of the children to the right), I actually set the 2 children to "align parent left" and played with children padding in order to get one of the children positionned on the top right corner. This is a dirty workaround but the only one i've found for now.

Possible cleaner solutions:

Another trick would be to put 2 LinearLayout inside a FrameLayout, then put your real children in each LinearLayout, and play with the gravity of those LinearLayout to position children at the right position.

  • RelativeLayout
    • LinearLayout
      • Child 1 (wrap_content)
    • LinearLayout (gravity: top right)
      • Child 2 (wrap_content)

Upvotes: 0

user519908
user519908

Reputation:

The other answers have correctly pointed out that when your relative layout's width is set to wrap_content, and its children are aligned to 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 to one side, the relative layout would be as wide as the widest child.

Now if you want the two buttons to be placed next to each other, and the relative layout to be as wide as the sum of the widths of the buttons, a slightly different approach is needed. Instead of positioning both buttons relative to the parent, do that with one button only (e.g, the first one). Let's say its positioning is left unchanged (android:layout_alignParentRight="true"). Now the button is floated to the right, so the second button, in order to be position next to it, has to be aligned to the first button's left side. Thus, we just add android:layout_toLeftOf="@id/Button01" (and remove the android:layout_alignParentLeft="true" part).

For more, I suggest you check out a very friendly tutorial on relative layouts.

Upvotes: 15

A.Quiroga
A.Quiroga

Reputation: 5720

cause you have a 

        android:layout_alignParentLeft="true"

width an object , and a 

        android:layout_alignParentRight="true"

width another object , then the layout extends to both side , giving you the full width layout.

But when you use Layout_alignParentXXXXX , and you put in parent WRAP_CONTENT , that makes children to go to the upper layout with a width defined.

Upvotes: 4

Michell Bak
Michell Bak

Reputation: 13252

This line makes the "Press Here" button (Button01) align to the right:

android:layout_alignParentRight="true"

That makes your layout fill the parent in width.

Upvotes: 1

Related Questions