Layouts Android Studio

Vista previa del material en texto

UNIVERSIDAD TECNOLÓGICA DE EL SALVADOR 
FACULTAD DE INFORMÁTICA Y CIENCIAS APLICADAS 
ESCUELA DE INFORMÁTICA 
 
 
 
MATERIA: 
TÉCNICAS DE PRODUCCIÓN INDUSTRIAL DE SOFTWARE I 
DOCENTE: 
ING. JOSE OSWALDO BARRERA MONTES 
 
 
 
Nombre del Alumno: 
 
 
Madeline Guadalupe Ulloa Soto 
No. Carnet: 
29-4019-2020 
 
 
Tarea : 
 
Layouts 
 
Fecha de entrega: 
 
23 / Febrero / 2024 
 
 
 
Ciclo 01-24 
Layouts 
Son un conjunto de contenedores en donde podemos colocar muchos 
elementos según el diseño de nuestra aplicación, por ejemplo dentro de un 
Layout puedes colocar, botones, imágenes, formularios, textos, etc. todos estos 
deben tener un orden y armonía entre si dentro del diseño, para esto debemos 
haber elegido un Layout primero para luego colocar dentro de este los 
elementos que necesitemos. 
Tipos de Layouts: 
1. LinearLayout: Dispone los elementos en una fila o en una columna. 
2. TableLayout: Distribuye los elementos de forma tabular. 
3. RelativeLayout: Dispone los elementos en relación a otro o al padre. 
4. ConstraintLayout: Versión mejorada de RelativeLayout, que permite una 
edición visual desde el editor. 
5. FrameLayout: Permite el cambio dinámico de los elementos que 
contiene. 
6. AbsoluteLayout: Posiciona los elementos de forma absoluta. 
 
*Por motivo de la versión de Android Studio que poseo, me centraré en los 
Layouts que esta versión me permite utilizar que son: ConstraintLayout, 
FrameLayout, LinearLayout, y TableLayout. 
 
 Constraint Layout 
Este Layout nos ayuda mucho a diseñar interfaces de nuestra aplicación sin 
tener que depender de muchos Layouts como Linear, Frame, Table o Grid 
Layout. 
Características: 
 Alineas cada vista en función de las que tienen al lado o de la que la 
envuelve. 
 Cada vista tiene al menos dos restricciones: horizontal y vertical. Estas 
restricciones está conectada con el layout padre o una línea de guía 
invisible. 
Este Layout es útil para trabajar con Grandes grupos de elementos porque nos 
crea un orden jerárquico dinámico, podemos agregar elementos adicionales y 
darles restricciones para que cuando muevas la posición de la pantalla del 
móvil, en la sección señalada podemos ver todos los elementos posibles de 
agregar, además de eso podemos manualmente centrar o alinear los 
elementos de forma que se vean bien al ejecutar la aplicación. 
 
 
 
Para mover, desplazar y alinear los elementos solo debemos utilizar los 
círculos alrededor de los elementos y así centrarlos a la pantalla, esta es una 
de las formas fáciles de darles una mejor alineación. 
 
Otra de las formas en las cuales podemos agregar las proporciones tanto de 
tamaño como de alineación, es mediante la programacion en la pestaña 
“XML”, en el cual podemos agregar todos los atributos que deseamos en cada 
uno de los elementos. 
 
 
Código: 
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:app="http://schemas.android.com/apk/res-auto" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:background="#120942" 
 android:visibility="visible" 
 tools:context=".MainActivity"> 
 
 <TextView 
 android:id="@+id/textView5" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginStart="40dp" 
 android:layout_marginTop="5dp" 
 android:text="@string/Mensaje_textview" 
 android:textColor="#2196F3" 
 android:textSize="30sp" 
 app:layout_constraintBottom_toBottomOf="parent" 
 app:layout_constraintEnd_toEndOf="parent" 
 app:layout_constraintHorizontal_bias="0.44" 
 app:layout_constraintStart_toStartOf="parent" 
 app:layout_constraintTop_toTopOf="parent" 
 app:layout_constraintVertical_bias="0.023" /> 
 
 <TextView 
 android:id="@+id/textView4" 
 android:layout_width="362dp" 
 android:layout_height="56dp" 
 android:text="@string/Mensaje_textview2" 
 android:textSize="25sp" 
 app:layout_constraintBottom_toBottomOf="parent" 
 app:layout_constraintEnd_toEndOf="parent" 
 app:layout_constraintStart_toStartOf="parent" /> 
 
 <ImageView 
 android:id="@+id/imageView3" 
 android:layout_width="253dp" 
 android:layout_height="224dp" 
 
app:layout_constraintBottom_toTopOf="@+id/textView4" 
 app:layout_constraintEnd_toEndOf="parent" 
 app:layout_constraintHorizontal_bias="0.497" 
 app:layout_constraintStart_toStartOf="parent" 
 
app:layout_constraintTop_toBottomOf="@+id/textView5" 
 app:layout_constraintVertical_bias="0.274" 
 app:srcCompat="@drawable/ic_launcher_background" 
/> 
 
 <Button 
 android:id="@+id/button6" 
 android:layout_width="148dp" 
 android:layout_height="86dp" 
 android:background="#4CAF50" 
 android:text="@string/Mensaje_button" 
 
app:layout_constraintBottom_toTopOf="@+id/textView4" 
 app:layout_constraintEnd_toEndOf="parent" 
 app:layout_constraintStart_toStartOf="parent" 
 
app:layout_constraintTop_toBottomOf="@+id/imageView3" /> 
 
</androidx.constraintlayout.widget.ConstraintLayout> 
 
 
 
 
 
 
 
 
 
 Frame Layout 
 
Este Layout alinea todos los elementos de tu diseño (botones, Image View, 
etc.) Podemos aplicar márgenes para mostrar un elemento en un punto 
específico de la pantalla, puedes agregar varios elementos a nuestro diseño 
pero manteniendo el orden de los elementos para que nuestro diseño se vea 
agradable. 
* Posiciona todos los elementos usando todo el contenedor, sin distribuirlos 
espacialmente. 
 
 
 
Al ejecutar la App, esto debe verse de la siguiente forma: 
 
 
 
Código: 
<FrameLayout 
 android:layout_width="409dp" 
 android:layout_height="515dp" 
 app:layout_constraintBottom_toTopOf="@+id/textView4" 
 app:layout_constraintTop_toBottomOf="@+id/textView5" 
 tools:layout_editor_absoluteX="-4dp"> 
 
 <ImageView 
 android:id="@+id/imageView4" 
 android:layout_width="217dp" 
 android:layout_height="223dp" 
 android:layout_marginLeft="100dp" 
 android:layout_marginTop="50dp" 
 app:srcCompat="@drawable/ic_launcher_background" 
/> 
 
 <Button 
 android:id="@+id/button7" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="170dp" 
 android:layout_marginTop="285dp" 
 android:text="@string/Mensaje_button" /> 
</FrameLayout> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Linear Layout 
Se utiliza para alinear uno o varios elementos de tu diseño de forma vertical o 
horizontal, la orientación lo definimos con el atributo android: 
orientation=”horizontal” este tipo de Layout los podemos aplicar a los 
elementos que deben de centrarse en su totalidad, por ejemplo un formulario 
de contacto o una imagen con un botón, una orientación general a todos los 
elementos de tu vista. 
*Los elementos se irán apilando horizontal o verticalmente en función del 
parámetro orientation. 
 
 
En la Aplicación: 
 
 
Código: 
<LinearLayout 
 android:layout_width="416dp" 
 android:layout_height="547dp" 
 android:orientation="horizontal" 
 app:layout_constraintBottom_toTopOf="@+id/textView4" 
 app:layout_constraintTop_toBottomOf="@+id/textView5" 
 tools:layout_editor_absoluteX="0dp"> 
 
 <ImageButton 
 android:id="@+id/imageButton" 
 android:layout_width="249dp" 
 android:layout_height="193dp" 
 android:layout_marginLeft="30dp" 
 android:layout_marginTop="50dp" 
 android:layout_weight="1" 
 app:srcCompat="@drawable/ic_launcher_background"/> 
 
 <Button 
 android:id="@+id/button8" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginTop="50dp" 
 android:layout_weight="1" 
 android:text="@string/Mensaje_button" /> 
</LinearLayout> 
 
En dado caso queramos cambiar de Horizontal a Vertical, solo debemos 
cambiar en el código XML, “Vertical” por “Horizontal”. 
 
 
Table Layout 
El Layout de tipo TableLayout agrupa componentes en filas y columnas. Un 
TableLayout contiene un conjunto de componentes de tipo TableRow que es 
el que agrupa componentes visuales por cada fila (cada fila puede tener distinta 
cantidad de componentes visuales). 
 
Al agregar el Layout, podemos ver en la pestaña “Component Tree”, que se 
desplazan 4 “Table Row”, para agregar los elementos debemos seleccionar un 
“Table Row” y agregar los elementos que queramos y cuantos queramos, en 
mi caso seleccione solamente uno por línea a modo de ejemplo, aunque 
pueden seleccionarse más. 
 
 
 
 
 Al ejecutar la aplicación se muestra de la siguiente forma: 
 
 
 
* Se utiliza la etiqueta TableRow cada vez que queremos insertar una nueva 
línea. 
 
Código: 
<TableLayout 
 android:layout_width="409dp" 
 android:layout_height="612dp" 
 tools:layout_editor_absoluteX="1dp" 
 tools:layout_editor_absoluteY="61dp"> 
 
 <TableRow 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" > 
 
 <Button 
 android:id="@+id/button9" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="50dp" 
 android:layout_marginTop="100dp" 
 android:text="@string/Mensaje_button" /> 
 
 </TableRow> 
 
 <TableRow 
 android:layout_width="387dp" 
 android:layout_height="147dp"> 
 
 <ImageView 
 android:id="@+id/imageView6" 
 android:layout_width="294dp" 
 android:layout_height="221dp" 
 android:layout_marginLeft="50dp" 
 android:layout_marginTop="25dp" 
 
app:srcCompat="@drawable/ic_launcher_background" /> 
 
 </TableRow> 
 
 <TableRow 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" > 
 
 <Button 
 android:id="@+id/button17" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="50dp" 
 android:layout_marginTop="30dp" 
 android:text="@string/Mensaje_button1" /> 
 
 </TableRow> 
 
 <TableRow 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" > 
 
 <Switch 
 android:id="@+id/switch2" 
 android:layout_width="wrap_content" 
 android:layout_height="45dp" 
 android:layout_marginTop="50dp" 
 android:text="@string/swich1" 
 tools:textColor="@color/white" 
 tools:textSize="15sp" /> 
 </TableRow> 
</TableLayout> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Conclusión. 
 Los layouts son importantes en Android porque facilitan la creación de 
interfaces de usuario atractivas, adaptables y funcionales, lo que contribuye a 
una mejor experiencia general del usuario y al éxito de la aplicación. 
Son fundamentales en el desarrollo de aplicaciones Android, nos permiten 
mayor organización visual lo que permite que los elementos en la interfaz del 
usuario sean mostrados de una manera ordenada, estructurada y coherente, 
también nos permiten adaptabilidad a diferentes dispositivos sin importar el 
tamaño, marca o sistema del dispositivo ni tampoco orientación sea horizontal 
o vertical del dispositivo, y una de las cosas más importantes que son resultado 
del uso de layouts en aplicaciones móviles es la optimización del rendimiento, 
el uso adecuado de los layouts puede ayudar a optimizar el rendimiento de la 
aplicación, por lo tanto redúcela carga del CPU y en la memoria, lo que resulta 
en una experiencia más fluida para el usuario. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Bibliografía 
 Máster en Desarrollo de Aplicaciones Android - Layouts. (s. f.). 
http://www.androidcurso.com/index.php/114#:~:text=Un%20Layout%20e
s%20un%20contenedor,descendiente%20de%20la%20clase%20View. 
 Layout (TableLayout). (s. f.). 
https://www.tutorialesprogramacionya.com/javaya/androidya/androidstudi
oya/detalleconcepto.php?codigo=19&inicio=0 
 Tabla. (s. f.). Android Developers. 
https://developer.android.com/guide/topics/ui/layout/grid?hl=es-419 
 Monteserín. (2022, 25 julio). Layouts de Android - Pablo Monteserín. 
Pablo Monteserín. https://pablomonteserin.com/curso/android/layouts/ 
 Colectiva, N. (2018, 15 agosto). Que son los Layouts y cuales existen en 
Android Studio. Blog de Programación y Desarrollo - Nube Colectiva. 
https://blog.nubecolectiva.com/que-son-los-layouts-y-cuales-existen-en-
android-studio/ 
 Cómo crear y administrar dispositivos virtuales. (s. f.). Android 
Developers. https://developer.android.com/studio/run/managing-
avds?hl=es-419 
 
http://www.androidcurso.com/index.php/114#:~:text=Un%20Layout%20es%20un%20contenedor,descendiente%20de%20la%20clase%20View
http://www.androidcurso.com/index.php/114#:~:text=Un%20Layout%20es%20un%20contenedor,descendiente%20de%20la%20clase%20View
https://www.tutorialesprogramacionya.com/javaya/androidya/androidstudioya/detalleconcepto.php?codigo=19&inicio=0
https://www.tutorialesprogramacionya.com/javaya/androidya/androidstudioya/detalleconcepto.php?codigo=19&inicio=0
https://developer.android.com/guide/topics/ui/layout/grid?hl=es-419
https://pablomonteserin.com/curso/android/layouts/
https://blog.nubecolectiva.com/que-son-los-layouts-y-cuales-existen-en-android-studio/
https://blog.nubecolectiva.com/que-son-los-layouts-y-cuales-existen-en-android-studio/
https://developer.android.com/studio/run/managing-avds?hl=es-419
https://developer.android.com/studio/run/managing-avds?hl=es-419