Hacer un layout clickable con efecto Ripple

En ocasiones tenemos la necesidad de crear un elemento gráfico más complejo que un botón que nos permita realizar una acción. En este caso os voy a enseñar como conseguir que un layout pueda realizar esta funcionalidad.

Imaginemos que queremos mostrar información acerca de una cerveza en una celda. La información a mostrar podría ser su nombre, su estilo, la graduación y una foto. Nuestro objetivo es que haciendo click en la celda la aplicación navegue hacia la actividad que muestra el detalle de la cerveza en sí.

Un primer paso podría ser algo así:

Dando como resultado:

Ahora para conseguir que el usuario tenga la experiencia de hacer click vamos a añadir dos elementos al layout: el efecto ripple y profundidad.

Para darle profundidad simplemente añadiremos al layout el atributo elevation con lo cual nuestro RelativeLayout quedaría de la siguiente manera:

Este atributo dota al layout de una sombra que le proporciona cierta profundidad.

Por último vamos a añadir el efecto ripple en nuestro layout al hacer click. Esto lo vamos a conseguir añadiendo un recurso Drawable como este:

Donde el atributo color del ripple va a ser el color del efecto. Este drawable se lo añadiremos al layout cambiando su background. Además tendremos que poner el atributo clickable del layout a true.

El resultado final dará al usuario de la aplicación una experiencia muchísimo mejor:

Puedes ver el código entero en el repositorio: https://github.com/kohrong/layoutripple-android

Deja un comentario