RelativeLayout not working as expected

Question

I have a android layout that has some other random things in it and in the middle section I have a linearLayout that contains 4 RelativeLayouts like the following XML code.

<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="left|center_vertical"
        android:background="@drawable/backgroudpng">

    </RelativeLayout>
</LinearLayout>

That being said when I try to put objects in this relative layout this go down hill. when ever I place an object in it, it positions the object in another section of the layout (not where I drag it to!). So for example, if I drop a textbox into the top right hand corner of the relative layout, it might put it in the bottom right, or in the center...

I ether need to get this working or I need a different approach. My goal is to create a custom button of sorts that lets me display three or four different text objects on it at the same time.

What I'm trying to do (I can draw it up in gimp if you need me too)

______________________________________________________________________________________
|                                                                                     |
|  Some information here                                                              |
|                                               picture of a number from 1-10 here    |
|  Something else about the "button here"                                             |
|                                                                                     |
|_____________________________________________________________________________________|

Anyhow I was thinking about using a surface view to preform this but that seemed to be overkill. Basically I just want to create 4 of these large click-able interface that display some of the settings that they can set by clicking on it. Anyhow, if this is the wrong way to do this please let me know! Although it seems like a simple way to do it and that is what I'm hoping for!

UPDATE:

Here is a quick picture of what I'm attempting to accomplish:

the light brown represents the background image, the black represents the background for the entire view, and then the text is just example text. I want them to be able to click on this view like a button and change the settings behind these settings. The problem I am having is I will drag a small text object to the location I want the "Type" setting and when I let go it gets positioned in the location that "Rows Effected" is supposed to be.

Tonight I'm going to try the methods suggested below to see if they rectify the problem.

Thanks for your help so far!

UPDATE 2:

Here is the code, as well as a picture of what it produces (I have verified that it looks like this on my phone as well as well as another phone and an emulator)

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/buttonbackground">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Small Text"
        android:id="@+id/textView"
        android:textColor="#debabc"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="20dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Small Text"
        android:id="@+id/textView2"
        android:layout_marginRight="21dp"
        android:textColor="#dec1db"
        android:layout_below="@+id/textView3"
        android:layout_alignParentRight="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Small Text"
        android:id="@+id/textView3"
        android:textColor="#debabd"
        android:layout_alignBaseline="@+id/textView"
        android:layout_alignBottom="@+id/textView"
        android:layout_toLeftOf="@+id/textView2"/>
</RelativeLayout>

The blue boxes are roughly where I placed the text, although just to be clear they are repositioned on both the X and Y access.

Also, This is using Android Studio, but I checked and loaded the layout in eclipse and it is also doing the same thing. It's strange as I have used them before and have not had this trouble... I must be doing something wrong.

Additional information: Tried rendering it with API14, 16 and 18.

Thanks again!

Answer 1

Don't go with RelativeLayout at all. As per your requirements. Table layout with two rows gives much better result. and it is easy to use too. It won't messed your layout in different screen sizes.

Answer 2

Use Relative layout as root layout instead of Linear Layout you have used. It will make you other layouts to manage easier.