Para empezar a orientarnos con el entorno gráfico, lo primero será generar un nuevo proyecto.
Crear un nuevo proyecto
Abrimos Android Studio y seleccionamos Start a new Android Studio project.
Le damos un nombre identificativo a nuestro proyecto (en el ejemplo “Vistas1”).
Elegimos para qué plataforma queremos desarrollar (teléfono, Tablet, gafas, televisión, reloj…) e indicamos la versión mínima del SDK.
Seleccionamos una plantilla por defecto para la aplicación.
Le damos un nombre a nuestra actividad, y un título que será el principal, y finalizamos.
El entorno principal
Una vez creado el proyecto se nos abre el entorno principal de Android Studio.
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.
Crear un nuevo layout
Borramos el TextView que aparece por defecto e insertamos un LinearLayout Vertical desde la paleta de componentes.
Ahora arrastramos desde la paleta los siguientes componentes sobre el LinearLayout:
ToggleButtonCheckBoxProgressBarRatingBar
Las pestañas de vista
En la parte inferior central tenemos dos pestañas:
- Design: vista gráfica con los componentes representados visualmente.
- Text: vista del código XML del layout generado.
Los botones de control superiores
En la barra de herramientas del editor encontramos varios grupos de botones:
Escala y zoom: Los dos primeros se encargan de la escala del Smartphone, y los dos últimos de realizar el zoom que nosotros queramos.
Gravedad: Se ocupa de la gravedad del botón con cuatro posiciones (left, center, right o fill). Esto es, el posicionamiento que tomará el objeto.
Expansión: Estos dos botones se encargan de ensanchar y alargar respectivamente el botón a su máximo posible en pantalla.
Distribución: 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.
La barra de opciones superior
La barra superior dispone de siete desplegables con las siguientes funciones:
- Previsualización en dispositivos de ejemplo: podemos elegir entre diferentes dispositivos (Nexus, Galaxy, etc.) para ver cómo quedaría nuestra app.
- Tamaño de pantalla / resolución: seleccionamos la resolución de pantalla para la previsualización.
- Orientación del dispositivo: Portrait, Landscape y modos especiales (Card Dock, Night time).
- Tema: aplicamos el tema de la aplicación a la previsualización.
- Actividad: para navegar entre las distintas actividades del proyecto.
- Idioma: para cambiar el idioma de la aplicación en la previsualización.
- Versión del SDK: seleccionamos la versión del SDK instalada.
El panel de propiedades
Si nos vamos a la parte derecha de nuevo, seleccionamos un elemento (por ejemplo, el CheckBox) y podemos ver sus propiedades.
Las propiedades más habituales son:
- text: valor a mostrar por pantalla.
- textSize: tamaño de la letra.
- id: identificador del elemento para referenciarlo desde el código Java.
Ejecución de la aplicación
Y por último, aunque ya lo había explicado en los capítulos anteriores, tenemos el botón que nos permite lanzar la previsualización de nuestra app ya sea simulándola en el ordenador o cargándola al Smartphone que tengamos conectado.
Comentarios