Position four relative layouts equally on screen

Flatlyn

I'm trying to position four RelativeLayouts on the screen equally as shown on the image below. I just can't seem to get anywhere. Each one will contain a text label and a button centred in their quadrant. I've tried placing the four inside RelativeLayout with the alignComponent values set appropriately and alignParent values set to Left/Right and Top/Bottom. I've also tried with just the alignComponent set and just alignParent set but to no avail.

It should look like this,

enter image description here

Voicu

Since you want to use RelativeLayout, the easiest way is to use vertical and horizontal struts (which are invisible) and use those as anchors for your four RelativeLayouts children. This approach is definitely more efficient than nested LinearLayouts with weights. You should probably read this before nesting LinearLayouts with weights.

A snippet from the above link:

Layout weights require a widget to be measured twice. When a LinearLayout with non-zero weights is nested inside another LinearLayout with non-zero weights, then the number of measurements increase exponentially.

So for using RelativeLayouts with struts, your XML could be 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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Position four relative layouts equally on screen

From Dev

Get position of ImageView relative to screen programmatically

From Dev

touch position relative to the screen. windows phone

From Dev

Caret position relative to screen coordinates in javaFX

From Dev

touch position relative to the screen. windows phone

From Dev

how to position Views on an Android screen relative to the screen edges using offsets in terms of pixel position on the screen coordinates?

From Dev

Adobe Flash Actionscript Augmented Reality object position relative to screen

From Dev

A CSS (or JavaScript) way of making an elements position relative to the screen resolution

From Dev

Find position of mouse relative to control, rather than screen

From Dev

CSS: How to get position and size relative to screen width?

From Dev

Make a DIV full screen and act like position relative

From Java

Equally spaced four images using constraint layout

From Dev

To align all buttons equally in relative layout

From Dev

xml align problems want relative layout with four imageviews to be in middle on any screen

From Dev

How to make equally sized windows in corners of the screen?

From Dev

Unable to make two views to occupy the screen equally

From Dev

Primefaces 8.0 Calendar popup within Dialog is positioned relative to parent screen scroll position

From Java

How to get the cursor position of a TextInput relative to its parent or screen in React native

From Dev

Primefaces 8.0 Calendar popup within Dialog is positioned relative to parent screen scroll position

From Dev

Relative Layout with a nested Linear Layout inside. How to position the Linear layout at the bottom of the screen?

From Dev

How can I make part of my page always be in the same position relative to the screen?

From Dev

Javascript get an Element's position relative to the screen's top left corner

From Dev

Relative positions of four points in plane

From Dev

Android Layouts by screen size, not dpi

From Dev

Is it possible to have four equally sized windows on Ubuntu 14.04 LTS?

From Dev

position relative overlapping position fixed

From Dev

CSS: absolute position and relative position

From Dev

How to make 2 horizontal buttons to fill relative layout equally?

From Dev

android - aligning siblings of different relative layouts

Related Related

  1. 1

    Position four relative layouts equally on screen

  2. 2

    Get position of ImageView relative to screen programmatically

  3. 3

    touch position relative to the screen. windows phone

  4. 4

    Caret position relative to screen coordinates in javaFX

  5. 5

    touch position relative to the screen. windows phone

  6. 6

    how to position Views on an Android screen relative to the screen edges using offsets in terms of pixel position on the screen coordinates?

  7. 7

    Adobe Flash Actionscript Augmented Reality object position relative to screen

  8. 8

    A CSS (or JavaScript) way of making an elements position relative to the screen resolution

  9. 9

    Find position of mouse relative to control, rather than screen

  10. 10

    CSS: How to get position and size relative to screen width?

  11. 11

    Make a DIV full screen and act like position relative

  12. 12

    Equally spaced four images using constraint layout

  13. 13

    To align all buttons equally in relative layout

  14. 14

    xml align problems want relative layout with four imageviews to be in middle on any screen

  15. 15

    How to make equally sized windows in corners of the screen?

  16. 16

    Unable to make two views to occupy the screen equally

  17. 17

    Primefaces 8.0 Calendar popup within Dialog is positioned relative to parent screen scroll position

  18. 18

    How to get the cursor position of a TextInput relative to its parent or screen in React native

  19. 19

    Primefaces 8.0 Calendar popup within Dialog is positioned relative to parent screen scroll position

  20. 20

    Relative Layout with a nested Linear Layout inside. How to position the Linear layout at the bottom of the screen?

  21. 21

    How can I make part of my page always be in the same position relative to the screen?

  22. 22

    Javascript get an Element's position relative to the screen's top left corner

  23. 23

    Relative positions of four points in plane

  24. 24

    Android Layouts by screen size, not dpi

  25. 25

    Is it possible to have four equally sized windows on Ubuntu 14.04 LTS?

  26. 26

    position relative overlapping position fixed

  27. 27

    CSS: absolute position and relative position

  28. 28

    How to make 2 horizontal buttons to fill relative layout equally?

  29. 29

    android - aligning siblings of different relative layouts

HotTag

Archive