Home / Basics / Glide Android Library Tutorial – Library #11
Glide Android Library Tutorial

Glide Android Library Tutorial – Library #11

This is library #11 in this series 100 Library in Android , in the previous article we had Butter Knife Android Library Tutorial. In this article we are having the Glide Android Library Tutorial which is fast and efficient open source media management and image loading framework for Android.

Why Glide ?

  • Supports fetching, decoding, and displaying video stills, images, and animated GIFs
  • Loads thumbnail (blurred) first and then loads the high resolution image like in WhatsApp or Facebook.
  • Supports image arbitrary transformations like loading image in circular shape or any other shape.
  • Better Memory and disk caching mechanisms
  • Works well with both Volley and OkHttp libraries

Our App:

Our app will have two screens, one will have a view to display a GIF, and the other will have a list of users, each user consists of Name and Image, We would load the images from URL and putting a placeholder image to use it while loading out target image. A specific Image would appear if the URL was wrong or the app failed to load the Image.

Technical Overview:

  • The app have 2 activities: GIF Activity, User List Activity:
  1. The GIF Activity will have ImageView and load the GIF into it.
  2. The User List Activity will have a recyclerView in layout.
  3. A User class to hold Attributes (Name, Image) and a layout file to represent the single row in the recyclerView.
  4. An adapter to manage data between the User class and the recyclerView, and the image loading will be done inside this adapter.

So, the diagram for this app will go like this image:

glide

 

How to use it?

First you need to install it via your gradle file like this :

then call it in your java code like this:

Glide Android Library Tutorial

1. Creating Android Project, In Android Studio, create a new project by navigating to File ⇒ New Project and fill all the required details. When it prompts to select a default activity, select Empty Activity, call it MainActivity and proceed.

2. Install the library using Gradle dependency, open Application build.gradle file and add the following code under dependencies:

Note: we are going to use recyclerView so we need to install Google support design library as well

3. Glide uses Internet, so we should add these permissions in the manifest file as following code:

4. Create two empty activities and call them GIFActivity and UserListActivity, Now lets create 2 buttons on our MainActivity layout so we can navigate between these two activities:

open activity_main.xml and add this code:

and open your MainActivity.java and add this code which will navigate between activities:

5. Lets get in the game and try to load a GIF in our GIFActivity, first open activity_gif.xml and add this code, it contains ImageView which Glide uses to display and load images.

6.  Open your GIFActivity.java file and lets add this code, it makes an object of your ImageView and attach the image with its URI.

7. Now, lets create our second activity which will has a recyclerView in its layout to display list of user objects. Open the layout file of the activity activity_user_list.xml and add below code.

Now we need to build the User class and its layout file, and an adapter to adapt this data with the recyclerView

Glide Android Library Tutorial

8. Under your package name, create a java class named User and add below code.

9. Add a layout file contains ImageView and TextView, Under res ⇒ layout folder, create an xml layout named single_user_row.xml. This xml renders single list row in the RecyclerView which contains a TextView (User name) and an ImageView which Glide uses to display and load images (User image).

10. Lets build our adapter, create another class named UserRecyclerviewAdapter. This class is a custom adapter class which inflates the user_movie_row.xml by applying proper data.

Glide is used in this adapter by instantiating an object of ImageView and attach the image with its URI.

11. The last part, Open your UserListActivity class and add this code, this will make an object of the recyclerView, make a list of User objects and then attach it to the adapter object.

12. Run the project and test it. You should able see The Glide Android Library works and the output should look like this images below:

Note: The first time to run the app it will load it will cache the images, so after the first run the loading would be much faster.

Glide Android Library Tutorial

 

Summary
Article Title
Glide Android Library Tutorial – Library #11
Description
Glide Android Library Tutorial, image loading in recyclerView example, display a placeholder, It has two levels of cache, supports display of animated GIFs
Author
Organization
Android Gifts

About #AndroidGifts

#AndroidGifts

Check Also

Picasso Android Library Tutorial

Picasso Android Library Tutorial – Library #5

This is library #5 in this series 100 Library in Android , in the previous article we …

Leave a Reply