divide screen into 4 equal parts - android

Question

I want my screen in android to be devided into 4 equal parts that are the same size. It has to work in landscape mode.This is an example of how i want it to look like

Answer 1

In addition to mjp66 answer I can say that this layout can be better done using GridLayout from support library. In this case you don't need to take care of changes in multiple columns, if there'll be any.

Your code will look like this:

<android.support.v7.widget.GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:rowCount="2"
    app:columnCount="2">

    <View
        android:id="@+id/top_left"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"/>

    <View
        android:id="@+id/top_right"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"/>

    <View
        android:id="@+id/bottom_left"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"/>

    <View
        android:id="@+id/bottom_right"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"/>

</android.support.v7.widget.GridLayout>

So, you don't need to take care of width/height, layout will be performed automatically.

Answer 2

You can do it using nothing but LinearLayouts and weights:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    android:padding="10dp" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".5"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:orientation="vertical"
            android:layout_marginRight="5dp"
            android:layout_marginBottom="5dp"
            android:background="#ff0000"/>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:orientation="vertical"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:background="#ff8000"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".5"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:orientation="vertical"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:background="#336699"/>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:orientation="vertical"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:background="#993366"/>

        </LinearLayout>

</LinearLayout>

UPDATE: with 10dp "whitespace" around and in between the blocks. If you also want to apply rounded corners to each block, like in your screenshot, look into android's xml drawables. These can then be applied to android:background instead of solid colors like in my example ;)

UPDATE 2: creating rounded corners with xml drawable:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="10dp" />
    <solid
        android:color="#ff8000" />
</shape>

Save the xml drawable to your drawable directory just like you would with any other images (png/jpg/etc) and reference it from your views, for example:

android:background="@drawable/your_xml_drawable_res"

Of course if you apply the same resource as the backgrounds for all 4 squares, you'll get four orange (#ff8000) backgrounds. You could just create 4 copies of the xml drawable above and change android:color in each copy to a unique shade.

And that's about it ;)

Answer 3

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight=".5"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".5"
        android:orientation="vertical"
        android:background="#ff0000"/>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".5"
        android:orientation="vertical"
        android:background="#ff8000"/>

</LinearLayout>


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight=".5"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".5"
        android:orientation="vertical"
        android:background="#336699"/>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight=".5"
        android:orientation="vertical"
        android:background="#993366"/>

</LinearLayout>