Dividing layout into regular shapes despite screen height

Question

I'm hoping to have 3 squares and a rectangle in the bottom half of the screen like so:

Does anyone know how to regulate the shapes so that the top 3 remain as squares and the width of the rectangle is twice the squares' even if the screen's vertical height is long/short? I've tried using layout_weight:1.0, but the heights can get stretched.

I'm hoping to not needing to fixate the widths and heights though.

Thanks

score 0 · Accepted Answer · answered Oct 11 '15 at 16:45

You can use GridLayout to achieve this, as it supports columnWeight and rowWeight attributes. Setting the rowWeight to 1 for each row, the columnWeight to 1 for each square and the rectangle columnSpan to 2 should create your desired effect.

To use this feature on API levels below 21, use the support version of GridLayout instead.

score 0 · Answer 2 · answered Oct 11 '15 at 16:49

Might be an overkill, and not so recommended due to performance issues. But still:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_weight="0.5"
            android:layout_height="0dp">

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_weight="0.5"
            android:weightSum="2"
            android:orientation="vertical"
            android:layout_height="0dp">
            <LinearLayout
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:orientation="horizontal"
                android:layout_height="0dp">
                <LinearLayout
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent">

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

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

                </LinearLayout>

            </LinearLayout>
            <LinearLayout
                android:orientation="horizontal"
                android:layout_weight="1"
                android:weightSum="3"
                android:layout_width="match_parent"
                android:layout_height="0dp">
                <LinearLayout
                    android:layout_weight="2"
                    android:layout_width="0dp"
                    android:layout_height="match_parent">

                </LinearLayout>

            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

Probably not recommended to nest `LinearLayout`s in this way as it can severely impact performance: http://stackoverflow.com/questions/9430764/why-are-nested-weights-bad-for-performance-alternatives — PPartisan, Oct 11 '15 at 16:54
Yep, not optimal. But could do if layout is not that complex. @PPartisan — Evgeny Maltsev, Oct 11 '15 at 16:59

score 0 · Answer 3 · answered Oct 11 '15 at 16:56

There are many ways to do this and you can use achieve it with only layout_weight if you want to.

1) Divide first row into 3 equal sized views by setting layout_weight="1" for each.

2) In second row you want to set View equal to the size of 2 views: Math for that is 2/3 = 0.67.

3) So set view layout_weight="0.67" in second row. You will also have to give remaining 0.33 width to invisible view.

Like this:

           <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <View
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"/>
                <View
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"/>
                <View
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    />
            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <View
                    android:layout_weight="0.67"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    />

                <View
                    android:layout_weight="0.33"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:visibility="invisible"/>
            </LinearLayout>

Dividing layout into regular shapes despite screen height

3 Answers3