CODEWITHSUNDEEP
androidandroid-layoutspace
Settembrini
Settembrini

Reputation: 1396

Create three equally spaced (sub-) Layouts where 1st is on top and 3rd is on bottom

I have tried quite a while and not found a convincing solution for the below Layout Problem. E.g. if I use a RelativeLayout as Container, I can use for (sub-) Layout A 

 android:layout_alignParentTop="true"

And for (sub-)Layout C

android:layout_alignParentBottom="true">

but then it seems impossible to place Layout B in such a way that the two spaces are of the same height. Does anyone see a solution for this in .xml?

enter image description here

Upvotes: 0

Views: 34

Answers (2)

Fer
Fer

Reputation: 1995

Try with this (sorry I cannot test it right now):

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Any_layout_type_you_want
        android:id="@+id/sub_layout_a"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        ...
    </Any_layout_type_you_want>

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    <Any_layout_type_you_want
        android:id="@+id/sub_layout_b"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        ...
    </Any_layout_type_you_want>

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    <Any_layout_type_you_want
        android:id="@+id/sub_layout_c"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        ...
    </Any_layout_type_you_want>

</LinearLayout>

Upvotes: 1

ianhanniballake
ianhanniballake

Reputation: 200010

When stacking elements on top of one another, LinearLayout is an easy choice. With sub-layout A and sub-layout C taking up only the space they need, the remaining space is then allocated to Sub-layout B and any spacing needed to fill the remaining space. This can be done by wrapping Sub-layout B in a FrameLayout:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <FrameLayout
        android:id="@+id/sub_layout_a"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </FrameLayout>
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <FrameLayout
            android:id="@+id/sub_layout_b"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical">
        </FrameLayout>
    </FrameLayout>
    <FrameLayout
        android:id="@+id/sub_layout_c"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </FrameLayout>
</LinearLayout>

You'll note the FrameLayout for sub_layout_a and sub_layout_b can be any layout - just make sure the layout_height="wrap_content" (or a fixed value) so that they only take the space they need.

The remaining space is allocated to the middle FrameLayout by using a layout_height="0dp" and layout_weight="1" - the layout_weight is what stretches it to fill all the remaining space. That allows us to then center the inner sub_layout_b within that space by using android:layout_gravity="center_vertical", leaving an equal amount of empty space on either side of sub_layout_b.

Upvotes: 1

Related Questions