3

Quiero organizar la pantalla de una actividad de esta forma:

Planteamiento de la idea

Hasta el momento tengo esto pero se me solapan todos los layouts empezando desde arriba uno encima de otro:

<?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>
2
  • te queda algo asi?
    – lois6b
    el 21 abr. 2017 a las 11:27
  • eso es, el primer layout he conseguido que se ajuste tal y como quiero en cambio los demás en vez de empezar donde termina el layout superior empiezan donde empieza el primero :( el 21 abr. 2017 a las 11:30

2 respuestas 2

4

Nota: como he visto que en tu pregunta anterior te recomendaban el uso de RelativeLayout y en ésta lo incluyes, no te recomendaré el uso de otro como el LinearLayout


Has de usar android:layout_below= android:id donde el ID es el del elemento superior.

En tu imagen, en el elemento Azul, pondrias android:layout_below="@+id/cuadradoVerde" y asi con el resto.

En esta documentación tienes un ejemplo

3
  • 1
    Gracias se agradece la ayuda ;D el 21 abr. 2017 a las 11:34
  • 1
    Como comentas @lois6b, de acuerdo a su pregunta anterior y esta, la mejor solución es esta que comentas definitivamente.
    – Jorgesys
    el 21 abr. 2017 a las 14:46
  • 1
    @Jorgesys gracias ^^, pero bueno, es cosa del autor. heheh
    – lois6b
    el 21 abr. 2017 a las 15:02
3

Antes que nada aquí te dejo un tutorial de algunos de los Layouts de Android.

Si quieres agregar elementos de forma en que vayan quedando uno debajo del otro utiliza un LinearLayout con orientación vertical:

<?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>

Si lo que quieres es establecer jerarquías en un RelativeLayout utiliza:

Atributos XML

android:layout_above    

Posiciona el borde inferior de este punto de vista por encima de la vista de anclaje ID dado.

android:layout_alignBaseline

Posiciona a la base de este punto de vista sobre la línea de base de la opinión de anclaje ID dado.

android:layout_alignBottom  

Hace que el borde inferior de este punto de vista coincide con el borde inferior de la vista de anclaje ID dado.

android:layout_alignEnd 

Hace que el borde extremo de este punto de vista coincide con el borde extremo de la vista de anclaje ID dado.

android:layout_alignLeft

Hace que el borde izquierdo de este punto de vista coincide con el borde izquierdo de la vista del ancla Identificación dado.

android:layout_alignParentBottom

Si es verdad, hace que el borde inferior de este punto de vista coincide con el borde inferior de la matriz.

android:layout_alignParentEnd   

Si es verdad, hace que el borde extremo de este punto de vista coincide con el borde extremo de la matriz.

android:layout_alignParentLeft  

Si es verdad, hace que el borde izquierdo de este punto de vista coincide con el borde izquierdo de la matriz.

android:layout_alignParentRight 

Si es verdad, hace que el borde derecho de este punto de vista coincide con el borde derecho de la matriz.

android:layout_alignParentStart 

Si es verdad, hace que el borde de inicio de este punto de vista coincide con el borde de inicio de los padres.

android:layout_alignParentTop

Si es verdad, hace que el borde superior de este punto de vista coincide con el borde superior de la matriz.

android:layout_alignRight   

Hace que el borde derecho de este punto de vista coincide con el borde derecho de la vista del ancla Identificación dado.

android:layout_alignStart   

Hace que el borde de inicio de este punto de vista coincide con el borde de inicio de la vista del ancla Identificación dado.

android:layout_alignTop 

Hace que el borde superior de este punto de vista coincide con el borde superior de la vista del ancla Identificación dado.

android:layout_alignWithParentIfMissing 

Si es verdadero, el padre será usado como el ancla cuando el ancla no se puede encontrar para layout_toLeftOf, layout_toRightOf, etc.

android:layout_below

Posiciona el borde superior de este punto de vista debajo de la vista de anclaje ID dado.

android:layout_centerHorizontal 

Si esto es cierto, se centra este niño horizontalmente dentro de su matriz.

android:layout_centerInParent

Si esto es cierto, se centra este niño horizontal y verticalmente dentro de su matriz.

android:layout_centerVertical   

Si esto es cierto, se centra este niño verticalmente dentro de su matriz.

android:layout_toEndOf  

Posiciona el borde de inicio de este punto de vista hasta el final de la vista del ancla Identificación dado.

android:layout_toLeftOf 

Posiciona el borde derecho de este punto de vista a la izquierda de la vista del ancla Identificación dado.

android:layout_toRightOf    

Posiciona el borde izquierdo de este punto de vista a la derecha de la vista de anclaje ID dado.

android:layout_toStartOf

Posiciona el borde extremo de esta vista para el inicio de la vista del ancla Identificación dado.

Puedes leerte la documentación de los diferentes Layouts aqui para que aprendas cual usar en cualquier caso de diseño.

5
  • Mi idea es la de según cada cajetin de color que he adjuntado en la foto emplear un layout ya que quiero que tenga distintas orientaciones. Es decir en el primer cajetin verde aparecera un textview, en el cajetin azul un TableLayout en el siguiente un linearLayout. Que me recomiendas meter todo en un linear layout? el 21 abr. 2017 a las 11:47
  • En realidad no es necesario utilizar TableLayouts. Puedes crear más LinearLayouts o incluso Relatives dentro de tu LinearLayout padre. Todo depende de cómo se te haga mas cómodo y lo que quieras hacer. el 21 abr. 2017 a las 11:49
  • Pero debes saber como utilizas las propiedades de los Layouts, para definir el tamaño, margenes, tamaño de los items que estarán dentro de esos Layouts hijos y así. Leete bien la documentación para implementar diseños y practica. Con el tiempo aprenderás, tambien debes aprender a utilizar las propiedades de los layouts. ejemplo: diferencia entre layout_gravity y gravity, layout_margin y margin etc... el 21 abr. 2017 a las 12:00
  • Le pegaré una leída ahora en cuanto pueda. Mi idea es hacer el gui principal de mi juego/aplicación. Donde en el primer cajetín aparecería el saldo que dispone, en El Segundo cajetín dos layouts donde aparecería el valor mayor y menor de los valores de bolsa. El tercer cajetín una lista de botonos con todas las entidades con las que quiero operar y abajo tres botones donde poder cambiar de menu. el 21 abr. 2017 a las 12:33
  • "se centra este niño verticalmente"...un niño? ⤜(ʘ_ʘ)⤏
    – Jorgesys
    el 21 abr. 2017 a las 14:45

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.