UI en Android: Layouts

UI en Android: Layouts 1
1.- Interfaz de usuario 1
2.- Layouts 1
3.- Formas de crear un layout 2
4.- Crear una UI en Android Studio 2
5.- Atributos de una vista 3
6.- Parámetros de una vista 4
7.- Tipos de layouts: 6
FrameLayout 6
LinearLayout 8
TableLayout 11
GridLayout 16
CoordinatorLayout y ConstraintLayout 21
8.- Editor visual de Android Studio 21

1.- Interfaz de usuario

La interfaz de usuario es un aspecto muy importante en una aplicación, ya que es la parte que va
a interactuar con el usuario.
La interfaz de usuario es todo aquello que el usuario puede ver en el dispositivo y con lo que
puede interactuar.
Android ofrece una gran variedad de componentes de IU que permitirán diseñar la interfaz gráfica
de usuario de una App sin problemas.

2.- Layouts
A la hora de crear el diseño para nuestras actividades es muy importante tener claro que son los
Layouts en Android.

Según la guía de desarrollo de Android Studio, se define un layout como una estructura visual
para una interfaz de usuario, es decir, aquello que hace de intermediario entre el terminal móvil y
el usuario.

Los layouts son un conjunto de contenedores donde podemos colocar una serie de elementos o
vistas (views) para establecer un orden visual.
Por ejemplo, dentro del layout podremos colocar botones, imágenes, textos, etc.
3.- Formas de crear un layout
En Android se pueden crear layout de dos formas: layouts creados a través de archivos XML, o
en las actividades con código Kotlin.

Lo recomendable es hacerlo por medio de archivos XML, ya que así el proyecto tiene una
estructura más organizada, se reduce tiempo en el diseño de la interfaz y ahorramos escribir todo
el código Kotlin que supone crear vistas de forma programática.

En ocasiones especiales, necesitaremos crear vistas desde nuestro código en Kotlin, por ejemplo,
cuando la vista se muestra de forma dinámica. Para este caso, se hará uso de las clases
ViewGroup y View.
- La clase View es un elemento visual que hace referencia a una vista. Cada elemento es un
objeto hijo de la clase View: TextView, EditView, etc.
- Mientras que ViewGroup es un elemento visual que se usa para contener a otros objetos
View y ViewGroup..
-
Por tanto, cuando haya que diseñar un layout con código Kotlin, habrá que usar el código
apropiado para añadir hijos, hasta crear el diseño deseado.

En la mayoría de los casos, se crearán los layouts haciendo uso de archivos XML.

Esto no quita que, en algunas ocasiones, necesitemos modificar mediante código Kotlin algunas
propiedades de elementos que hayamos creado por medio del XML.
- Esto quiere decir, que declarar los elementos de la UI en archivos XML es útil para crear
todo el aspecto visual que se usará en la app de forma estática.
- Pero si los elementos cambian por algún motivo cuando la app está en funcionamiento,
entonces se requiere código Kotlin para modificar dinámicamente los elementos de la UI.
Ambos métodos no son excluyentes.

4.- Crear una UI en Android Studio

Como hemos visto, al crear una App básica desde el asistente de Android Studio, éste se encarga
de crear un layout asociado a una actividad. De todas formas, se puede crear un layout de forma
manual.
Como recordareis, dentro de un proyecto existe un directorio llamado res para almacenar recursos
en la aplicación. Dentro de este directorio, existe la carpeta layout, destinada al almacenamiento
de layouts.

Para crear un nuevo layout, click derecho sobre la carpeta layout > new > layout resource file

Cada layout se corresponderá con un archivo XML. En un layout existirá un elemento raíz que
puede ser un ViewGroup o un View. Dentro de un ViewGroup se pueden incluir otros View y
ViewGroup que definan una estructura de diseño de forma jerárquica.
Algunos de los ViewGroup que veremos son:

- FrameLayout - GridLayout
- LinearLayout - CoordinatorLayout
- TableLayout - ConstraintLayout

Inflar un layout en una actividad

Una vez que se ha creado el layout, podemos “inflar” la vista en la actividad. Para ello, se hace
uso del método setContentView() dentro del método onCreate() de la actividad donde se quiere
mostrar la vista.

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}

Para hacer referencia al archivo del layout, usamos la referencia que existe dentro de R.java que
contiene las referencias a todos los recursos de la aplicación. El código anterior, carga un layout
llamado activity_main.xml.

R.java
R.java es un archivo que se genera automáticamente al compilar nuestra App. Es un listado de
referencias a recursos de la App. Mediante un sistema de identificadores, podemos hacer
referencia a cualquier recurso de la App.

Desde una actividad, se accede escribiendo “R.” seguido del tipo de recurso y la id del recurso.
Por ejemplo, un layout llamado main_activity se accede escribiendo en la actividad
“R.layout.main_activity”.
La primera vez que se usa R en una actividad, hay que seleccionar a qué R nos referimos, que
será el paquete de nuestra App. Esto es porque existen otros paquetes R predefinidos con
recursos. Por ejemplo, android.R tiene sus propios recursos predefinidos (colores, imágenes,
estilos, etc).

Desde un layout en XML también se puede hacer referencia a otros recursos, pero se realiza de
forma distinta a cómo se ha hecho en una actividad.
Para este caso, se utiliza el caracter arroba “@” seguido del tipo de recurso y el identificador. Por
ejemplo, si tenemos una imagen en la carpeta drawable llamada “logo”, desde el layout se hará
referencia escribiendo “@drawable/logo”

5.- Atributos de una vista

Cada View y ViewGroup tiene su propia variedad de atributos. Cada atributo representa una
característica de una vista, y determinan el aspecto o comportamiento de la vista dentro del
diseño.
Muchos atributos son comunes entre distintas vistas. Existen atributos para el tamaño, la
alineación, padding, bordes, backgrounds, etc.
Cada atributo XML descrito para un componente tiene una referencia en la clase Kotlin que lo
representa. Esto quiere decir que al usar un elemento <TextView>, nos estamos refiriendo a la
clase TextView.

Identificador de un view
Todos los elementos de un layout tienen un atributo en común llamado id. Es un identificador
único para cada elemento, que permite tener una referencia de cada objeto o vista.

La sintaxis para el id sería la siguiente:

android:id="@+id/nombre_identificador"

Obtener view en una actividad con findViewById()

Una vez se ha definido un layout con sus vistas, puede ser necesario manipular alguna vista
desde la actividad donde se carga el layout (código Kotlin). Para ello, se usa el método
findViewById().

Por ejemplo, teniendo el TextView (view para mostrar texto) del layout generado automáticamente
en Android Studio, supongamos que le asignamos un id para poder acceder a él desde la
actividad:

<TextView
android:id="@+id/texto_helloworld"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />

Hacemos referencia a él desde nuestra actividad con el método findViewById():

val textView = findViewById<TextView>(R.id.hello)

La estrategia es sencilla: Simplemente en la actividad se declara un objeto del tipo View que se
busca y se le asigna el mismo id que tiene la vista en el layout. Recordad que esto se hace por
medio de R.java, que es el archivo donde Android guarda todas las referencias de los recursos.

“Cuando estés programando y escribas R.id., verás como Android studio despliega
todos los identificadores que existen hasta el momento.”

6.- Parámetros de una vista

Los parámetros de una vista son atributos especiales que determinan cómo se relacionan los
hijos de un ViewGroup dependiendo de su posición y tamaño.
Se escriben con la sintaxis layout_parametro. En Kotlin, se hace referencia a ellos mediante la
clase ViewGroup.LayoutParams.
 Dependiendo de la jerarquía encontrada en el layout, así mismo se aplican los parámetros:

En la imagen, se muestra un layout cuyo elemento raíz es un LinearLayout. Sus 3 hijos (nivel 1) se
ajustan a los parámetros (LayoutParams) que éste les impone. Uno de los hijos es un
RelativeLayout que a su vez tiene 3 hijos. Las 3 vistas del nivel 2 estarán sometidas a los
parámetros del RelativeLayout.
Dependiendo del ViewGroup, así mismo será la naturaleza de los parámetros. Es decir, cada
ViewGroup tendrá sus propios parámetros de layout que afectarán de una manera u otra a sus
hijos. Aunque también existen parámetros que son comunes en todos los elementos, como se
verá a continuación.

layout_width y layout_height
Existen dos parámetros que son comunes en todos los elementos: layout_width y layout_height.
Estos parámetros definen el ancho y la altura de cualquier View.

Estos dos parámetros son de obligado uso en cualquier vista. Pueden tener 3 tipos de valores:
● wrap_content: Ajusta el tamaño al espacio mínimo que requiere el View, es decir, el
tamaño de la vista se ajusta al espacio que necesite.
Por ejemplo, si asignamos este valor al ancho y alto de un botón, el tamaño del botón será
el necesario para envolver el texto interior.

android:layout_width="wrap_content"
android:layout_height="wrap_content"

● match_parent: Ajusta el tamaño a las dimensiones máximas que la vista padre permita, es
decir, la vista aprovecha para ocupar todo el tamaño posible que pueda.
Por ejemplo, si en el mismo botón indicamos que el ancho sea match_parent, el ancho del
botón será todo aquel que le permita la vista padre.
 android:layout_width="match_parent"
android:layout_height="wrap_content"

● valor numérico: Es posible asignar medidas absolutas al tamaño de las vistas. Se indica
mediante un valor numérico y la unidad. La unidad puede ser px (píxel) o dp (pixel de
densidad independiente). Éste último es una unidad flexible que escala una dimensión
uniforme en cualquier pantalla.
Lo más recomendable es dp, ya que la vista se mostrará con el mismo tamaño en
pantallas con densidades diferentes.
Por ejemplo, si queremos que nuestro botón tenga un ancho de 300dp:
android:id="@+id/button"
android:layout_width="300dp"

Un dp es igual a un píxel en una pantalla de densidad de 160 píxeles. Para calcular dp:

dp = (ancho en pixeles * 160) / densidad de la pantalla

7.- Tipos de layouts:

FrameLayout
Un FrameLayout es el más simple de todos los layouts de Android. El FrameLayout no realiza
ninguna distribución de sus vistas hijo, simplemente las coloca unas encima de otras, de forma
que la última vista agregada se mostrará en la parte superior.

Aunque el FrameLayout coloque una vista sobre otra, permite alinear las vistas dentro del layout.
Para ello, se usa el parámetro layout_gravity.
El parámetro gravity se basa en las posiciones comunes de un view dentro del layout. Se describe
con constantes de orientación:
- top: Indica la parte superior del layout.
- left: Indica la parte izquierda del layout.
- right: Se refiere a la parte derecha del layout.
- bottom: Representa el límite inferior del layout.
- center_horizontal: Centro horizontal del layout.
- center_vertical: Alineación al centro vertical del layout.
- center: Es la combinación de center_horizontal y center_vertical.
Es posible crear variaciones combinadas, como por ejemplo right + bottom. En código esta
combinación puedes representarla con un OR inclusivo.
android:layout_gravity=“right|bottom"

Ejemplo de FrameLayout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/boton_saltar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="center_horizontal|bottom"
android:text="Saltar" />
<ImageView
android:id="@+id/imagen_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top|center"
android:scaleType="centerCrop"
android:src="@drawable/background_frame_layout" />
<ImageView
 android:id="@+id/imagen_estadistica"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="16dp"
android:src="@drawable/ejemplo_estadistica" />
</FrameLayout>

LinearLayout
Un LinearLayout es un ViewGroup que distribuye sus hijos en una sola dirección establecida. Es
decir, o todos organizados en una sola columna (vertical) o en una sola fila (horizontal). La
orientación puedes ser establecida a través del atributo android:orientation.
LinearLayout también permite asignar una gravedad al igual que FrameLayout, mediante el
parámetro layout_gravity.

También existe otro parámetro llamado android:layout_weight, el cual define la importancia que
tiene un view dentro del LinearLayout. A mayor importancia, más espacio podrá ocupar.
Por ejemplo, la siguiente ilustración muestra tres views con pesos de 1, 2 y 3 respectivamente.
Matemáticamente, el espacio disponible total sería la suma de las alturas (6), por lo que 3
representa el 50%, 2 el 33,33% y 1 el 16,66%.
Para distribuir todos los elementos sobre el espacio total del layout, se puede usar el atributo
height con valor cero.
android:layout_height="0dp"
android:layout_weight="3"

Si no se hace así, la vista no ocupará el espacio total, si no que se definirá por las alturas que se
hayan definido. La vista quedaría así:

Ejemplo de LinearLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="48dp">
<TextView
android:id="@+id/texto_conectar"
android:layout_width="wrap_content"
 android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:text="Conectar"
android:textAppearance="?android:attr/textAppearanceLarge" />
<EditText
android:id="@+id/input_usuario"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:hint="Correo" />
<EditText
android:id="@+id/input_contrasena"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:ems="10"
android:hint="Contraseña"
android:inputType="textPassword" />
<Button
android:id="@+id/boton_iniciar_sesion"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:text="Iniciar Sesion" />
<TextView
android:id="@+id/texto_olvidaste_contrasena"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="¿Olvidaste tu constraseña?"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#0E8AEE" />
</LinearLayout>
TableLayout
Como su nombre indica, el TableLayout organiza sus vistas con aspecto de tabla, en filas y
columnas.
Para crear las filas se usa el componente TableRow dentro de TableLayout. Cada celda será un
view de cualquier tipo (imagen, texto, otro group view, etc.) dentro de la fila.
El TableRow tiene un parámetro llamado android:layout_column para asignar la columna a la
que pertenece cada celda en su interior. Incluso se puede usar el parámetro weight para declarar
pesos de las celdas.

El ancho de cada columna es definido tomando como referencia la celda más ancha. Pero
también se puede definir el comportamiento del ancho de las celdas con los siguientes atributos:
- android:shrinkColumns: permite marcar una o más columnas como “encogibles”, de forma
que su anchura se pueda reducir para adaptarse al tamaño del contenedor del TableLayout
En el ejemplo, se marca la columna 2 como “encogible”.

- android:stretchColumns: viene a ser la opuesta de la anterior, dado que permite que una
columna se expanda aumentando su anchura hasta que todo el contenido del TableLayout
ocupe la totalidad de la anchura de su contenedor.
En el ejemplo, en la captura 2 se asigna esta propiedad a la columna 3, y en la captura 3
tienen esta propiedad las columnas 1 y 3.

Ejemplo de TableLayout
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:stretchColumns="1">
<TableRow android:background="#128675">
<TextView
android:layout_column="0"
android:padding="3dp"
android:text="Producto"
android:textColor="@android:color/white" />
<TextView
 android:layout_column="2"
android:padding="3dp"
android:text="Subtotal"
android:textColor="@android:color/white" />
</TableRow>
<TableRow>
<TextView
android:layout_column="0"
android:padding="3dp"
android:text="Jabón de manos x 1" />
<TextView
android:layout_column="2"
android:gravity="left"
android:padding="3dp"
android:text="$2" />
</TableRow>
<TableRow>
<TextView
android:layout_column="0"
android:padding="3dp"
android:text="Shampoo Monster x 1" />

<TextView
android:layout_column="2"
android:gravity="left"
android:padding="3dp"
android:text="$10" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:padding="3dp"
android:text="Pastas Duria x 2" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:gravity="left"
android:padding="3dp"
android:text="$18" />
</TableRow>
<TableRow
 android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:padding="3dp"
android:text="Detergente Limpiadin x 1" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:gravity="left"
android:padding="3dp"
android:text="$13,4" />
</TableRow>
<View
android:layout_height="2dp"
android:background="#FF909090" />

<TableRow>
<TextView
android:layout_column="1"
android:padding="3dp"
android:text="Subtotal"
android:textColor="#128675" />
<TextView
android:id="@+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_gravity="left"
android:gravity="right"
android:padding="3dp"
android:text="$43,4" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:padding="3dp"
android:text="Costo envío"
 android:textColor="#128675" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_gravity="left"
android:gravity="right"
android:padding="3dp"
android:text="$10" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:padding="3dp"
android:text="Cupón"
android:textColor="#128675" />

<TextView
android:id="@+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_gravity="left"
android:gravity="right"
android:padding="3dp"
android:text="-$5" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:padding="3dp"
android:text="Total"
android:textColor="#128675" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_gravity="left"
 android:gravity="right"
android:padding="3dp"
android:text="$48,4" />
</TableRow>
</TableLayout>

GridLayout
Un GridLayout es un ViewGroup que alinea sus elementos hijos en una cuadrícula (parrilla o
grid). Se creó para evitar anidar LinearLayouts para crear diseños complejos.

Su funcionamiento se basa en un sistema de índices con inicio en cero. Es decir, la primera

columna (o fila) tiene asignado el índice 0, la segunda el 1, la tercera el 2, etc.
Los atributos más importantes del GridLayout son:
● columnCount: Cantidad de columnas que tendrá la cuadrícula.
● rowCount: Cantidad de filas de la cuadrícula.
● useDefaultMargins: true para establecer márgenes predeterminadas entre los ítems.
En cuanto a sus parámetros, es posible especificar la cantidad de filas y columnas que ocupará
una celda gracias a los atributos android:layout_rowSpan y android:layout_columnSpan. Esta
característica permite crear diseños irregulares, cosa que un TableLayout no permitiría.

El siguiente código muestra un TextView que ocupa 2 columnas y 3 filas.

<TextView
android:id="@+id/celda_1"
android:layout_columnSpan="2"
android:layout_rowSpan="3"
android:text="Celda 1" />

En la imagen mostrada al inicio, el GridLayout es una cuadrícula de 8×4 con 5 views. Sus atributos
span se encuentran escritos en de la forma axb. Como se puede ver, es posible expandir las
celdas de forma horizontal y vertical. Incluso es posible proyectar views de forma cruzada.
Si se observa bien, el elemento que se encuentra en la segunda fila con las especificaciones 1×2
se cruza en la columna 3. Esto se debe a que su ancho es de 3 unidades, per su atributo
columnSpan es igual a 2, lo que facilita al framework crear el cruce si existe espacio en blanco.

También puedes especificar a qué fila y columna pertenece cada view con los atributos
android:layout_row y android:layout_column.
El siguiente TextView se encuentra en la posición (0,0).
<TextView
android:id="@+id/celda_1"
android:layout_column="0"
android:layout_row="0"
android:text="Celda 1" />

Ejemplo de GridLayout
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alignmentMode="alignBounds"
android:columnCount="4"
android:rowCount="5">

<TextView
android:id="@+id/numero_7"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_row="0"
android:layout_column="0"
android:text="7" />

<TextView
android:id="@+id/numero_8"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
 android:layout_column="1"
android:text="8" />

<TextView
android:id="@+id/numero_9"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="2"
android:text="9" />

<TextView
android:id="@+id/numero_4"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_column="0"
android:text="4" />

<TextView
android:id="@+id/numero_5"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_column="1"
android:text="5" />

<TextView
android:id="@+id/numero_6"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_column="2"
android:text="6" />

<TextView
android:id="@+id/signo_por"
style="@style/AppTheme.BotonCalculadora.Rojo"
android:layout_row="1"
android:layout_column="3"
android:layout_gravity="fill"
android:gravity="center"
android:text="×" />

<TextView
 android:id="@+id/textView10"
style="@style/AppTheme.BotonCalculadora.Rojo"
android:layout_row="0"
android:layout_column="3"
android:layout_gravity="fill_horizontal"
android:text="÷" />

<TextView
android:id="@+id/numero_1"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_row="2"
android:layout_column="0"
android:text="1" />

<TextView
android:id="@+id/numero_2"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="1"
android:text="2" />

<TextView
android:id="@+id/numero_3"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="2"
android:text="3" />

<TextView
android:id="@+id/signo_menos"
style="@style/AppTheme.BotonCalculadora.Rojo"
android:layout_row="2"
android:layout_column="3"
android:layout_gravity="fill_horizontal"
android:gravity="center"
android:text="-" />

<TextView
android:id="@+id/punto"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_row="3"
android:layout_column="0"
android:layout_gravity="fill_horizontal"
android:gravity="center_horizontal"
 android:text="." />

<TextView
android:id="@+id/cero"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_row="3"
android:layout_column="1"
android:text="0" />

<TextView
android:id="@+id/signo_igua"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_row="3"
android:layout_column="2"
android:layout_gravity="fill_horizontal"
android:text="=" />

<TextView
android:id="@+id/signo_mas"
style="@style/AppTheme.BotonCalculadora.Rojo"
android:layout_row="3"
android:layout_rowSpan="2"
android:layout_column="3"
android:layout_gravity="fill"
android:text="+" />

<TextView
android:id="@+id/signo_igual"
style="@style/AppTheme.BotonCalculadora.Azul"
android:layout_row="4"
android:layout_column="0"
android:layout_columnSpan="3"
android:layout_gravity="fill_horizontal"
android:text="=" />
</GridLayout>
CoordinatorLayout y ConstraintLayout
Son dos layouts introducidos por Android posteriormente, es decir, no fueron definidos en las
primeras versiones de Android.

El CoordinatorLayout fue introducido con Material Design. Se podría decir que es como un super
FrameLayout, pero permite que sus elementos puedan realizar una serie de animaciones básicas.

El ConstraintLayout se presentó con la llegada de Android Studio 2.2. Es similar al

RelativeLayout, pero permite hacer diseños mucho más complejos, permitiendo establecer
relaciones entre todos los elementos y la propia vista padre.
Para usar ambos layouts, será necesario importar las librerías necesarias.
Debido a su complejidad, estos layouts se estudiarán más adelante, cuando adquiramos cierta
experiencia en el diseño.

8.- Editor visual de Android Studio

El editor visual de Android Studio facilita la creación de layouts con un sistema de drag and
drop. Esto quiere decir, que podemos arrastrar elementos desde un panel hacia el lienzo del
layout y ubicarlos instantáneamente.
Incluso podemos modificar los atributos y parámetros de forma visual sin tener que tocar el código
XML.
En la sección Palette (Paleta), se encuentran todos los elementos gráficos que se pueden añadir
a un layout, clasificados por categorías. Basta con seleccionar un elemento y arrastrarlo al lienzo o
al árbol de componentes (jerarquía) para añadirlo.

En el lienzo se muestra una representación visual en tiempo real del layout. También una imagen
donde se muestran las guías y límites de cada elemento del layout.

En Attributes (panel de atributos) se muestran los atributos del elemento view que haya
seleccionado en la jerarquía de componentes. Permite cambiar las opciones de los atributos sin
tener que recurrir al código XML.

En la parte de variaciones del editor, podemos realizar varios cambios que afectarán al diseño
mostrado en el lienzo:

- Cambiar versión de Android: Se puede cambiar la versión

de Android con que se está mostrando el layout actual con el
fin de comprobar su visualización en otras versiones.

- Visualizar layouts con múltiples idiomas: Si nuestra aplicación

cuenta con traducciones, se podrá ver como varía el layout en distintos
idiomas.

- Variar el tema del layout: Otra opción es la posibilidad

de seleccionar un tema distinto para probar cómo se
visualiza. Se muestran los estilos del sistema junto con
los que se hayan creado en el archivo styles.xml
 - Rotar pantalla: Para cambiar de portrait a landscape o
viceversa, utiliza el icono del dispositivo móvil con una flecha de
rotación. Además, desde este icono se podrá visualizar otras
opciones, como el aspecto en el nuevo Modo Noche, o cómo se
vería la aplicación con el estilo usado en Android para otro tipo de
dispositivos, como relojes, televisión, etc.

- Visualizar el layout con un dispositivo diferente: Es posible visualizar la aplicación en

diferentes dispositivos, que nos permite comprobar el layout en pantallas con tamaño y
densidades distintas.
También se muestran otro tipo de dispositivos, como Tablets, SmartWatches, etc.

- Crear variación landscape (horizontal) de un layout: A veces, al crear un layout vertical

y girar la pantalla comprobaremos que los elementos se desajustan y no se muestran
correctamente. La mejor solución es crear la versión en horizontal de nuestro layout.
Este archivo XML se puede crear manualmente, creando el directorio layout-land y
comprobando que el archivo tiene el mismo nombre que el archivo del layout vertical.
Pero desde el editor, podemos hacerlo automáticamente: Con el mismo botón para variar
entre vertical y horizontal, se muestra la opción Create Tablet Variation.
Después de pulsar en la opción, se creará el archivo XML correspondiente a la versión
horizontal, dentro de la carpeta layout-land.