Android layout_margin conflicts with RelativeLayout attributes

Question

First, a picture (from hierarchyviewer):

I have two buttons with different lengths of text which I want to be the same size. In the image you can see this working at the top. However, I'd like some space between my buttons, so for the third and fourth buttons, I add the layout_margin attribute to give them a little space. Chaos ensues. The fourth button remains the same size and adds the appropriate margin. But the third button doesn't seem to add the margin on the right, and so loses width.

I think what is happening is the margin is being applied after the alignment and so ... actually, I can't come up with a process that explains it completely.

What I would like is:

• To understand how this stuff works - the layout of views seems unintuitive to me and I can't imagine reaching a point where I'm not randomly changing attributes to get this sort of thing fixed. Is there a comprehensive tutorial that goes over the nitty gritty?

• Two equal length buttons with different length text in a relative layout with margin. I need the relative layout for arranging all the other views on the activity.

Code is below.

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    >
    <Button
        android:id="@+id/goodThis"
        android:text="Short text"
        android:background="@drawable/button_red" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"
        android:layout_alignRight="@+id/goodThat"
    />
    <Button
        android:id="@+id/goodThat"
        android:text="Longer text"
        android:background="@drawable/button_green" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"
        android:layout_below="@+id/goodThis"
    />

    <Button
        android:id="@+id/badThis"
        android:text="Short text"
        android:background="@drawable/button_red" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_below="@+id/goodThat"
        android:layout_alignParentLeft="true"
        android:layout_alignRight="@+id/badThat"
        android:layout_margin="3dp"
    />
    <Button
        android:id="@+id/badThat"
        android:text="Longer text"
        android:background="@drawable/button_green" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"
        android:layout_below="@+id/badThis"
        android:layout_margin="3dp"
    />
</RelativeLayout>

Answer 1

To put my response more as an answer than my comment above, I've learned the following with my RelativeLayout experiences:

1) Eliminate forward ID references. This can make it a bit more difficult to figure out how to do it, but you can see that resolving references like this would require at least two passes through the layout specs at runtime and potentially complicate things.

2) I generally use specific margin/padding attributes such as layout_marginTop, etc. to get better results. Your use of the blanket "layout_margin" is offsetting the 3rd and 4th buttons slightly to the right, which is probably not the look you're striving for. Try using just a marginTop to space the buttons out.