Diseño Android: EditText con Material Design y TextInputLayout

Última actualización : 18/08/2016

android

La especificación de Material Design para los campos de texto recoge la utilización de las denominadas “etiquetas flotantes” (floating labels). Este elemento de usabilidad consiste en ubicar las etiquetas de los campos de texto dentro del mismo (inline) para posteriormente mostrarlas en la parte superior del campo mientras este tenga el foco o bien contenga algún valor. El objetivo es optimizar el espacio vertical de la pantalla al mostrarse la etiqueta dentro del campo del texto pero evitar a la vez que el usuario pierda la noción del contenido que corresponde al campo del texto. La siguiente animación, extraída de la aplicación de ejemplo que construiremos en el presente tutorial, muestra este comportamiento:

Android TextInputLayout

Seguir leyendo

Diseño Android: Toolbar y Pestañas con Material Design

android

Uno de los componentes gráficos definidos por Material Design que más rápidamente han sido adoptados en Android es el nuevo estilo de pestañas integradas en la barra de acciones. Podemos encontrar una infinidad de ejemplos de su implementación, por ejemplo Google Play:

google play tabs

Los widgets necesarios para implementar este patrón de diseño los tenemos disponibles en la Support Library y serán utilizados en el presente tutorial para construir una interfaz de pestañas estilo Material Design. Para ello me voy a apoyar en lo expuesto en los tutoriales “Diseño Android: ActionBar con Toolbar” y “Diseño Android: ViewPager” por lo que remito al lector a los mismos para profundizar en estos elementos si no los ha utilizado anteriormente.

Seguir leyendo

Diseño Android: Pull To Refresh con SwipeRefreshLayout

android

El patrón de diseño Swipe To Refresh, más conocido como Pull To Refresh, puede ser considerado como el mecanismo estándar en aplicaciones móviles para actualizar el contenido de un listado o grid de datos con los elementos más recientes los cuales son añadidos en la parte superior del listado. Al deslizarse el listado hacia abajo y mostrarse el primer elemento, si el usuario intenta seguir deslizando un poco más (a veces se muestra un mensaje informando al usuario de esta posibilidad) se procede a la obtención de nuevos datos mostrando un Progress Dialog indeterminado.

android pull to refresh

Seguir leyendo

Diseño Android: Tarjetas con CardView

android

Las tarjetas son un componente gráfico popularizado por Google Now y que ahora forman parte de Material Design. El concepto de tarjeta es el de una ficha de papel o portada de una carpeta que proporciona sólo el resumen de cierto contenido y permite acceder al contenido completo. El resumen puede estar compuesto por un conjunto de elementos heterogéneos que incluye imágenes, títulos, textos, íconos, menús contextuales, acciones…

Android SDK proporciona una implementación del componente tarjeta con el widget CardView en un módulo propio de la librería de compatibilidad. En este tutorial diseñaremos una tarjeta más o menos típica con este componente haciendo uso también del widget Toolbar.

Seguir leyendo

Diseño Android: Notificaciones con Snackbar

android

La Snackbar es un nuevo componente de notificación que forma parte de Material Design. Estas notificaciones se muestran en la parte inferior de la pantalla y desaparecen automáticamente tras un cierto periodo de tiempo al igual que los Toast (aunque como veremos también se pueden mostrar de forma indefinida) y opcionalmente ofrecen al usuario la posibilidad de realizar alguna acción. Sólo habrá una Snackbar visible en pantalla y nunca mostrarán imágenes.

google keep snackbar

Seguir leyendo

Diseño Android: Floating Action Button con Design Support Library

Última actualización : 20/02/2016
android

Floating Action Button, FAB para los amigos, es un elemento visual introducido en Material Design cuyo objetivo es destacar la acción principal de una pantalla siempre y cuando esta constituya una operación muy habitual y “natural” como por ejemplo redactar un nuevo email en una aplicación de correos.

La acción flotante debe ser única y se muestra como un botón circular y plano en la parte inferior derecha de la pantalla aunque en ocasiones es posible que el FAB se “incruste” en otro elemento de la interfaz:

floating action button

Seguir leyendo

Diseño Android: ActionBar con Toolbar

Última actualización : 17/08/2016

android

La ActionBar es la barra superior presente en la inmensa mayoría de aplicaciones y habitualmente suele mostrar el nombre de la pantalla visualizada, el icono de la aplicación (o el del menú de navegación) y las acciones disponibles.

action bar

La ActionBar forma parte del profundo rediseño acometido por Google para Android 3/4 y su adopción fue bastante rápida. Para poder utilizarla en Android 2 era necesario recurrir a implementaciones propias o de terceros como la popular ActionBarSherlock pero en 2013 se incluyó en librería de compatibilidad.

Con Lollipop llegó Material Design y un nuevo rediseño visual tan importante como el que supuso la llegada de Android 4. Una de las novedades ha sido la aparición de la Toolbar que pretende ser un reemplazo de la ActionBar más potente y flexible. Mientras que la ActionBar es un elemento del sistema que se muestra en una Activity si se hereda de un tema que la incluya, Toolbar es simplemente un widget que aporta grandes ventajas: Seguir leyendo