Jesus Tomás Gironés - El gran libro de Android

2.Abre el fichero res/layout/activity_main.xml.

3.En el marco Outline pulsa con el botón derecho sobre RelativeLayout y selecciona Change Layout… Selecciona LinearLayout (Vertical). Este tipo de layout es uno de los más sencillos de utilizar. Te permite representar las vistas una debajo de la otra.

4.Desde la paleta de la izquierda arrastra los siguientes elementos: ToggleButton, CheckBox, ProgressBar(Large) y RatingBar.

5.Selecciona la primera vista que estaba ya creada (TextView) y pulsa el botón Supr para eliminarla.

6.Pulsa el primer botón: (Set Horizontal Orientation), para conseguir que el LinearLayout donde están las diferentes vistas tenga una orientación horizontal. Comprobarás que no caben todos los elementos.

7.Pulsa el siguiente botón: (Set Vertical Orientation), para volver a una orientación vertical.

8.Selecciona la vista ToggleButton. Pulsa el botón siguiente al que acabamos de utilizar: (Toggle Fill Width). Conseguirás que la anchura del botón se ajuste a la anchura de su contenedor.

9.Pulsa el siguiente botón: (Troggle Fill Height). Conseguirás que la altura del botón se ajuste a la altura de su contenedor. El problema es que el resto de los elementos dejan de verse. Vuelve a pulsar este botón para regresar a la configuración anterior (también puedes pulsar Ctrl-Z).

10. Selecciona la vista CheckBox. Pulsa el botón siguiente al que acabamos de utilizar: (Change Margins…), para introducir un margen en la vista. En la entrada All introduce “20dp”.

11. Pulsa el siguiente botón: (Change Gravity), y selecciona Center Horizontal.

12. Observa que hay un espacio sin usar en la parte inferior del layout. Pulsa el siguiente botón: (Distribute Weights Evenly). La altura de las vistas se ajustará para que ocupen la totalidad del layout. Realmente, lo que hace es dividir el espacio sin usar de forma proporcional entre las vistas. Es equivalente a poner Layout Weights = 1 para todas las vistas de este layout. Esta propiedad se modificará en un siguiente punto.

13. Con la vista CheckBox seleccionada, pulsa el botón (Assign All Weight) para asignar toda la altura restante a la vista seleccionada.

14. Pulsa el siguiente botón: (Change Layout Weight), e introduce el valor 2. Selecciona la vista ToggleButton y, usando este mismo botón, introduce el valor 0.5. Selecciona la vista ProgressBar e introduce el valor 4. Como puedes observar, estos pesos permiten repartir la altura sobrante entre las vistas.

15. Utiliza los siguientes botones: , para ajustar el zum.

16. Utiliza los botones de la barra superior para observar cómo se representará el layout en diferentes situaciones y tipos de dispositivos:

17. Selecciona la vista CheckBox y observa las diferentes propiedades que podemos definir. Algunas ya han sido definidas por medio de la barra de botones. En concreto, y siguiendo el mismo orden que en los botones, hemos modificado: Layout width = wrap_content, Layout height = wrap_content, Layout margin = 20dp, Layout gravity = center_horizontal y Layout weight = 2.

18. Busca la propiedad Text y sustituye el valor CheckBox por “Guardar automáticamente” y Text size por “9pt”.

19. A continuación se muestra el resultado final obtenido:

Los pequeños triángulos amarillos son advertencias (warnings), donde se nos dan sugerencias para realizar un diseño correcto. Trata de eliminar alguna de estas advertencias. (Solución: definir los textos usados como recursos en res/values/strings.xml y referenciar estos recursos en el atributo android:text como: android:text="@string/nombretexto".)

20. Pulsa sobre la lengüeta activity_main.xml de la parte inferior. Pulsa las teclas Ctrl-Shift-F para que formatee adecuadamente el código XML. A continuación se muestra este código:

Observa como el entorno subraya las líneas donde hay advertencias (warnings) en amarillo. Por ejemplo, nos indica que es preferible introducir los textos como recursos.

21. Ejecuta el proyecto para ver el resultado en el dispositivo.

Ejercicio: Vistas de entrada de texto

1.Añade en la parte superior del layout anterior una vista de tipo entrada de texto EditText, de tipo normal (Plain Text). Debajo de esta, una de tipo nombre y apellido (Person Name) seguida de una de tipo palabra secreta (Password). Continua así con otros tipos de entradas de texto.

2.Ejecuta la aplicación.

3.Observa como al introducir el texto de una entrada se muestra un tipo de teclado diferente.

Vídeo[tutorial]: Atributos de la clase View en Android

Vídeo[tutorial]: Atributos de la clase TextView en Android

Recursos adicionales: Atributo de dimensión

En muchas ocasiones tenemos que indicar la anchura o altura de una vista, un margen, el tamaño de un texto o unas coordenadas. Este tipo de atributos se conocen como atributos de dimensión. Dado que nuestra aplicación podrá ejecutarse en una gran variedad de dispositivos con resoluciones muy diversas, Android nos permite indicar estas dimensiones de varias formas. En la siguiente tabla se muestran las diferentes posibilidades: