[MUSIC] Chicos, bienvenidos a nuestro módulo tres. Donde aquà aprenderemos además de cómo se compone un proyecto en Android, todos sus archivos y carpetas, etcétera. Vamos a aprender a dar soporte para múltiples pantallas en Android. Pantallas en portrait, pantallas en landscape. Además también soporte para múltiples idiomas y múltiples dispositivos, asà que, ¿qué esperas? Vamos a comenzar. Si seguimos hablando de recursos, un recurso que mencionamos hace un momento son las imágenes. Recuerda que Android es un sistema que ha crecido muchÃsimo y que puedes encontrar en infinidad de dispositivos. Dispositivos con pantallas pequeñas, medianas, grandes y cada uno va a tener incluso hasta su propia medida de pantalla. Bueno, muchas veces en las aplicaciones el manejo de imágenes en diferentes pantallas es un problema. Para esto tenemos un sistema de archivos llamado Nine-Patch. Los archivos Nine-Patch es un sistema para ejecutar un reescalado automático de imágenes. Es decir, si tu imagen está siendo vista en un dispositivo pequeño, a lo mejor se va a ver muy bien, en cuanto a pixelaje, que no se vea borrosa, etc. Pero si de pronto la pantalla del dispositivo crece, pues entonces, la imagen si es de tipo Nine-Patch, la imagen se va a ajustar al tamaño, a la magnitud de la pantalla que tengas en ese momento. Este tipo de imágenes son comúnmente utilizadas para fondos de pantalla, fondos de botones. En general cualquier tipo de fondo, también conocidos como backgrounds. Y puedes ubicarlos por la extensión ".9.png". Un Nine-Patch es un sistema que maneja Android para hacer el reescalado automático de imágenes. Esto quiere decir que una imagen puede aumentar o disminuir de acuerdo a las dimensiones de la pantalla donde estás viendo tu aplicación móvil. Los archivos Nine-Patch comúnmente son utilizados para backgrounds de cualquier cosa. PodrÃa ser un botón, el mismo background de la aplicación móvil, etcétera. Estos archivos van a tener la peculiaridad que tiene la extensión .9.png. Creamos you nuestro "Hola mundo", you lo hemos corrido, pero vamos a ver toda la serie de archivos y carpetas que se han creado en nuestro proyecto. Te voy a explicar un poco cómo funciona Android Studio. Del lado derecho es tu panel de actividades, del lado derecho siempre vas a tener los archivos en cuestión y aquà es donde vas a escribir todo tu código. Vas a tener tu archivo de Java, tus archivos XML, etcétera. Pero del lado izquierdo tenemos un panel donde ahà tenemos jerárquicamente acomodados nuestros archivos. O la composición real de nuestro proyecto. Nuestro proyecto, es esta vista que tenemos de Android. Tiene, comienza con la carpeta APP. Si abrimos esta carpeta vamos a ver más carpetas, asà que voy a comenzar explicándote qué son los recursos en Android. En Android básicamente todo lo que no es código JAVA, se va a considerar un recurso. Es decir, casi todos los recursos en Android van a ser compuestos por códigos XML, imágenes, fotos, videos, sonidos, etc. Es decir, todos los recursos, todo lo que tu aplicación vaya a utilizar como recurso, va a estar contenido en nuestra carpeta. Como observas, la carpeta se llama res, dentro tiene el directorio drawable, después layout, mipmap y values. Asà que, vamos a ver cada una detalladamente en nuestros siguientes vÃdeos. Aquà tengo una imagen que es un fondo que puede ser utilizado para un botón, por ejemplo. Pero si observas esta imagen es como muy pequeña y la idea es que esta imagen pueda adaptarse. Si es un botón grande, un botón a lo mejor más pequeño o pueda crecer tanto horizontal como verticalmente. Para eso vamos a generar nuestro Nine-Patch. Utilizaremos una herramienta que viene incluida en el SDK de Android. Hay muchas herramientas que puedes consultar online y que lo único que reciben como parámetro es el archivo PNG y automáticamente te crean el archivo Nine-Patch. Esta herramienta you viene incluida dentro del SDK de Android. Para entrar a ella, lo debes hacer desde la terminal o desde la consola de comandos, you sea que utilices Windows, Linux o Mac. Entonces, primeramente debemos ubicarnos en donde está nuestro SDK de Android. Una forma donde puedes saber. Una forma por la cual puedes saber donde está. Es yendo a las preferencias de Android Studio. En Mac pues simplemente es Android Studio, en preferences. En Windows es en el menú file y en una opción que se llama settings. En settings te debe abrir una ventana como esta. Entonces, inmediatamente pues, en el Android SDK vemos la ruta donde está ubicado nuestro SDK, que a partir de ahÃ, se están jalando todas las apis y todas las opciones que tenemos de Android. Otra manera también de abrir esto, pues you sabes, es con el SDK manager, este que está aquÃ. Este SDK manager también nos va a abrir esta ventanita y entonces tenemos la dirección donde se encuentra ubicado nuestro SDK. Puedes copiar y pegar y ahora, desde la consola de comandos, vamos a dirigirnos a esa ubicación. Mi ubicación es Users/anahisalgado/Library/Android/sdk. Perfecto, con el comando cd es como nos podemos mover entre directorios. Ahora voy a visualizar lo que está adentro. Vamos a entrar a la carpeta tools, la carpeta tools que está dentro de la ubicación a donde estuvimos yendo. Listo ahora colocamos el comando ls y nos permite ver todo el listado de los ejecutables que contiene este directorio. Uno de ellos es este, draw9patch. Es un archivo ejecutable, entonces tenemos que ejecutarlo como se ejecuta un archivo, en el caso de Windows un archivo .dat o en el caso de unix, un archivo sh. Para el caso de Unix, colocaremos ./draw9patch. Cuando hablo de Unix me estoy refiriendo a Mac y a Linux. Para el caso de Windows, para ejecutar esto, simplemente quitamos el .diagonal y a continuación damos enter. Al dar enter nos abre esta ventana, que es nuestro inspector que va a recibir nuestra imagen para convertirla en un Nine-Patch. Ahora vamos a arrastrar la imagen que you tenemos, se llama buttons.png, la voy a arrastrar aquÃ, y automáticamente me está abriendo esta vista, ok. Si yo acerco el cursor a la imagen puedo ver esta sombra que me está colocando los delimitadores de cuánto va a crecer mi botón, dependiendo si es horizontal o verticalmente. Como observas el botón, tal vez, verticalmente se ve mas o menos, aunque no es lo óptimo. Horizontalmente se está deformando demasiado. Y este quiere decir que cuando lo crecemos en ambas direcciones, tanto vertical como horizontalmente. Bien, vamos a arreglar esto un poco, vamos a hacer primeramente que el botón, vamos a mover estas rayitas y vamos a hacer que en lo gordito, en el ancho solamente crezca en esta zona. Eso es lo que hacemos con estas lÃneas, tú delimitas qué zona del botón quieres que crezca. Es como si de pronto el botón se convirtiera en un vector y entonces you puedes delimitar las zonas. Ahora tenemos que marcar estas rayitas en todas las esquinas de nuestra imagen. También en la parte inferior tengo que delimitar qué zona quiero de la parte inferior que crezca, voy a seleccionar esta zona. Como te comento esto es muy común utilizarlo en imágenes de fondo. ¿Por qué? Porque precisamente las imágenes de fondo se van a acomodar a la perfección tanto si crecen o decrecen. Ahora vamos a acomodar este cachito, bien, lo tengo aquÃ. Este botón como tiene un gradiente voy a seleccionar una zona plana de esto para que no se note mucho lo que crece. Me falta del otro lado y aquà también quiero que crezca poquito, asà perfecto. Y ahora en este preview, como observas, si el botón crece o se estira horizontalmente, you no se deforma, you se ve algo bien. Si el botón crece en la parte de la anchura, aquà mas bien es más bien horizontalmente y en el otro es verticalmente. Si el botón crece horizontalmente tampoco se deforma y entonces podemos incluir si quieres unos iconos aquà a dentro o un texto, etc. Bien you hemos terminado nuestro archivo 9-patch, ahora lo que sigue es que simplemente vamos a guardarlo. Voy a ir al menu file y le voy a decir save 9-patch. Y le puedo poner botón, lo guardo y ahora lo que me ha generado es mi botón pero con la extensión .9.png. Y si observas este no es un botón como el que tenÃamos acá, es un botón donde tiene unas rayitas, en las partes, en las esquinas que delimitan las zonas que va a crecer el botón o que se va a reducir. Simplemente este botón vamos y lo colocamos como un recurso en nuestra composición del proyecto. En el siguiente video vamos a ver cómo mantener estas imágenes, como manejar todas las imágenes en múltiples pantallas. [MUSIC]
