Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)
Desarrollar una bonita interfaz de usuario para aplicaciones Android puede ser una tarea que requiere tiempo. Estos son algunos de los pasos que normalmente seguimos para diseñar una aplicación:
- Comenzamos con una lluvia de ideas y luego dibujamos (con lápiz y papel) la manera en la que debe verse la UI. En otras palabras creamos la estructura de la aplicación.
- Creamos el diseño real de la UI a partir de la estructura en un programa de diseño como Photoshop o Sketch.
- Traducimos el diseño de la UI a código real en Android Studio. Aquí codificamos la lógica de negocios. Es recomendable que también nos apeguemos a los principios del Material Design.
Y esta solamente es la punta del iceberg. ¡Diseñar una aplicación requiere mucho trabajo!. Todas estas tareas pueden tardar tiempo, especialmente si tú eres el único trabajando en ellas.
Sin embargo, en este mercado de aplicaciones que ya de por sí es altamente competitivo, debes moverte rápidamente y asegurarte de que tu aplicación tenga una bonita interfaz de usuario (además de asegurarte de que tu código esté libre de errores), o de lo contrario los usuarios se irán e instalarán las aplicaciones de tus competidores.
Afortunadamente, CodeCanyon ofrece una amplia gama de hermosas plantillas para aplicaciones que te permiten comenzar con tu proyecto de aplicación móvil. En este tutorial te ayudaré a comenzar con una de estas plantillas, la llamada Android Material UI Template 3.0. Vamos a construir una aplicación de música con Material Design usando esta plantilla y a explorar algunas de sus útiles funcionalidades.
Si la música es el alimento del amor, que siga sonando. — William Shakespeare
Requisitos previos
Para poder seguir este tutorial necesitarás Android Studio 3.0 o superior.
1. Consigue la plantilla
Para comenzar a construir la aplicación de música necesitarás una cuenta con Envato Market. Así que regístrate si aún no lo has hecho y compra la Android Material UI Template 3.0 en CodeCanyon. ¡Verás cuánto trabajo te ahorra!.
Después de que hayas comprado exitosamente la plantilla, el código fuente de la misma se encontrará disponible en un archivo ZIP, así que asegúrate de descargar ese archivo ZIP a tu computadora.
2. Descomprime el archivo
Ahora ve a la carpeta en la que se descargó el archivo ZIP y descomprímelo o extráelo.
Cuando entres a la carpeta raíz y hagas click en la carpeta Project verás una lista de carpetas de plantillas. Esto es lo que aparece en mi máquina con Windows 10 después de extraer el archivo. Toma en cuenta que cuando compres esta plantilla tendrás acceso no solamente a la plantilla Music App, sino también a otras ocho plantillas (como puedes observar en la imagen anterior).
3. Importa la plantilla
Ejecuta Android Studio 3 y selecciona File > New > Import project...
Asegúrate de navegar a la carperta en la que se encuentre la plantilla extraída y selecciona la plantilla Music App para importarla.
Después de importarla con éxito aparecerá un cuadro de diálogo para actualizar el complemento Android Gradle. Es recomendable que hagas clic en el botón Update para permitir que Android Studio actualice nuestro complemento Gradle a la última versión (3.0.0) por nosotros.
Después de que Gradle haya terminado de sincronizar tu proyecto automáticamente te encontrarás con el siguiente error en Android Studio, ya que hemos actualizado con éxito nuestra dependencia Gradle a 3.0.0.
Para resolver esto, abre el archivo del módulo build.gradle del proyecto de aplicación y usa outputFileName en vez de output.outputFile dentro de las configuraciones del tipo de compilación release. Asegúrate de que tu archivo sea similar al que aparece en la captura de pantalla siguiente.
Dentro del mismo archivo build.gradle también realiza la siguiente acción:
- Actualiza tu
buildToolsVersiona'26.0.2'. - Establece el valor de
targetVersionycompileSdkVersionen26. - Asegúrate de que los artefactos de Android también estén actualizados.
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:26.1.0'
compile 'com.android.support:cardview-v7:26.1.0'
compile 'com.android.support:recyclerview-v7:26.1.0'
compile 'com.android.support:design:26.1.0'
compile 'com.squareup.picasso:picasso:2.5.2'
compile 'com.android.support:support-v4:26.1.0'
compile 'com.balysv:material-ripple:1.0.2'
}
Estos artefactos de Android están disponibles en el repositorio Maven de Google. Así que ve al archivo build.gradle de tu proyecto para incluirlo.
allprojects {
repositories {
jcenter()
google()
}
}
Al añadir los artefactos le hemos indicado a Gradle cómo encontrar la biblioteca. Asegúrate de recordar sincronizar tu proyecto después de añadirlos.
Toma en cuenta que esta plantilla usa el artefacto Picasso para cargar y mostrar las imágenes. En vez de eso puedes intercambiarlo fácilmente por Glide si lo deseas.
Ahora, si ejecutas el proyecto verás un error que aparecerá en Android Studio Logcat.
Para resolver este error ve a /data/Tools.java y elimina el método getAPIVersion(). Asegúrate de modificar los métodos que aparecen en la captura de pantalla siguiente, de manera que tu código se vea similar a lo que tenemos aquí.
Puedes ver lo bien estructurado que están los archivos del proyecto. Es aconsejable que te sumerjas en el código fuente y lo revises (es fácil de comprender). Al hacer esto puedes modificar libremente cualquier parte del código para ajustarlo a tus necesidades.
Por ejemplo, si no te gusta la selección de colores usados en la plantilla, no hay nada que te impida ir al recurso colors.xml y modificarlos para que se ajusten a tus gustos.
4. Prueba la aplicación
¡Finalmente puedes ejecutar la aplicación!
Puedes ver que la interfaz de esta aplicación de música está bien diseñada. La primera pestaña está seleccionada de forma predeterminada y muestra una lista de canciones disponibles. Haz clic en cualquiera de las canciones y disfruta de la música reproducida (aunque solamente hay una canción disponible en la aplicación).
Toma en cuenta que esta plantilla no muestra las canciones disponibles en el dispositivo huésped. En vez de eso, esta viene con sus propios datos ficticios (para fines de demostración). Por lo tanto tendrás qué codificar la funcionalidad para mostrar las canciones del dispositivo huésped. El generador de clase de datos ficticios se encuentra en /data/Constant.java.
Si haces clic en el símbolo de intercalación dentro del contenedor de la canción que se está reproduciendo (localizado en la parte inferior de la pantalla), este abrirá una bonita y detallada actividad relacionada con la canción que se está reproduciendo actualmente. Aquí podemos implementar fácilmente más funcionalidades, tales como el modo aleatorio, repetir así como moverse a la canción anterior o a la siguiente. Toma en cuenta que estas funcionalidades no están implementadas de forma predeterminada en la plantilla.
Observa que esta bonita interfaz de plantilla es una interfaz tabular de Android que usa ViewPager. Si deslizas a la derecha verás la lista de álbumes con imágenes en la pestaña.
Si deslizas a la derecha de nuevo verás la lista de artistas mostrada en la pestaña actual.
Si te deslizas a la última pestaña aparecerán las listas de reproducción. Incluso aquí puedes añadir una nueva lista de reproducción haciendo clic en el menú "+" de la barra de herramientas.
Recuerda que si quieres ganar dinero con esta aplicación mostrando anuncios, puedes integrar esta funcionalidad fácilmente con AdMob. Para aprender a integrar AdMob a una aplicación Android revisa mi tutorial aquí en Envato Tuts+.
Conclusión
Las plantillas para aplicaciones son excelentes para iniciar tu próximo proyecto de desarrollo o para aprender del trabajo de otras personas. Este artículo te enseñó a crear rápidamente una bonita aplicación de música usando Android Material UI Template 3.0 en CodeCanyon. Recuerda, si estás buscando inspiración o si estás creando una aplicación y necesitas ayuda con alguna característica en particular, entonces es posible que encuentres una respuesta en alguna de estas plantillas.
Envato Market tiene cientos de plantillas para aplicaciones Android de entre las que puedes elegir. Hay plantillas para juegos y aplicaciones completas, así como plantillas de inicio completas como la que usamos en esta publicación. Así que échales un vistazo, es posible que te ahorres mucho trabajo en tu siguiente aplicación Android.
Si quieres explorar más aplicaciones y plantillas de iOS ¡revisa algunas de nuestras otras publicaciones en la página de plantillas para aplicaciones de CodeCanyon!.
