Question

I would like to divide my current view into 4 areas (not divide the screen into 4, but divide the view) like following:

I would like to have the following sized layout for the view:

That’s horizontally divided into half of the view for each.
vertically, the upper area has 1/3 view height and lower two areas holds 2/3 view height.

I do successfully divided my view into 4 equal sized areas by:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    <LinearLayout
        android:id="@+id/top_area"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:orientation="horizontal"


    >
        <LinearLayout
            android:id="@+id/top_left_area"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@drawable/content_blue_bg"
            >
            <TextView

                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:text="TOP LEFT"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/top_right_area"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@drawable/content_blue_bg"
            >
            <TextView

                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:text="TOP RIGHT"/>
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/bottom_area"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"    
        android:orientation="horizontal"
        >

        <LinearLayout
            android:id="@+id/bottom_left_area"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"

            >

                <TextView 
               android:layout_width="fill_parent"
               android:layout_height="fill_parent"
               android:text="BOTTOM LEFT"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/bottom_right_area"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@drawable/content_blue_bg"
            >
            <TextView

                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:text="BOTTOM RIGHT"/>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

But how can I have the 1/3 view height for the uper areas and 2/3 view height for the lower areas?

Answer 1

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
    android:id="@+id/top_area"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_weight="1"
    android:orientation="horizontal"
>
    <LinearLayout
        android:id="@+id/top_left_area"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/content_blue_bg"
        >
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="TOP LEFT"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/top_right_area"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/content_blue_bg"
        >
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="TOP RIGHT"/>
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/bottom_area"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_weight="2"    
    android:orientation="horizontal"
    >
    <LinearLayout
        android:id="@+id/bottom_left_area"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        >

            <TextView 
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:text="BOTTOM LEFT"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/bottom_right_area"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/content_blue_bg"
        >
        <TextView

            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="BOTTOM RIGHT"/>
    </LinearLayout>
</LinearLayout>

All you were missing is setting the bottom layout to 70% and the top layout to 30%

This had just been posted on my Twitter http://blog.stylingandroid.com/archives/297 🙂