Use multiple ImageViews as background

Question

I'm currently working on an app for 2 'players', the layout contains the same controls on top and (rotated) bottom. I use an image as background to display it for both players:

Blue represents player one, red represents player two. Grey is for settings. I used this until now, but I want the players to be able to change their background color.

My attempt was to put imageViews in the background, containing the selected color. But how can I put them in the background so my other views won't be affected? And how can I add multiple of them? I thought I could add two ImageViews to my RelativeLayout, the first one taking up 45% of parent space from top, and the second one from the bottom. The background itself would be grey for the center (for example).

How can I achieve that?

Answer 1

How about this?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
    android:id="@+id/layout_center"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_centerVertical="true"
    android:background="@android:color/darker_gray">

</LinearLayout>

<LinearLayout
    android:id="@+id/layout_top"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/layout_center"
    android:background="@android:color/holo_red_light">
</LinearLayout>

<LinearLayout
    android:id="@+id/layout_bottom"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/layout_center"
    android:background="@android:color/holo_blue_light">

</LinearLayout>
</RelativeLayout>