Hierarchize layouts

3

I want to organize the screen of an activity in this way:

So far I have this but I overlap all the layouts starting from above one on top of another:

<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity"
android:background="@color/background">

<LinearLayout
    android:id="@+id/saldoLinearLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/saldoTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/saldo"
        android:textColor="@color/letra"
        android:textSize="24sp"
        android:textAlignment="center"/>
</LinearLayout>

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</TableLayout>

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</TableLayout>

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</TableLayout>

</RelativeLayout>
    
asked by Eduardo 21.04.2017 в 13:24
source

2 answers

4

Note: as I have seen that in your previous question they recommended the use of RelativeLayout and in this you include it, I will not recommend the use of another as the LinearLayout

You must use android:layout_below= android:id where the ID is the one of the top element.

In your image, in the Blue element, you would put android:layout_below="@+id/cuadradoVerde" and so on with the rest.

In this documentation you have a example

    
answered by 21.04.2017 / 13:31
source
3

First of all, here is a tutorial from some of the Android Layouts.

If you want to add elements so they fit one below the other, use a LinearLayout with vertical orientation:

<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity"
android:background="@color/background"
android:orientation="vertical">

<LinearLayout
    android:id="@+id/saldoLinearLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/saldoTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/saldo"
        android:textColor="@color/letra"
        android:textSize="24sp"
        android:textAlignment="center"/>
</LinearLayout>

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</TableLayout>

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</TableLayout>

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</TableLayout>

</LinearLayout>

If you want to establish hierarchies in a RelativeLayout use:

XML Attributes

android:layout_above    

Position the bottom edge of this viewpoint above the given ID anchor view.

android:layout_alignBaseline

Position the base of this point of view on the baseline of the given ID anchor opinion.

android:layout_alignBottom  

Makes the bottom edge of this view match the bottom edge of the given ID anchor view.

android:layout_alignEnd 

Makes the extreme edge of this viewpoint match the extreme edge of the given ID anchor view.

android:layout_alignLeft

Makes the left edge of this view match the left edge of the view of the given Identification anchor.

android:layout_alignParentBottom

If true, it makes the bottom edge of this viewpoint coincide with the bottom edge of the matrix.

android:layout_alignParentEnd   

If true, it makes the extreme edge of this point of view coincide with the extreme edge of the matrix.

android:layout_alignParentLeft  

If true, it makes the left edge of this point of view coincide with the left edge of the matrix.

android:layout_alignParentRight 

If true, it makes the right edge of this point of view coincide with the right edge of the matrix.

android:layout_alignParentStart 

If true, it makes the starting edge of this point of view coincide with the starting edge of the parents.

android:layout_alignParentTop

If true, it makes the top edge of this point of view coincide with the top edge of the matrix.

android:layout_alignRight   

Makes the right edge of this view match the right edge of the view of the given Identification anchor.

android:layout_alignStart   

Makes the starting edge of this view match the starting edge of the view of the given Identification anchor.

android:layout_alignTop 

Makes the top edge of this view match the top edge of the view of the given ID anchor.

android:layout_alignWithParentIfMissing 

If true, the parent will be used as the anchor when the anchor can not be found for layout_toLeftOf, layout_toRightOf, etc.

android:layout_below

Position the top edge of this viewpoint below the given ID anchor view.

android:layout_centerHorizontal 

If this is true, this child is centered horizontally within his womb.

android:layout_centerInParent

If this is true, this child focuses horizontally and vertically within his womb.

android:layout_centerVertical   

If this is true, this child is centered vertically within his womb.

android:layout_toEndOf  

Position the starting edge of this point of view until the end of the view of the given Identification anchor.

android:layout_toLeftOf 

Position the right edge of this view to the left of the view of the given Identification anchor.

android:layout_toRightOf    

Position the left edge of this viewpoint to the right of the given ID anchor view.

android:layout_toStartOf

Position the extreme edge of this view to start the view of the given Identification anchor.

You can read the documentation of the different Layouts here so you can learn which one to use in any design case.

    
answered by 21.04.2017 в 13:43