Advertisement
  1. Code
  2. Android SDK

Codifica una App Android de Galería de Imágenes con Glide

Scroll to top
Read Time: 11 min

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

1. ¿Qué es Glide?

Glide es una popular librería Android de código abierto para cargar imágenes, videos y GIFs animados. Con Glide puedes cargar y mostrar medios de muchas fuentes diferentes, tales como servidores remotos o el sistema local de archivos.

Por defecto, Glide usa una implementación personalizada de HttpURLConnection para cargar imágenes en internet. Sin embargo, Glide también proporciona complementos para otras librerías populares de red como Volley o OkHttp.

2. ¿Así Que Por Qué Usar Glide?

Desarrollar tu propia funcionalidad de carga de medios y mostrar en Java puede ser un gran dolor: tienes que encargarte de cachear, decodificar, administrar conexiones de red, hilación, manejo de excepciones y más. Glide es una librería fácil de usar, bien planeada, bien documentada y completamente probada que puede ahorrarte mucho tiempo---y ahorrarte algunos dolores de cabeza.

En este tutorial, aprenderemos sobre Glide 3 construyendo una simple app de galería de imágenes. Esta cargará las imágenes vía el internet y las mostrará como viñetas en un RecyclerView y cuando un usuario de clic en una imagen, abrirá una actividad de detalle conteniendo la imagen más grande.

3. Crea un Proyecto Android Studio

Inicia tu Android Studio y crea un nuevo proyecto con una actividad vacía llamada MainActivity.

Android Studio new project screenshotAndroid Studio new project screenshotAndroid Studio new project screenshot

2. Declara Dependencias

Después de crear un nuevo proyecto, especifica las siguientes dependencias en tu build.gradle.

O con Maven:

Asegúrate de que sincronizas tu proyecto después de agregar la dependencia Glide.

Librerías de Integración

Si quieres usar una librería de trabajo en red como OkHttp o Volley en tu proyecto para operaciones de red, se recomienda que incluyas la integración Glide específica para la librería que estás usando (en vez del de por defecto que engloba HttpURLConnection).

Volley

OkHttp

Puedes visitar la guía oficial de integración de librerías Glide para más información.

3. Agrega Permiso de Internet

Ya que Glide va a realizar una petición de red para cargar imágenes vía internet, necesitamos incluir el permiso INTERNET en nuestro AndroidManifest.xml.

4. Crea el Diseño

Comenzaremos creando nuestro RecyclerView.

Creando el Diseño de Elemento Personalizado

Después, creamos el diseño XML que será usado para cada elemento (ImageView) dentro del RecyclerView.

Ahora que hemos creado el diseño, el siguiente paso es crear el adaptador RecyclerView para poblar información. Antes de que hagamos eso, sin embargo, creemos nuestro modelo simple de datos.

5. Crea un Modelo de Datos

Vamos a definir un simple modelo de datos para nuestro RecyclerView. Este modelo implementa Parcelable para mayor desempeño de transporte de datos desde un componente a otros. En nuestro caso, la información será transportada de SpaceGalleryActivity a SpacePhotoActivity.

6. Crea el Adaptador

Crearemos un adaptador para poblar el RecyclerView con datos. También implementaremos un listener de clic para abrir la actividad de detalle---SpacePhotoActivity---pasándole una instancia de SpacePhoto como un extra. La actividad de detalle mostrará un acercamiento de la imagen. La crearemos en una sección posterior.

7. Cargando Imágenes Desde una URL

Aquí es donde necesitamos que Glide haga su trabajo--para traer imágenes de internet y mostrarlas en los ImageViews individuales, usando nuestros método onBindViewHolder() RecyclerView mientras el usuario desliza la app.

Paso a paso, aquí está  lo que las llamadas a Glide están haciendo:

  • with(Context context): comenzamos el proceso de carga primero pasando nuestro contexto en el método with().
  • load(String string): la fuente de la imagen es especificada como una ruta de directorio, una URI o una URL.
  • placeholder(int resourceId): una id de recurso de aplicación local, preferentemente un drawable, que será un contenedor hasta que la imagen sea cargada y mostrada.
  • into(ImageView imageView): la vista de imagen objetivo en la cuál la imagen será colocada.

Ten en cuenta que Glide puede cargar imágenes locales también, solo pasa el id de recurso de Android, la ruta de archivo o una URI como un argumento al método load().

Redimensión de Imagen y Transformación

Puedes re-dimensionar la imagen antes de que sea mostrada en el ImageView con el método .override(int width, int height) de Glide. Esto es útil para crear viñetas en tu app cuando se carga un tamaño de imagen diferente desde el servidor. Nota que las dimensiones están en pixeles no dp.

La siguiente transformación de imagen también está disponible:

  • fitCenter(): escala la imagen uniformemente (manteniendo la relación de aspecto de la imagen) de manera que la imagen encajará en el área dada. La imagen entera será visible, pero podría haber padding vertical u horizontal.
  • centerCrop(): escala la imagen uniformemente (manteniendo la relación de aspecto de la imagen) de manera que la imagen llena el área dada, mostrando tanto de la imagen como sea posible. Si es necesario, la imagen será cortada horizontalmente o verticalmente para encajar.

8. Inicializando el Adaptador

Aquí creamos nuestro RecyclerView con GridLayoutManager como el administrador de diseño, inicializamos nuestro adaptador, y lo enlazamos al RecyclerView.

9. Creando la Actividad Detalle

Crea una nueva actividad y nómbrala SpacePhotoActivity. Obtenemos el extra SpacePhoto y carga la imagen con Glide como hicimos antes. Aquí estamos esperando que el archivo o URL sea un Bitmap, así que usaremos asBitmap() para hacer que Glide reciba un Bitmap. De otro modo la carga fallará y el callback .error() será disparado---causando que el recurso drawable devuelto desde el callback de error sea mostrado. Podrías usar asGif() si quisieras asegurar que tu imagen cargada sea un GIF. (explicaré cómo trabajan los GIFs en Glide en breve.)

Nota que también inicializamos un caché único para las imágenes cargadas: DiskCacheStrategy.SOURCE. Explicaré más sobre cacheo en una sección posterior.

El Diseño de Detalle

Aquí hay un diseño para mostrar la actividad de detalle. Solo muestra un ImageView deslizable que mostrará la versión de resolución completa de la imagen cargada.

10. Cacheando en Glide

Si miras de cerca, verás que cuando revisitas una imagen que fue previamente cargada, esta carga incluso más rápido que antes. ¿Qué la hizo más rápida? El sistema de cacheo de Glide, eso es.

Después de que una imagen ha sido cargada una vez desde internet, Glide la cacheará en memoria y en el disco, ahorrando peticiones de red repetidas y permitiendo entrega más rápida de la imagen. Así que, Glide primero revisará si una imagen está disponible ya sea en memoria o en el disco antes de cargarla desde la red.

Dependiendo de tu aplicación, sin embargo, podrías querer evitar el cacheo--por ejemplo si las imágenes que están siendo mostradas cambiarán regularmente y no serán recargadas.

¿Así Que Cómo Deshabilitas el Cacheo?

Puedes evitar el cacheo de memoria llamando .skipMemoryCache(true). Pero ten en cuenta que la imagen aún será cacheada en el disco--para prevenir eso también, usas el método .diskCacheStrategy(DiskCacheStrategy strategy), que toma uno de los siguientes valores enum:

  • DiskCacheStrategy.NONE: no se guarda información al caché.
  • DiaskCacheStrategy.SOURCE: información original es guardada en caché.
  • DiskCacheStrategy.RESULT: guarda el resultado de la información después de las transformaciones al caché.
  • DiskCacheStrategy.ALL: los cachea información original y datos transformados.

Para evitar cacheo de memoria y disco juntos, solo llama ambos métodos uno después del otro:

11. Listeners de Petición

En Glide, puedes implementar un RequestListener para monitorear el estado de la petición que hiciste mientras la imagen carga. Solo uno de estos métodos será llamado.

  • onException(): disparado siempre que una excepción ocurra para que puedas manejar excepciones en este método.
  • onResourceReady(): disparado cuando la imagen es cargada exitosamente.

Regresando a nuestra app de galería de imagen, modifiquemos un poco la vista usando un objeto RequestListener que establecerá el bitmap al ImageView y también cambia el color de fondo del diseño extrayendo el color oscuro y vibrante de nuestra imagen usando la API Android Palette.

Aquí podrías también esconder un diálogo de progreso si tuvieras uno. Con este último cambio, asegúrate de incluir la dependencia Palette en tu build.gradle:

12. Probando la App

Finalmente, ¡puedes ejecutar la app! Da clic en una viñeta para obtener una versión de tamaño completo de la imagen.

Emulator running the application screenshotsEmulator running the application screenshotsEmulator running the application screenshots

10. Animaciones

Si ejecutas la app, notarás una animación de fundido que sucede mientras la imagen está siendo mostrada. Glide tiene esto habilitado por defecto, pero puedes deshabilitarlo llamando dontAnimate(), que causará que la imagen se muestre sin ninguna animación. También puedes personalizar la animación de fundido llamando crossFade(int duration), pasando la duración en milisegundos ya sea para acelerarlo o alentarlo---300 milisegundos es el ajuste por defecto.

GIFs Animados

Es muy simple mostrar un GIF animado en tu app usando Glide. Funciona igual que mostrar una imagen ordinaria.

Si estás esperando que la imagen sea un GIF, llama asGif()---esto asegura que Glide recibe un GIF, de otro modo la carga fallará y el Drawable pasado al método .error() será mostrado en su lugar.

Reproduciendo Video

Desafortunadamente, Glide no soporta carga y despliegue de video vía URL. En su lugar solo puede cargar y mostrar videos ya almacenados en el teléfono. Muestra un video pasando su URI al método load().

Conclusión

¡Buen trabajo! En este tutorial, construiste una app de galería de imagen completa con Glide, y a lo largo del camino aprendiste como trabaja la librería y cómo puedes integrarla en tu propio proyecto. También has aprendido cómo mostrar imágenes locales y remotas, cómo mostrar GIFs animados y videos, cómo aplicar transformaciones de imagen como re-dimensión. No solo eso, sino que has visto lo fácil que es habilitar el cacheo, manejo de errores y listeners personalizados de petición.

Para aprender más sobre Glide, puedes referirte a su documentación oficial. Para aprender más sobre codificar para Android, ¡revisa algunos de nuestros otros cursos y tutoriales aquí  en Envato Tuts+!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.