¿Cómo debo aprender la interfaz de usuario, la animación para el desarrollo de aplicaciones de Android?

¡Gracias por el A2A, desconocido anónimo!

El fondo de pantalla animado de Android Muzei [1] tiene el siguiente botón:

• ¿Cuál es el mejor curso de desarrollo de Android gratuito en línea si tengo suficiente experiencia en Java?
• ¿Cuáles son las aplicaciones imprescindibles de Android para facilitarnos la vida en India?
• ¿Cuál es el beneficio de usar la biblioteca Gson y Retrofit en Android cuando está conectado con una API?
• ¿Cómo puedo externalizar el desarrollo de aplicaciones de Android?
• ¿Qué debo leer para convertirme en desarrollador de aplicaciones de Android?

“ACTIVAR” exige ser presionado.

Quería este botón en mi aplicación, y quería que se viera y se comportara exactamente igual. Tenía este efecto de ondulación y elevación cuando lo tocaste, así que por supuesto que lo necesitaba.

En ese momento, acababa de comenzar a construir Quotograph [2]. Estaba en una pausa de un año desde el desarrollo de Android, así que estaba bastante oxidado. Necesitaba un poco de ayuda para acertar con este botón.

Pensé que, dado que mi aplicación se inspiró mucho en Muzei, también podría tomar algo de código, ¿verdad? Por supuesto. Por suerte para mí, el autor de Muzei, Roman Nurik, Open-Sourced el proyecto en Github [3] donde cualquiera podía aprender cómo funcionaba.

Aquí es donde comienza la diversión.

Cómo encontré el botón Activar

En Github, puede buscar en cualquier fuente del repositorio cadenas coincidentes. En mi caso, sabía que el botón Activar tenía que usar la frase de texto, “activar” en algún lugar de su código.

¿Cómo supe esto? Llámalo intuición de mujer. Si busca el código fuente de Muzei para “activar”, el cuarto resultado es:

Bote. ☠

Algunas sugerencias clave me hicieron saber que esto era exactamente donde necesitaba comenzar. A saber:

• Los parámetros ancho y alto usaban una identificación titulada intro_activate_button_size . Solo había una introducción y un solo botón de activación. Lo deduje del uso de la aplicación.
• La otra pista que no necesitaba, pero que podía referirme, era el textAllCaps=”true” . Como puede ver en la captura de pantalla, se lee, “ACTIVAR”, donde cada letra fue mayúscula.

Desde aquí, hice clic en el enlace del archivo para investigar más a fondo el código fuente. Si eso ya no está disponible, resultó ser así:

<FrameLayout xmlns: android = "http://schemas.android.com/apk/res/android"
android: id = “@ + id / intro_container”
android: layout_height = “match_parent”
android: layout_width = “match_parent”
android: alpha = “0”
android: visibilidad = “ido”>

<FrameLayout android: id = "@ + id / demo_view_container"
android: layout_width = “match_parent”
android: layout_height = “match_parent” />

<Ver android: layout_height = "match_parent"
android: layout_width = “match_parent”
android: background = “@ drawable / intro_background_protection” />

<LinearLayout android: layout_width = "wrap_content"
android: layout_height = “wrap_content”
android: layout_gravity = “centro”
android: orientación = “horizontal”>

<fragment android: name = "com.google.android.apps.muzei.util.AnimatedMuzeiLogoFragment"
android: id = “@ + id / animated_logo_fragment”
android: layout_height = “wrap_content”
android: layout_width = “wrap_content” />

<Botón android: background = "@ drawable / white_circle_button"
android: layout_height = “@ dimen / intro_activate_button_size”
android: layout_width = “@ dimen / intro_activate_button_size”
android: layout_marginStart = “48dp”
android: text = “@ string / action_activate”
android: textAllCaps = “true”
android: fontFamily = “sans-serif-condensed”
android: textStyle = “bold”
android: textSize = “18sp”
android: textColor = “# 333”
android: id = “@ + id / enable_muzei_button” />

El elemento más inferior, que comienza con <Button , contiene mi premio. Este botón no tiene un conjunto de estilos, por lo que es probable que los valores XML proporcionados aquí describan el botón en su totalidad.

Teníamos el ancho, la altura, la fuente, el estilo, el tamaño del texto, el color y, lo más importante, el fondo. Ah, pero el fondo hacía referencia a un recurso white_circle_button , white_circle_button .

Comencé copiando estos atributos XML para mi propio botón, pero descubrir cómo la aplicación generó el círculo de fondo fue fundamental para mi éxito imitador.

Como desarrollador de Android, sabía que podía encontrar elementos dibujables en una ubicación de nivel superior: la carpeta res . Entonces necesitaba navegar a la carpeta res de Muzei si iba a encontrar el archivo correcto.

Como ya estaba en un directorio de diseño cuando miraba muzei_include_intro.xml , usaría las migas de pan de Github para navegar a res :

Al hacer clic en res ayudaría a reducir mi búsqueda del white_circle_background .

UH oh…

Había 6 carpetas dibujables diferentes. No quería hacer clic en todos ellos porque soy vago y esto era Internet, ¡maldita sea! “Hacer clic es para tontos”, recuerdo haberme dicho.

Utilizando la función Buscar archivo de Github, que descubrí por completo cuando escribí esta respuesta, pude buscar cualquier archivo en el repositorio. Se ve / se ve así:

Escribí suavemente “white_circle_button” y escupió pero un resultado. Perfecto. Más abajo en la madriguera del conejo vamos.

white_circle_button.xml

A partir de esto, supe que el dibujable no era una imagen, era otro archivo XML. Los dibujos XML son preferibles a las imágenes PNG, ya que consumen menos espacio y se escalan mejor en todos los dispositivos.

Pero mi búsqueda no terminó allí, porque este archivo hacía referencia a otro grey_selectable_item_background_circle , grey_selectable_item_background_circle . Podría pasar al siguiente paso, pero creo que ya lo estás entendiendo.

¿Qué clase de respuesta fue esta?

Casi copié, pegué y modifiqué el código fuente que se encuentra en Muzei para satisfacer mis propias necesidades. Así es como aprendo nuevos patrones de interfaz de usuario, algo nuevo realmente.

Para mostrar las últimas capacidades de Android, a veces Google lanza el código fuente de sus aplicaciones. Por ejemplo, echa un vistazo a la aplicación I / O Schedule de 2016 [4] que usa Material Design y muchas otras bibliotecas sexys.

Reutilizo las soluciones existentes, especialmente de aquellos que saben mejor que yo, y Google sabe mucho mejor que yo. Cuando veo algo que quiero replicar, busco tutoriales o encuentro aplicaciones de código abierto que ya lo han hecho.

No reinvento la rueda , no hay suficiente tiempo en el día.

Esto también funciona como un ejercicio de aprendizaje adicional porque descubro cómo los profesionales administran y organizan sus bases de códigos, así como las mejores prácticas que utilizan.

Más importante aún, navegar por un repositorio existente es la primera tarea del 99% de las contrataciones de software. ¿Por qué? Porque las compañías no contratan ingenieros nuevos para escribir aplicaciones desde cero. Hay excepciones a esto, pero no muchas.

Larga historia corta, “los buenos artistas toman prestado, los grandes artistas roban”.

Respuestas relacionadas

• ¿Cómo se crean hermosas interfaces de usuario no estándar para aplicaciones de Android?
• ¿Cuál es su método preferido de aprendizaje de programación?
• ¿Cuáles son los requisitos básicos para un desarrollador de Android?
• ¿Cómo convierto un diseño PSD a un diseño XML Android?

¿Esto ayudó? ¡Entonces, vota para apoyar esta respuesta y sígueme para obtener más información sobre Android, desarrollo de aplicaciones y otras cosas divertidas!

Notas al pie

[1] Muzei Live Wallpaper – Aplicaciones de Android en Google Play

[2] Live Wallpaper: Quote & Photo – Aplicaciones de Android en Google Play

[3] romannurik / muzei

[4] google / iosched