Including a background drawable foobars my layout in Android. Ideas why?

Question

If I don't include a background in my root layout then everything renders as I expect:

However, if I add JUST ONE LINE adding in a background then the layout goes completely haywire:

The relevant bit of the XML layout is:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width ="fill_parent"
    android:layout_height="fill_parent"
    android:paddingRight ="20dip" 
    android:paddingLeft  ="20dip"
    android:gravity      ="center_vertical"
    android:background   ="@drawable/main_background">

Quite literally the only difference between the above two screenshots is the inclusion of android:background="@drawable/main_background". I'll give you a cookie if you can help me out here :)

Answer 1

As to why you are experiencing what you are with the background, it may be that your background image somehow gets caught up in the gravity, but that's just a guess.

As a workaround, wrap your whole thing in a FrameLayout. Make the first child of the FrameLayout be an ImageView with your background. Make the second child of the FrameLayout be your existing LinearLayout (sans android:background) attribute. Since FrameLayout and RelativeLayout allow stacking, this will cause your LinearLayout to appear above the image and should give you the visual effect you seek.