Setting background color of RelativeLayout in Xamarin.Android

Question

I am trying to add a background color to the search form area of a RelativeLayout in my Android app in Xamarin. Basically I have an EditText and a button that should be contained within a colored background at the top of the screen. Using the code below, the background color is applied but my EditText and button disappear while the content below them move up and take their place. Here's my code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:pixlui="http://schemas.android.com/apk/com.neopixl.pixlui"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:screenOrientation="portrait"
  android:background="#ffffff">

  <RelativeLayout
  android:id="@+id/TestLayout"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="#EAF4F9">

    <com.neopixl.pixlui.components.textview.TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="My Heading"
    pixlui:typeface="Lato-Bold.ttf"
    android:layout_marginBottom="15dp"/>

    <EditText
    android:inputType="numberDecimal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textView1"
    android:id="@+id/SearchField"
    android:layout_marginRight="10dp"/>

    <Button
    android:text="Search"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/textView1"
    android:layout_toRightOf="@id/SearchField"
    android:id="@+id/btnSearch"
    android:layout_alignParentRight="true" />

    <TextView
    android:text="Use my current location"
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    android:layout_below="@id/SearchField"
    android:id="@+id/txtCurrentLocation"
    android:gravity="center"/>

  </RelativeLayout>

  <View
  android:id="@+id/strut"
  android:layout_width="0dp"
  android:layout_height="0dp"
  android:layout_centerHorizontal="true" />

  <com.neopixl.pixlui.components.button.Button
  android:id="@+id/btnOne"
  android:text="Button One"
  android:layout_width="0dp"
  android:layout_height="100dp"
  android:layout_alignRight="@id/strut"
  android:layout_alignParentLeft="true"
  android:layout_below="@id/txtCurrentLocation"
  pixlui:typeface="Lato-Light.ttf"
  android:gravity="center" />

  <com.neopixl.pixlui.components.button.Button
  android:text="Button Two"
  android:id="@+id/btnTwo"
  android:layout_width="0dp"
  android:layout_height="100dp"
  android:layout_alignLeft="@id/strut"
  android:layout_alignParentRight="true"
  android:layout_below="@id/txtCurrentLocation"
  android:gravity="center"
  pixlui:typeface="Lato-Light.ttf" />

</RelativeLayout>

Should I be utilizing a LinearLayout here instead or is there a better way to construct this?

Solution

Try something like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:pixlui="http://schemas.android.com/apk/com.neopixl.pixlui"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">
    <View
        android:background="#EAF4F9"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/header"
        android:layout_alignBottom="@+id/btnOne" />
    <TextView
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginBottom="15dp"
        android:layout_alignParentTop="true"
        android:text="Hello" />
    <EditText
        android:inputType="numberDecimal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/header"
        android:layout_alignParentLeft="true"
        android:id="@+id/search"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:hint="Search for..." />
    <Button
        android:text="Search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnSearch"
        android:layout_marginRight="10dp"
        android:layout_alignParentRight="true"
        android:layout_alignBaseline="@+id/search" />
    <TextView
        android:text="Use my current location"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/search"
        android:layout_marginTop="10dp"
        android:id="@+id/txtCurrentLocation"
        android:gravity="center" />
    <Button
        android:id="@+id/btnOne"
        android:text="Button One"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:layout_alignRight="@id/strut"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/txtCurrentLocation"
        android:gravity="center" />
</RelativeLayout>

Just replace the buttons and textviews with the pixlui versions where needed.