Question

Can somebody please explain why layout is much bigger than button vertically. Im using WRAP_CONTENT for the layout height. Also Second button just disappeared.

Layout:

<?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="Button One big button"  
        android:layout_width="wrap_content"   
        android:layout_height="wrap_content"></Button>
    <Button  
        android:id="@+id/Button02"  
        android:text="Button Two"
        android:layout_toLeftOf="@id/Button01"   
        android:layout_width="wrap_content"   
        android:layout_height="wrap_content"></Button>
</RelativeLayout>

I can see that it is because of using layout_toLeftOf tag with a anchor view (Button 01) whose position width wise is not precisely defined. Im looking for more insights here. Can anybody chip in??

Thanks in advance.

EDIT:

• Why does Button 2 disappear : Quiroga has put down a good answer below

• Why Layout height increase : Experimets reveal that its because
  of Button02 width!! Platform has pushed the button 02 to the invsible space on the left of the layout but squeezed it to a single char width. For exmaple if the change the text of the buton 02 as follows

  android:text=”Btn 2″

  Then output changes to (height of layout reduced)
  

So the bottom line — Make sure to use right alignment parameters. Else some of your views might disappear and worse layout appearance can be hugely different from what you expect!

Answer 1

Change to this:

   <Button  
        android:id="@+id/Button02"  
        android:text="Button Two"
        android:layout_toRightOf="@id/Button01"   
        android:layout_width="wrap_content"   
        android:layout_height="wrap_content"></Button>

I think you missunderstand the layout_toLeftOf param .

Which makes your first button stay this image way (Using layout_toLeftOf ):

             |<-- R Layout width-->| 
  |Button Two|Button One big button|
             |                     |
             |_____________________|

And in order to understand the issue , i explain it (but maybe i’m wrong ):

Layout put in the RelativeLayout , the first Elements it see in the XML file. Then if you put wrap_content in the button and in the RelativeLayout you put the same , it first measure the size of it and put it in then . Aligning it by default to the left upper placer , and setting the RelativeLayout width fixed when it sees that there is nothing mre in the right, down direction.

P.S: And yes , you can put an element out of the screen 😉