Programación multimedia. Conociendo el entorno gráfico

Para empezar a orientarnos con el entorno gráfico, lo primero será generar un nuevo proyecto.

Abrimos Android Studio y seleccionamos Start a new Android Studio project

Le damos un nombre identificativo, en mi caso y por tratarse de la primera prueba para las vistas, Vistas1 (original, ¿verdad?)

Elegimos para que plataforma queremos desarrollar (teléfono, Tablet, gafas, televisión, reloj…) e indicamos la versión mínima del SDK que necesitarán los smartphones para funcionar.

Escogemos una plantilla por defecto para nuestra app y pulsamos Next

Le damos un nombre a nuestra actividad, y un título que será el principal y finalizamos.

Cuando finalice de cargar nuestro proyecto tendremos una vista principal que será tal que así

Si vamos a la parte central inferior podremos modificar las pestañas para ver el diseño en modo gráfico o con el xml generado

Yendo a la sección derecha podemos ver todos los componentes gráficos que tiene nuestra app, y en el menú inferior sus características configurables (en forma gráfica). RelativeLayout es la plantilla sobre la que se cargan todos los componentes.

Vamos a generar un nuevo layout. Para ello selecciona y borra el TextView que hay cargado y en la sección Palette à Layouts coge y arrastra LinearLayout Vertical por ejemplo y lo arrastras hasta el RelativeLayout. De esta forma se superpondrá en todo su elemento.

Si examinamos la paleta izquierda vemos que tenemos varios elementos divididos en distintas secciones.

Vamos a arrastrar unos cuantos. ToggleButton, CheckBox, ProgressBar y RatingBar.

Observa que en la parte superior del visor gráfico hay unos botones que sirven para ajustar propiedades rápidamente.

Si seleccionas el ToggleButton estos son los que se activan:

Por orden de izquierda a derecha, lo que hacen estos botones son:

Los dos primeros se encargan de la escala del Smartphone, y los dos últimos de realizar el zoom que nosotros queramos.

Se ocupa de la gravedad del botón con cuatro posiciones (left, center, right o fill). Esto es, el posicionamiento que tomará el objeto.

Estos dos botones se encargan de ensanchar y alargar respectivamente el botón a su máximo posible en pantalla, y replegarlo a su tamaño previo (si vuelves a pulsar en él).

Se encargan de distribuir el tamaño del botón respecto al elemento que lo contiene y/o teniendo en cuenta los elementos que lo rodean.

Los dos primeros se encargan de la escala del Smartphone, y los dos últimos de realizar el zoom que nosotros queramos.

Pasa a la ventana de código XML

Refresca el contenido para cerciorarse de cargar los últimos cambios de código o volver a la posición de inicio.

Opciones para la preferencia de visualización de la interfaz de desarrollo.

Si ahora nos ocupamos de la línea superior a la mencionada, es decir, esta:

Los desplegables se ocupan de realizar las siguientes acciones:

1. Permite una previsualización en ejemplos de dispositivos
2. Permite escoger entre diferentes tamaños de pantalla / resolución.
3. Permite seleccionar la vista del Smartphone. Por ejemplo vista vertical (Portrait) u horizontal (Landscape), en modos especiales (Card Dock significa que está activado el modo automóvil, y Night time el modo noche, etc.).
4. Permite ver cómo quedaría el Layout después de aplicar un tema.
5. Permite movernos entre las distintas actividades (vistas, pantallas) que tenga nuestra app.
6. Permite cambiar el idioma de la aplicación (lo tienes que hacer tu!)
7. El último sirve para cambiar la previsualización a las distintas versiones que hayamos instalado desde el SDK (puede tardar un poco en cargarse)

Si nos vamos a la parte derecha de nuevo, seleccionamos un elemento (CheckBox por ejemplo) y podemos ver sus propiedades.

Algunas ya las hemos definido antes, en la primera barra que hemos visto pero podemos cambiar otras tranquilamente.

Por ejemplo, la propiedad text modifica el valor a mostrar por pantalla, textSize cambia el tamaño de la letra, id modifica el identificador de nuestro elemento para poder hacer referencia a él más tarde…

Y por último (de momento) aunque ya lo había explicado en los capítulos anteriores, tenemos el botón que nos permite lanzar la pre-visualización de nuestra app ya sea simulándola en el ordenador o cargándola al Smartphone que tengamos conectado. Se realiza pulsando aquí.