Última actualización: 11/12/2023

La aplicación desarrollada en el tutorial «Diseño Android: tema claro y oscuro» ofrece tanto un tema claro como uno oscuro. Pero tiene una carencia: el usuario solo puede cambiar el tema si activa y desactiva el modo oscuro o de ahorro de energía del sistema Android. Por eso en este tutorial te explico cómo crear un selector de tema similar al de WhatsUp.

Última actualización: 08/12/2023

En esencia, un tema oscuro ‘muestra sobre todo superficies oscuras con poca luminosidad’. Se contrapone a los temas claros, donde predominan los fondos blancos y las superficies luminosas.

¿Qué ventajas ofrecen los temas oscuros? ¿Cómo se implementan en Android? ¿Pueden un tema claro y otro oscuro convivir en la misma aplicación? En este tutorial te doy las respuestas. Se complementa con esta segunda parte, que explica cómo crear una pantalla de preferencias con un selector de tema. El enfoque de ambas publicaciones es técnico; esto significa que hablaremos de código, no de diseño gráfico.

Uno de los diseños de interfaz más difundidos en Android son las pestañas (tabs) integradas en la barra de acciones. Podemos encontrar una infinidad de ejemplos de su implementación, y yo mismo suelo utilizarlo en mis apps, como en Pantanos de España

Seguir leyendo

La barra o menú de navegación inferior (Bottom Navigation) es uno de los elementos de navegación esenciales definidos por Material Design. La ves a diario en aplicaciones tan populares como Spotify, Instagram, TikTok o YouTube. Muestra varios iconos, a veces acompañados por un texto, que dan acceso a las principales secciones de una aplicación.

Navigation Drawer es uno de los componentes visuales definidos por Material Design más importantes. Tal vez su nombre no te diga nada, pero como usuario lo conoces de sobra: el popular menú lateral deslizable desde la izquierda (la derecha en lenguajes RTL) y que suele contar con un botón «hamburguesa» (tres líneas horizontales apiladas) para desplegarlo.

En el tutorial Diseño Android: Cuadros de diálogo de selección vimos cómo crear un cuadro de diálogo de selección de opciones (simple y múltiple) encapsulado en un fragment. También echamos un vistazo rápido a las características que presentan en general de los cuadros de diálogo en Android. En el presente tutorial haremos lo mismo pero en lugar de mostrar un listado de elementos a seleccionar tendremos un pequeño formulario.

Seguir leyendo

Los cuadros de diálogo son un elemento básico de la mayoría de interfaces de usuario y no necesitan presentación alguna. Según las guías de estilos de Material Design, «informan a los usuarios sobre una tarea específica y pueden contener información crítica, requerir decisiones o implicar varias tareas.» En Android, son ventanas que se muestran sobre una pantalla, representada por una Activity o un Fragment, y que bloquean el uso de la pantalla subyacente. Esta ventana es gestionada directamente por una implementación del contrato android.content.DialogInterface, aunque en la práctica será suficiente con utilizar alguna de las implementaciones que ya incluye Android.

Seguir leyendo

Seguimos en el blog echando un vistazo a componentes de Material Design de los que disponemos de implementaciones proporcionadas por Google. En este tutorial veremos el componente Bottom Sheet, un panel que se desliza hacia arriba desde la parte inferior de la pantalla. Su uso más habitual es mostrar información contextual o funcionar a modo de menú de selección. Este segundo caso es el que vamos a implementar con dos diseños distintos (modo lista y modo grid) y encapsulado en un fragment. El primero de ellos es una copia del utilizado en la versión 2.0 de Muspy for Android. La siguiente imagen muestra lo que vamos a implementar en este tutorial.

Seguir leyendo

Material Design hace especial hincapié en el concepto de motion (movimiento) para «describir las relaciones espaciales, la funcionalidad y la intención con belleza y fluidez». Dentro de los patrones de diseño propuestos podemos encontrar ejemplos y consejos para mantener la continuidad al navegar entre las distintas pantallas de forma coherente, natural y elegante, siendo uno de los comportamientos más llamativos el desplazamiento rápido y suave entre pantallas de elementos comunes entre ellas (shared elements). Podemos encontrar un buen ejemplo de ello en Google Play.

Seguir leyendo

En este tutorial vamos a ver una solución para un escenario en el que necesitamos que una aplicación realice una tarea en segundo plano de forma periódica y sin intervención por parte del usuario, por ejemplo para realizar una sincronización de datos con un servidor. Esta tarea puede ser implementada con un servicio, «un componente de una aplicación que puede realizar operaciones de larga ejecución en segundo plano y que no proporciona una interfaz de usuario». Además de implementar este servicio, tenemos que encontrar un modo de programar su ejecución periódica y asegurar que se ejecute aunque la aplicación no se esté en ejecutando en ese momento.

Seguir leyendo