Place four relative layouts on the screen

I am trying to fit four RelativeLayouts

on the screen the same way as shown in the image below. I can't seem to find anything. Each of them will contain a text label and a button centered in their quadrant. I tried setting four inside RelativeLayout

with set values alignComponent

and values alignParent

set left / right and top / bottom. I also tried to install only alignComponent

and only alignParent

to no avail.

It should look like this:

enter image description here

+3


source to share


5 answers


Since you want to use RelativeLayout

, the easiest way is to use vertical and horizontal posts (which are invisible) and use them as anchors for your four children RelativeLayout

. This approach is definitely more efficient than nested LinearLayout

with weights. You should probably read before investing LinearLayout

with weights.

An excerpt from the above link:

The layout scales require the widget to be measured twice. When a LinearLayout with non-zero weights is nested inside another LinearLayout with non-zero weights, the number of dimensions increases exponentially.



So, for use RelativeLayout

with strings, your XML might look something like this:

<RelativeLayout 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"
    tools:context="${relativePackage}.${activityClass}" >

    <View
        android:id="@+id/horizontalStrut"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerVertical="true" />

    <View
        android:id="@+id/verticalStrut"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerHorizontal="true" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/horizontalStrut"
        android:layout_toLeftOf="@id/verticalStrut"
        android:background="@color/red" >
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/horizontalStrut"
        android:layout_toRightOf="@id/verticalStrut"
        android:background="@color/black" >
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/horizontalStrut"
        android:layout_toLeftOf="@id/verticalStrut"
        android:background="@color/blue" >
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/horizontalStrut"
        android:layout_toRightOf="@id/verticalStrut"
        android:background="@color/green" >
    </RelativeLayout>

</RelativeLayout>

      

+5


source


Try this layout .. It might help you ...

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" >

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@color/black" >

            <!-- put your stuff here -->
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@color/red" >

            <!-- put your stuff here -->
        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" >

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@color/white" >

            <!-- put your stuff here -->

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@color/green" >

            <!-- put your stuff here -->

        </RelativeLayout>
    </LinearLayout>

</LinearLayout>

      



Sample output.

enter image description here

+2


source


<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#0B6121"
        android:orientation="vertical" >
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" 
        android:background="#DF013A">
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" 
        android:background="#0080FF">
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#A901DB"
        android:orientation="vertical" >
    </LinearLayout>
</LinearLayout>

      

+1


source


enter image description here You can easily do this with LinearLayout or tableLayout SAmple shows using LinearLayout

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal" >
    <LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:background="#FF0000" >
</LinearLayout>
<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:background="#331323" >
</LinearLayout>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal" >
    <LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:background="#662200" >
</LinearLayout>
<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:background="#FF8800" >
</LinearLayout>
</LinearLayout>

      

+1


source


You can use LinearLayout and then set android: weightSum for your parent layout, then you can set your layout now for your quadrants. Like this..

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum = "2"
android:orientation="vertical" >

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

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@color/black" >
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@color/red" >
    </RelativeLayout>
</LinearLayout>

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

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@color/white" >
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@color/green" >
    </RelativeLayout>
</LinearLayout>

      

+1


source







All Articles