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/