El editor de plantillas

Android Studio cuenta con un editor avanzado de plantillas que nos permitirá añadir widgets fácilmente a nuestros diseños con una simple acción de pinchar y arrastrar. También contaremos con una vista previa de las modificaciones que vayamos haciendo en el código fuente (XML) de nuestras plantillas.

El editor soporta dos modos de visualización: una vista en modo texto donde podrás modificar el código XML tal cual, y una vista en modo diseño más visual.

Edición en modo texto.

Para editar una plantilla en modo texto, basta con abrir la plantilla y asegurarnos de que la pestaña Text de la parte inferior, se encuentre seleccionada. Recuerda que las plantillas son recursos y que se encuentran almacenadas en la carpeta res/layout.

Vista previa.

Cuando editamos una plantilla en modo texto, podemos previsualizar los cambios que vayamos haciendo abriendo el panel Preview de nuestro IDE. Desde la parte superior del panel, tenemos acceso a una serie de opciones tales como: dispositivo, tema, versión de Android, orientación, actividad, entre otros. Para mostrar la apariencia de un dispositivo concreto, pulsaremos el botón y elegiremos el dispositivo. Por ejemplo, en la imagen 1 observamos la apariencia de un Nexus 4.

Imagen 1. Vista previa para un dispositivo Nexus 4.

Para mostrar la apariencia que tendría nuestra plantilla en varios dispositivos simultáneamente, seleccionaremos la opción Preview All Screen Sizes desde la lista desplegable asociada al dispositivo.

Cuando hacemos clic sobre alguno de los elementos de la vista previa, éste aparecerá resaltado en el archivo XML. Por otro lado, si posicionamos el cursor de escritura sobre un elemento determinado, éste aparecerá resaltado en la vista previa.

Detección y corrección de errores.

Mientras editamos el XML en modo texto, Android Studio nos mostrará los errores detectados de manera interactiva. Por ejemplo, supongamos que añadimos un botón a nuestro diseño y que lo hemos escrito mal (en lugar de especificar como nombre de elemento Button, hemos escrito Buttonn). En este caso, Android Studio nos mostrará sobre la vista previa el mensaje mostrado en la imagen 2.

Imagen 2. Android Studio nos avisa del error indicando que la clase Buttonn no existe.

Android Studio además nos propone una solución para solventar el error. En este caso nos sugiere sustituir la clase Buttonn errónea por la clase Button. Pulsando el enlace Change to Button, podremos realizar el cambio de una manera rápida.

Android Studio también nos puede mostrar mensajes advirtiéndonos de datos que no encuentra. Por ejemplo, a la hora de añadir un fragmento a nuestro diseño, veremos que Android Studio nos avisa de que será necesario especificar la plantilla asociada, o que los atributos ancho y alto son obligatorios. Para completar la información faltante, podremos hacerlo haciendo uso de los enlaces disponibles desde la vista previa (ver imagen 3), o bien, podremos hacerlo de manera manual.

Imagen 3. Android Studio nos avisa de qué datos faltan al añadir un fragmento a la plantilla.

Seleccionando un tema.

Para seleccionar un nuevo tema de visualización, pulsaremos el botón . En el cuadro de diálogo de temas, podrás buscar un tema concreto y/o seleccionar uno concreto. La vista previa mostrará los cambios en función del tema que hayas seleccionado.

Imagen 4. Cuadro de diálogo de temas.

Idioma.

Android Studio incorpora soporte para la gestión de múltiples idiomas. Desde el botón de idiomas , podremos seleccionar un idioma determinado, editar sus cadenas de traducción, realizar previsualizaciones de uno o de todos los idiomas disponibles, e incluso, mostrar una previsualización para idiomas RTL (Right to Left - Derecha a Izquierda - escritura). En la imagen 5, podemos ver un ejemplo de vista previa para el idioma francés :

Imagen 5. Vista previa para el idioma francés.

Edición en modo diseño.

Para editar una plantilla en modo diseño, abriremos la plantilla y seleccionaremos la pestaña Design que aparece en su parte inferior. Recuerda que las plantillas son recursos y que se encuentran almacenadas en la carpeta res/layout.

Mientras editamos en modo diseño, podremos añadir widgets desde el panel Pallete con un simple pinchar y arrastrar. Por otro lado, desde el panel Designer, podremos visualizar la relación jerárquica existente entre los elementos que componen nuestra plantilla y una lista de propiedades asociada al elemento que tenemos actualmente seleccionado.

Cuando arrastramos un widget sobre la vista previa de la plantilla, nos aparecerá una previsualización de las posiciones donde podemos colocar el widget.  Por ejemplo, si pinchamos y arrastramos un widget sobre un elemento FrameLayout de la plantilla, se nos mostrará una cuadrícula las posiciones donde podremos colocar nuestro widget (ver imagen 6).

Imagen 6. Cuadrícula mostrando las posiciones en un FrameLayout.

También podremos cambiar la posición de un widget dentro de nuestra plantilla pinchando y arrastrándolo a su nueva posición.

Capturas de pantalla.

Cuando ejecutamos nuestra aplicación sobre un dispositivo conectado, podemos hacer capturas de pantalla pulsando sobre el botón  situado en la parte izquierda del panel Android. La captura se realizará sobre lo que se esté mostrando en ese momento en el dispositivo y no tiene por qué ceñirse a nuestra aplicación. Desde el gestor de capturas de pantalla, podrás añadir efectos tales como sombras, brillos, etc. El gestor es ideal para generar imágenes previas de nuestra aplicación que podríamos usar, por ejemplo, para presentar nuestra aplicación, como vista previa en la tienda Google Play, o para cualquier otro uso que se nos ocurra.