Top LinearLayout to take maximum space before bottom LinearLayout

Question

First of all, here is the structure of my activity_main.xml file :

• RelativeLayout
  • LinearLayout
    • fragment (Google Map)
  • LinearLayout
    • SeekBar
    • TextView
    • ImageButton

I am trying to stick the second linear layout (the one not containing the map) to the bottom, whilst the map takes the rest of the space on screen (stopping right before that layout). The solution I currently have works fine on my GS3 but the second LinearLayout doesn't show on smaller screen devices (probably because of the defined size (480dp) of my first LinearLayout?)

How can I achieve this ?

Here is my xml file :

<?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/map_layout"
        android:layout_width="match_parent"
        android:layout_height="480dp"
        android:orientation="vertical">

        <fragment
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:id="@+id/map"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal" />
    </LinearLayout>

    <LinearLayout
        android:layout_below="@+id/map_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <SeekBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/price_seekbar" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="1€"
            android:progress="3"
            android:max="15"
            android:id="@+id/price_seekbar_value" />

        <ImageButton
            android:id="@+id/advanced_search_image_button"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_gravity="right"
            android:src="@drawable/advanced_search_icon" />

    </LinearLayout>

</RelativeLayout>

Thank you for your advice.

Answer 1

Replace these following into your XML...

For first LinearLayout, replace this...

<LinearLayout
    android:id="@+id/map_layout"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_above="@+id/rest_of_layout"
    android:orientation="vertical" >

For second LinearLayout, replace this...

<LinearLayout
    android:id="@+id/rest_of_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal" >

Answer 2

You can include the second layout into the first, under the fragment, and set the first layout's layout_height="match_parent". This way it will works on every screen size. Ins't a good thing to use a static value to define height... and isn't good to set the same id on two layout! ;) Let me know if it's a good solution for you! :)

Answer 3

In 1st LinearLayout use

android:layout_above="@+id/second_linearlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"

In 2nd LinearLayout use

android:layout_alignParentBottom="true"

I think it will solve your problem

Answer 4

Replace RelativeLayout with LinearLayout and use android:gravity="bottom" with it. For first LinearLayout (with Maps) set attributes to this:

android:layout_height="0dip"
android:layout_weight="0.4"

---

Another way - for second layout use android:layout_alignParentBottom="true", and change id to something different ("map_buttons" for example)

For first layout use

android:layout_above="@id/map_buttons"
android:layout_height="match_parent"