Android Layout & overlapping issue

The image is what i'm trying to achieve. I tried using tab layout, relativelayout and linearlayout (and even a combination), but in no scenario i got it exactly right.

The requirements:

• no overlapping of any component
• no clipping of the image in the button (the green one)
• the red bar is always at the bottom
• in landscape, the components should still be in their same place, but you can scroll down

If required I can paste my current variations of the different layouts, but they are all rather big and messy.

Professional insights on which layo开发者_JAVA百科ut approach you would use is also appreciated, at least i can keep trying using the right things then.

At the moment, the orange things are normal buttons, defined like so:

<Button
android:id="@+id/btn_web"
style="@style/NewButton2"
android:onClick="webClick"
android:text="@string/Text_Web"
android:drawableTop="@drawable/jc_menu_web"
android:layout_weight="0.3"

/>

This is a problem on its own,because if you stretch the buttons using fill_parent, the result is that the image will be high at the top, whereas the text will be entirely at the bottom.Would be nicer if it were a centered image in the button.