📲Android Studio 2: Primer proyecto - Edición visual de las vistas -Creación de vistas - vistas de entradas de texto - Atributos de dimension de textos en Android Studio Chipmunk 2021.2.1

Hola developer en esta oportunidad desarrollaremos una actividad como introduccion al desarrollo de Aplicaciones con Android studio, veamos acerca de diseñar una vista o tambien conocida como GUI.

Edición de las Vistas .xml

Veamos como editar los layouts o ficheros de diseño en XML. En el explorador del proyecto abre el app/res/layout/activity_main.xml. Verás que en la parte superior derecho aparecen 3 opciones donde podemos cambiar de modo de vista las opciones son Code (Mustra solo solo el codigo del xml), Split (Muestra el codigo y el diseño al mismo tiempo), Design (Muestra el diseño de la vista).

Video Tutorial de Referencia

Podrás usar los tres tipos de diseño: la primera code permite solo editar directamente el código XML (primera lengüeta). split permite editar el codigo directamente y visualizar los cambios realizados (segunda lengüeta) o realizar este diseño de forma visual (tercera lengüeta). Veamos cómo se realizaría el diseño visual. La herramienta de edición de layouts se muestra a continuación:

En el marco derecho se visualiza una lista con todos los elementos del layout. Este layout tiene solo dos vistas: un ConstraintLayout que contiene un TextView. En el marco central aparece una representación de cómo se verá el resultado.  En la parte superior aparecen varios controles para representar esta vista en diferentes configuraciones. Cuando diseñamos una vista en Android, hay que tener en cuenta que desconocemos el dispositivo final donde será visualizada y la configuración específica elegida por el usuario. Por esta razón, resulta importante que verifiques que la vista se ve de forma adecuada en cualquier configuración. En la parte superior, de izquierda a derecha, encontramos los siguientes botones:   opciones de previsualización en fase de diseño, tipo de dispositivo (tamaño y resolución de la pantalla),  orientación horizontal (landscape) o vertical (portrait), cómo se verá nuestra vista tras aplicar un tema,  la actividad asociada, la configuración regional (locale), la versión de Android.

Para editar un elemento, selecciónalo en el marco de la derecha (Outline) o pincha directamente sobre él en la ventana de previsualización. Al seleccionarlo, puedes modificar alguna de sus propiedades en el marco Properties, situado debajo de Outline. Echa un vistazo a las propiedades disponibles para TextView y modifica alguna de ellas. En muchos casos te aparecerá un desplegable con las opciones disponibles.

El marco de la izquierda te permite insertar de forma rápida nuevas vistas al layout. Puedes arrastrar cualquier elemento a la ventana de previsualización o al marco Outline. 

Ejercicio de creación de una vista paso a paso.

1. Crea un nuevo proyecto con nombre PrimerasVistas. Puedes dejar el resto de parámetros con los valores por defecto.
2. Abre el fichero res/layout/activity_main.xml.
   
   
   
3. En Android Studio seleccionar la lengüeta Code y cambiar las dos apariciones del texto ConstraintLayout por LinearLayout. Añade el siguiente atributo a la primera etiqueta:<LinearLayout …            android:orientation="vertical">
4. Regresa a la lengüeta Design.
5. Desde la paleta de izquierda arrastra los siguientes elementos: ToggleButton, CheckBox, ProgressBar(Large)y RatingBar.
   
   
   
6.  Selecciona la primera vista que estaba ya creada (TextView) y pulsa el botón <Supr> para eliminarla.
7. Pulsa  el  botón  (Convert orientation to horizontal) para conseguir que el LinearLayout donde están las diferentes vistas tenga una orientación horizontal.  Comprobarás que no caben todos los elementos.
8. Pulsa  el botón   (Convert orientation to vertical); para volver a una orientación vertical.
9. Selecciona la vista ToggleButton. Pulsa el botón   (Set layout_width to match_parent); Conseguirás que el ancho del botón se ajuste al ancho de su contenedor.
10. Pulsa el botón   (Set layout_height to match_parent); Conseguirás que la altura del botón se ajuste al alto de su contenedor. El problema es que el resto de elementos dejan de verse. Vuelve a pulsar este botón para regresar a la configuración anterior (También puedes pulsar Ctrl-z).
11. Selecciona la vista CheckBox. Ve al marco Properties y busca la propiedad layoutmargin en el campo all introduce “20dp”. Code : android:layout_margin="20dp"
12. Pulsa el botón (Gravity/Change Gravity) y selecciona Center/Center Horizontal.
13. Observa como hay un espacio sin usar en la parte inferior del Layout. Pulsa el 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.
14. Con la vista CheckBox selecccionada, pulsa el botón (Assign All Weight) para asignar todo la altura restante a la vista seleccionada.
15. Pulsa el siguiente botón  o (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 el alto sobrante entre las vistas.
16. Utiliza los siguientes botones  para ajustar el zoom.
17. Utiliza los botones de la barra superior para observar cómo se representará el layout en diferentes situaciones y tipos de dispositivos:
18. Selecciona la vista CheckBox y observa las diferentes propiedades que podemos definir en el marco Properties. 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.
19. Busca la propiedad Text y sustituye el valor “CheckBox” por “Guardar automáticamente” y Text size por “9pt”.
20. A continuación se  muestra  el resultado obtenido:
    
    Los cambios de los paso indicados, lo podemos realizar mediante el codigo directamente y tambien mediante las herramientas de opciones de android studio.

Agregar 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 mostrará un tipo de teclado diferente.

Atributos 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:

• px   (píxeles): Estas dimensiones representan los píxeles en la pantalla.
• mm        (milímetros): Distancia real medida sobre la pantalla.
• in    (pulgadas): Distancia real medida sobre la pantalla.
• pt    (puntos): Equivale a 1/72 pulgadas.
• dp (píxeles independientes de la densidad): Presupone un dispositivo de 160 píxeles por pulgada. Si luego el dispositivo tiene otra densidad, se realizará el correspondiente ajuste. A diferencia de otras medidas como mm, in y pt este ajuste se hace de forma aproximada dado que no se utiliza la verdadera densidad gráfica, sino el grupo de densidad en que se ha clasificado el dispositivo (ldpi, mdpi, hdpi…). Esta medida presenta varias ventajas cuando se utilizan recursos gráficos en diferentes densidades. Por esta razón, Google insiste en que se utilice siempre esta medida. Desde un punto de vista práctico un dp equivale aproximadamente a 1/160 pulgadas. Y en dispositivos con densidad gráfica mdpi un dp es siempre un pixel. 
• sp   (píxeles escalados): Similar a dp, pero también se escala en función del tamaño de fuente que el usuario ha escogido en las preferencias. Indicado cuando se trabaja con fuentes.

Tambien pueden visitar la publicación : Android 05: Primer proyecto "Hola mundo" en el IDE Android Studio ↗

Facebook 🌐 https://www.facebook.com/DeveloperDao

Blog Secundario 🚩: https://mpersonales.blogspot.com/

Canal de Youtube ▶: https://www.youtube.com/channel/UCLOJvWCUMLFggMvMR1OCrDA