Diseñar interfaces en Android requiere comprender cómo el sistema decide la posición y el orden de cada elemento en pantalla. LinearLayout es el componente más sencillo y común para lograrlo, y dominar su uso es fundamental antes de pasar a layouts más complejos.
¿Cómo funciona la orientación en LinearLayout?
LinearLayout actúa como contenedor padre de un conjunto de vistas y necesita obligatoriamente un atributo llamado orientación [0:20]. Solo existen dos posibilidades:
- Vertical: los elementos se apilan uno debajo del otro, cada uno ocupando el espacio que le corresponde según su tamaño.
- Horizontal: los elementos se colocan de izquierda a derecha.
Cuando la orientación es vertical y tienes muchos elementos, Android intentará mostrar todos hasta cubrir la pantalla. Si cien elementos no caben, los que excedan el espacio simplemente no serán visibles, lo cual puede ser problemático con elementos grandes [0:50].
En orientación horizontal, cada nuevo elemento se agrega a la derecha. Vale la pena mencionar el concepto de left to right y right to left [1:10]: si publicas tu aplicación en países donde se lee de derecha a izquierda, Android ajustará automáticamente la dirección de los elementos.
También es posible anidar un LinearLayout dentro de otro, por ejemplo uno vertical que contenga uno horizontal internamente, lo que permite crear diseños más elaborados [1:28].
¿Cómo agregar imágenes y vectores a tu aplicación?
Para incluir un logo o ícono, debes colocar la imagen dentro de las carpetas drawable del directorio de recursos [1:50]. Cada carpeta corresponde a una densidad de pantalla diferente:
- MDPI para resolución media.
- HDPI para alta.
- XHDPI, XXHDPI y XXXHDPI para resoluciones cada vez mayores.
El nombre del archivo debe contener únicamente letras y guiones bajos. Una vez agregada, puedes referenciarla desde un ImageView usando el atributo src (source) apuntando al drawable [2:20].
El tamaño de las imágenes se controla con DP (density points) [2:45], una unidad que permite que Android adapte las dimensiones según la densidad real de cada pantalla. Así, una imagen de 160 DP se verá proporcionalmente igual en dispositivos de distinta calidad.
Android también permite incluir vectores en formato XML en lugar de imágenes rasterizadas [3:30]. Desde el menú File > New > Vector Asset puedes elegir entre una biblioteca de íconos que Google pone a disposición. Estos vectores definen coordenadas en un plano y son escalables sin pérdida de calidad.
¿Qué diferencia hay entre gravity y layout gravity?
Para centrar elementos se usan dos atributos distintos [3:55]. Layout Gravity afecta únicamente al elemento donde se aplica, mientras que Gravity en un ViewGroup afecta a todos sus hijos. Si quieres centrar solo el logo, usas layout_gravity="center" directamente en el ImageView.
¿Cómo construir la pantalla de login con LinearLayout?
El diseño de la pantalla de login se compone de varios elementos agregados secuencialmente dentro del LinearLayout vertical [4:40].
Primero se establece un background blanco usando @android:color/white, un color predefinido dentro del namespace de Android. Luego se agregan los campos de texto:
- Un EditText para el usuario con un hint extraído del archivo
strings.xml, lo cual es buena práctica para mantener los textos centralizados [5:15].
- Un segundo EditText para el password, usando la sugerencia de Android Studio para extraer el recurso automáticamente [5:50].
- Un Button con texto "login" referenciado también desde strings.
Para mejorar la apariencia, se agregan íconos con el atributo drawableStart [6:40], que coloca un vector a la izquierda del campo de texto. El espacio entre ícono y texto se controla con drawablePadding, por ejemplo 12 DP.
¿Qué es el atributo weight y cómo empuja elementos?
El atributo weight [8:15] indica cuánto peso tiene un elemento dentro del LinearLayout. Al insertar un Space con layout_weight="1" y alto de 0 DP, este espacio vacío absorbe todo el espacio sobrante, empujando el botón de login hacia la parte inferior de la pantalla.
Por último, se aplica margin a los EditText para separar los elementos entre sí, y marginStart y marginEnd al botón para agregar espacio lateral [8:50]. Los colores personalizados se definen en el archivo colors.xml en formato hexadecimal, evitando escribir valores directamente en el layout [7:55].
¿Ya probaste LinearLayout en tu proyecto? Comparte cómo organizaste tu primera pantalla de login.
