LinearLayout is interfering with other objects?

Question

I have a LinearLayout that has 3 layouts at the top. (So the grey bar at the top is split into 3 pieces) Each will have a button in them. I only have 2 with buttons in them at the moment.

This is what it should look like (imagine another button at the top right) The top bar with the buttons in it is 60dp high:

And I want to have a LinearLayout under it. But when I add one and set it at

android:layout_marginTop="60dp"

Thinking it would just set itself under the top grey bar, it moves the middle layout over. The third layout is all the way off the screen.

Like so:

But I want it to look like this (sorry for my lack of MS Paint skills):

So how do I set it so the LinearLayout on the bottom doesn't interfere with the Layouts above it?

XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background"
android:baselineAligned="true"
android:orientation="horizontal" >

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="120dp"
    android:layout_height="60dp"
    android:background="@drawable/topbar"
    android:orientation="vertical" >

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/camerabuttonmew"
        android:background="@null"
        android:layout_margin="5dp" />

</LinearLayout>



<LinearLayout
    android:id="@+id/LinearLayout02"
    android:layout_width="120dp"
    android:layout_height="60dp"
    android:background="@drawable/topbar"
    android:orientation="vertical" >


    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@null"
        android:src="@drawable/homebuttonnew"
        android:layout_margin="5dp" />

</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayout2"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@drawable/topbar" >
</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayout3"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_marginTop="60dp" >
</LinearLayout>

Answer 1

Have you considered using a Relative Layout and with the images at the top and the LinearLayout under it. A helpful tutorial, http://www.higherpass.com/Android/Tutorials/Exploring-Android-Linearlayout-And-Relativelayout/

Answer 2

Create a vertical linear layout with two sub layouts, another horizontal linear layout for the buttons in the top row, and whatever layout you want for the area under the buttons. Right now your outer layout is a horizontal linear layout so every time you add subviews/layouts it pushes everything over.

  <LinearLayout
  android:id="@+id/outer_container"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical">
    <LinearLayout
        android:id="@+id/buttons"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
    ...
    </LinearLayout>
    <FrameLayout
        android:id="@+id/everything_else"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
    ...
    </FrameLayout>
 </LinearLayout>

The everything else layout doesn't need to be a frame layout, i'm just using it as a placeholder.