{"id":3153,"date":"2020-04-14T20:41:37","date_gmt":"2020-04-14T10:41:37","guid":{"rendered":"https:\/\/learntodroid.com\/?p=3153"},"modified":"2020-04-14T20:41:47","modified_gmt":"2020-04-14T10:41:47","slug":"android-glide-tutorial-with-examples-in-java","status":"publish","type":"post","link":"http:\/\/10.0.0.14:32769\/android-glide-tutorial-with-examples-in-java\/","title":{"rendered":"Android Glide Tutorial with Examples in Java"},"content":{"rendered":"\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/bumptech.github.io\/glide\/\" target=\"_blank\">Glide<\/a> is an <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/bumptech\/glide\" target=\"_blank\">open source<\/a> library for Android that is best known for making loading images from the internet into an ImageView a breeze. It also offers a cache for loading images to improve the performance and reduce network bandwidth of your Android app.<\/p>\n\n\n\n<p>In this post I have created a tutorial covering how to set up and use the Glide image loading and caching library.<\/p>\n\n\n\n<p>I will share code samples throughout this post written in Java also available in the GitHub repository I have created at the link below.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/learntodroid\/GlideTutorial\" target=\"_blank\">https:\/\/github.com\/learntodroid\/GlideTutorial<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Download the Dependencies for Glide using Gradle<\/h2>\n\n\n\n<p>Using Gradle to download the latest dependencies for Glide in your Android project is a simple task.<\/p>\n\n\n\n<p>Inside the app level build.gradle include the following inside the dependencies section of the file.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/e9f4785bfaacafb21f9bec60753a00d0.js\"><\/script><\/p>\n\n\n<p>These dependencies are the latest as at the time of writing this post but if you need to check for the latest version numbers of the dependencies they can be located on the <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/bumptech\/glide\" target=\"_blank\">official Glide GitHub repository<\/a> in the README. In the README it also advises how to retrieve the dependencies for Glide using Maven if you prefer to use Maven over Gradle.<\/p>\n\n\n\n<p>Now you can sync Gradle and once complete you are now ready to start using Glide for image loading.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to use Glide to Load an Image into an ImageView<\/h2>\n\n\n\n<p>In this section of this tutorial on Glide I will show you how to load an image from a URI into an ImageView.<\/p>\n\n\n\n<p>To demonstrate how to use Glide I will create a simple Android app that will display information about a video game such as the title, platforms supported, genre, initial release date, description and box art. We will be using Glide to load the box art image for the video game into an ImageView.<\/p>\n\n\n\n<p>See the screenshot below for what we are looking to implement in this section.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"368\" height=\"668\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Load-Image-into-ImageView-using-Glide-Screenshot.png\" alt=\"\" class=\"wp-image-3186\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Load-Image-into-ImageView-using-Glide-Screenshot.png 368w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Load-Image-into-ImageView-using-Glide-Screenshot-165x300.png 165w\" sizes=\"(max-width: 368px) 100vw, 368px\" \/><figcaption>Box Art Image Source: <a rel=\"noreferrer noopener\" href=\"https:\/\/en.wikipedia.org\/wiki\/File:Halo_TMCC_KeyArt_Vert_2019.png\" target=\"_blank\">https:\/\/en.wikipedia.org\/wiki\/File:Halo_TMCC_KeyArt_Vert_2019.png<\/a><br>Game Description Source: <a href=\"https:\/\/en.wikipedia.org\/wiki\/Halo:_The_Master_Chief_Collection\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/en.wikipedia.org\/wiki\/Halo:_The_Master_Chief_Collection<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Modelling a Game Class<\/h3>\n\n\n\n<p>For the app we will be creating we will first create a class for modelling a Game that we will be showing the app. The Game class will contain six String variables for capturing the following details relating to a video game.<\/p>\n\n\n\n<ul><li>Title of the game<\/li><li>Genre of the game<\/li><li>Initial release date of the game<\/li><li>Platforms supported by the game<\/li><li>URI to the box art image for the game<\/li><li>Description of the game<\/li><\/ul>\n\n\n\n<p>See the code sample for the Game class below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/e229e62056162a3e9daae0f20b069bf4.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Step 2: Creating the Layout Resource for the Fragment<\/h3>\n\n\n\n<p>Assuming you have already downloaded the dependencies for using Glide covered in an earlier section of the post, the next step is to create a layout resource for a game details fragment shown in the screenshot above.<\/p>\n\n\n\n<p>The game details fragment will contain the following:<\/p>\n\n\n\n<ul><li>An ImageView for displaying the box art<\/li><li>TextViews positioned to the right of the box art for the game title, platforms supported, game genre and the initial release date<\/li><li>Underneath the box art and the TextViews will contain a vertically scrollable ScrollView containing a single TextView showing a long description of the video game (in the example I have used in the screenshot and code samples the description originates from the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Halo:_The_Master_Chief_Collection\" target=\"_blank\" rel=\"noreferrer noopener\">Halo: The Master Chief Collection Wikipedia page<\/a>)<\/li><\/ul>\n\n\n\n<p>See the sample layout resource file for the game details fragment below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/a49d49f973ec605b8be3fb12834842bd.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Step 3: Create the Fragment Class and Load Image into ImageView Using Glide<\/h3>\n\n\n\n<p>In this section of the tutorial we will be creating the GameDetailFragment class.<\/p>\n\n\n\n<p>In this onCreate(Bundle) method of the GameDetailFragment class we will create a hardcoded Game object we will use for displaying in the user interface. <\/p>\n\n\n\n<p>In the onCreateView(&#8230;) method we will inflate the fragment resource file we implemented in the previous step and set the text for each of the TextViews using the set text method and retrieving the relevant String variable from the Game object using the getter methods.<\/p>\n\n\n\n<p>Also in the onCreateView(&#8230;) method we will use Glide to load the image into the ImageView.<\/p>\n\n\n\n<p>To do this we will use the with(&#8230;) method from <a href=\"https:\/\/bumptech.github.io\/glide\/javadocs\/4110\/com\/bumptech\/glide\/Glide.html\" target=\"_blank\" rel=\"noreferrer noopener\">Glide<\/a> and pass the fragment as the parameter. The with(Fragment) method for Glide will tie the load transaction that will come next to the lifecycle of the provided Fragment. The with(&#8230;) method from Glide also supports taking a View, Context, Activity or FragmentActivity as a parameter instead of a Fragment.<\/p>\n\n\n\n<p>Next we will chain the load(&#8230;) method onto the with(&#8230;) method call and provide the String of the URI to the box art image as a parameter. The load(&#8230;) method originates from the <a rel=\"noreferrer noopener\" href=\"https:\/\/bumptech.github.io\/glide\/javadocs\/4110\/com\/bumptech\/glide\/RequestManager.html\" target=\"_blank\">RequestManager<\/a> class from Glide. The load(String) method is used for loading the image using a String as the Uri into the Glide cache. The load(&#8230;) method from Glide also supports loading an image from a bitmap,  a drawable, a Uri object, a File object and a resource id.<\/p>\n\n\n\n<p>After that we will chain the into(&#8230;) method onto the load(&#8230;) method call and provide the ImageView for the box art as the parameter. The into(&#8230;) method originates from the <a rel=\"noreferrer noopener\" href=\"https:\/\/bumptech.github.io\/glide\/javadocs\/4110\/com\/bumptech\/glide\/RequestBuilder.html\" target=\"_blank\">RequestBuilder<\/a> class from Glide. The into(ImageView) method will provides the ImageView resource that the image will be loaded into. It also cancels any existing loads into the ImageView and frees up any resources Glide has previously loaded into the view for performance reasons. The into(&#8230;) method also support a <a rel=\"noreferrer noopener\" href=\"https:\/\/bumptech.github.io\/glide\/doc\/targets.html\" target=\"_blank\">Target<\/a> being passed as a parameter.<\/p>\n\n\n\n<p>See the code sample below for the GameDetailFragment class.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/dbd389f6de83feef01b9a951cd8ebce8.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Step 4: Adding the Fragment to the Activity Using the Navigation Component<\/h3>\n\n\n\n<p>I will go through this step briefly as it is not the focus of this tutorial, however if you like to learn more about the navigation architecture component released under Jetpack and how to use it to move between fragments check out the post I wrote linked below.<\/p>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-learn-to-droid\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"EaTaO1w0pV\"><a href=\"http:\/\/10.0.0.14:32769\/how-to-move-between-fragments-using-the-navigation-component\/\">How to Move Between Fragments Using the Navigation Component<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;How to Move Between Fragments Using the Navigation Component&#8221; &#8212; Learn to Droid\" src=\"http:\/\/10.0.0.14:32769\/how-to-move-between-fragments-using-the-navigation-component\/embed\/#?secret=6nc0OnjQ07#?secret=EaTaO1w0pV\" data-secret=\"EaTaO1w0pV\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>To set up the navigation component in our Android project first we need to download the navigation component dependencies via Gradle.<\/p>\n\n\n\n<p>See the sample app level build.gradle file containing the dependencies for the navigation component.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/3aeda27a09a4ef6811f29c92c70961f5.js\"><\/script><\/p>\n\n\n<p>Next we will need to create a navigation graph. To do this in Android Studio right click on the &#8220;res&#8221; directory and create a new Android resource file with the resource type of &#8220;Navigation&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"827\" height=\"485\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Create-New-Navigation-Resource-File.png\" alt=\"\" class=\"wp-image-3199\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Create-New-Navigation-Resource-File.png 827w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Create-New-Navigation-Resource-File-300x176.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Create-New-Navigation-Resource-File-768x450.png 768w\" sizes=\"(max-width: 827px) 100vw, 827px\" \/><\/figure>\n\n\n\n<p>Next we will need to add a NavHostFragment to the layout resource for the MainActivity class.<\/p>\n\n\n\n<p>See the layout resource for the MainActivity class below containing a NavHostFragment.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/1a0c91079c664372b142ff0d6e77147e.js\"><\/script><\/p>\n\n\n<p>Next we will go into the Navigation Editor in Android Studio by clicking on the navigation graph resource file and selecting the &#8220;Design&#8221; tab. In the Navigation Editor we will add the GameDetailFragment as a new destination to the navigation graph. The GameDetailFragment will be the start destination for the navigation graph.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"257\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Navigation-Graph-Editor-in-Android-Studio-1024x257.png\" alt=\"\" class=\"wp-image-3197\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Navigation-Graph-Editor-in-Android-Studio-1024x257.png 1024w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Navigation-Graph-Editor-in-Android-Studio-300x75.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Navigation-Graph-Editor-in-Android-Studio-768x193.png 768w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Navigation-Graph-Editor-in-Android-Studio.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Add Internet Permission to the Manifest<\/h3>\n\n\n\n<p>As we will be using Glide to load the image from the internet to be shown in the ImageView we will require permission in our Android app to access the internet.<\/p>\n\n\n\n<p>See the sample manifest file below requesting permission to access the internet using the use-permission tag for the &#8220;android.permission.INTERNET&#8221; permission.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/920db4fdfa05dbcdafcdcec0285a0be2.js\"><\/script><\/p>\n\n\n<p>Now if you build and run your Android app you should see the GameDetailFragment load with the TextViews showing immediately, then you should notice a short pause where your ImageView will be blank (which is Glide downloading the image for the internet) then the box art should be displayed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Display a Placeholder Image While Loading an Image using Glide<\/h2>\n\n\n\n<p>Glide has support for showing a placeholder image inside an ImageView while it is loading the image to show in the ImageView. For an example of how this works take a look at the animated GIF I created below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"408\" height=\"853\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Image-Loading-with-Glide-Using-Placeholder.gif\" alt=\"\" class=\"wp-image-3225\"\/><\/figure><\/div>\n\n\n\n<p>To show a placeholder image in Glide while the other image is being loaded you must first create a drawable to use as the placeholder image.<\/p>\n\n\n\n<p>In the example shown in the screen capture above I created a drawable that uses the download clipart icon by right clicking the &#8220;res&#8221; directory and selecting the &#8220;New&#8221;, &#8220;Vector asset&#8221; option. From there I located the download clipart icon and created the drawable.<\/p>\n\n\n\n<p>Once you have created the drawable you can set the drawable as the placeholder image using Glide by chaining the placeholder(&#8230;) method onto the load(&#8230;) method call and provide the drawable as the parameter.<\/p>\n\n\n\n<p>See the code sample below that shows how to use Glide to display a placeholder image into a ImageView while loading an image.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/7ffdfc49ae221a3017190dfa5c247d5a.js\"><\/script><\/p>\n\n\n<h2 class=\"wp-block-heading\">How to Display an Image if there is an Error Loading an Image using Glide<\/h2>\n\n\n\n<p>Glide also has the ability to display an image representing an error inside an ImageView if there is an error when loading an image. For an example of this check out the animated GIF I created below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"408\" height=\"853\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Image-Loading-with-Glide-Using-Placeholder-and-Error.gif\" alt=\"\" class=\"wp-image-3231\"\/><\/figure><\/div>\n\n\n\n<p>In the screen capture above, first aeroplane mode is enabled to turn off the internet connection on the device causing the error image to appear. After that, the aeroplane mode is disabled restoring the internet connection and the app is relaunched and the image loads with a placeholder then the box art image is shown.<\/p>\n\n\n\n<p>The image shown in the case of an error needs to be added to the Android project as a drawable just like the placeholder image covered in the previous section.<\/p>\n\n\n\n<p>Once you have created the drawable to use for the error image, you can set the drawable as the error image using Glide by chaining the error(&#8230;) method onto the load(&#8230;) method call or placeholder(&#8230;) method call and provide the drawable as the parameter.<\/p>\n\n\n\n<p>See the code sample below that shows how to use Glide to display an error image into a ImageView while loading an image.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/e33ff5cce7af7704d3055bcc9d07138e.js\"><\/script><\/p>\n\n\n<h2 class=\"wp-block-heading\">How to Use Glide for Image Loading in a RecyclerView<\/h2>\n\n\n\n<p>Glide can also be used to load images as items into a RecyclerView.<\/p>\n\n\n\n<p>The screenshot below shows a RecyclerView containing a list of video games each inside a CardView showing the box art image on the left, loaded using Glide and information about the video game on the right.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"415\" height=\"861\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Glide-Image-Loading-in-RecyclerView-1.png\" alt=\"\" class=\"wp-image-3251\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Glide-Image-Loading-in-RecyclerView-1.png 415w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Glide-Image-Loading-in-RecyclerView-1-145x300.png 145w\" sizes=\"(max-width: 415px) 100vw, 415px\" \/><\/figure><\/div>\n\n\n\n<p>Next I will take you through how to create this RecyclerView with the help of Glide for image loading. We will reuse the Game model class created in the previous section as well as the navigation component and Glide dependencies previously set up in the app&#8217;s build.gradle file.<\/p>\n\n\n\n<p>We will follow the steps below for this section of the tutorial for creating the RecyclerView containing images loaded using Glide.<\/p>\n\n\n\n<ol><li>Create the Layout Resource for each game shown in the RecyclerView<\/li><li>Create the RecyclerViewHolder for the game using Glide to load the image<\/li><li>Create the RecyclerViewAdapter for the games<\/li><li>Create the GamesListFragment and initialise the RecyclerViewAdapter and set up the RecyclerView<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Creating the Layout Resource for the Game Item in the RecyclerView<\/h3>\n\n\n\n<p>The first step of this section of the tutorial involves creating the layout resource file for each Game to be displayed in the RecyclerView.<\/p>\n\n\n\n<p>The layout resource we will be creating will contain a CardView which will contain the following:<\/p>\n\n\n\n<ul><li>An ImageView for the box art<\/li><li>TextViews of varying sized fonts for the game title, genre, platforms and initial release date <\/li><\/ul>\n\n\n\n<p>See the sample layout resource file to be used for each Game in the RecyclerView.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/df89df949b847dfbb5ebba007a4d93c6.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Create the RecyclerViewHolder for the Game using Glide to Load the Image<\/h3>\n\n\n\n<p>The second step of this section of the tutorial to create a RecyclerViewHolder for the Game item.<\/p>\n\n\n\n<p>This is where we will bind the data from the Game object into the TextViews and load the box art into the ImageView using Glide.<\/p>\n\n\n\n<p>See the code sample for the GamesViewHolder.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/3e9c0d9e808904b09b2e8deaed3220c8.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Create the RecyclerViewAdapter for the Games<\/h3>\n\n\n\n<p>For the third step of this section of the tutorial we will create the RecyclerViewAdapter class for the RecyclerView to be used for displaying Games.<\/p>\n\n\n\n<p>See the code sample below for the GamesRecyclerViewAdapter.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/423d34aec1ef537151abdfb2f2171377.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Create the GamesListFragment and Initialize the RecyclerViewAdapter and Setup the RecyclerView<\/h3>\n\n\n\n<p>This is the final step in this section of the tutorial for creating a RecyclerView that utilizes Glide to load Images. This step involves creating the GamesListFragment and it&#8217;s layout resource then adding it to the navigation graph to display in your navigation graph.<\/p>\n\n\n\n<p>For the layout resource for the GamesListFragment it will consistent of a simple LinearLayout containing a RecyclerView. See the sample layout resource file for the GamesListFragment below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/9a6a5a16fc4f9b4388a26290752362b9.js\"><\/script><\/p>\n\n\n<p>Next we will define the GamesListFragment class.<\/p>\n\n\n\n<p>In the onCreate(Bundle) method we will initialize a List of Games by creating an ArrayList and adding five games to it. Then we will instantiate the GamesRecyclerViewAdapter passing the List of Games as a parameter.<\/p>\n\n\n\n<p>In the onCreateView(&#8230;) method we will set up the RecyclerView by setting the layout manager as a LinearLayoutManager and setting the GamesRecyclerViewAdapter as the adapter for the RecyclerView.<\/p>\n\n\n\n<p>See the code sample for the GamesListFragment class below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/26b1ae4a7f541efb9dfdf3b6b20eba03.js\"><\/script><\/p>\n\n\n<p>Finally we will add the GamesListFragment to the navigation graph and set it to the start destination for the navigation graph.<\/p>\n\n\n\n<p>Now if you build and run your Android app you should see the RecyclerView for the games containing the images of the box art for each game loaded using Glide.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Create a Round Circular Image using Glide<\/h2>\n\n\n\n<p>Glide has a feature called transformations which allows it to modify an image resource it has loaded. Transformations can be used with Glide to crop or apply filters to bitmaps.<\/p>\n\n\n\n<p>Glide has some out of the box transformations it supports, these include:<\/p>\n\n\n\n<ul><li>CenterCrop<\/li><li>FitCenter<\/li><li>CircleCrop<\/li><\/ul>\n\n\n\n<p>The <a rel=\"noreferrer noopener\" href=\"https:\/\/bumptech.github.io\/glide\/javadocs\/400\/com\/bumptech\/glide\/load\/resource\/bitmap\/CenterCrop.html\" target=\"_blank\">CenterCrop<\/a> transformation can be used to scale an image to fit particular dimensions without maintaining the aspect radio then crop the image from the center point.<\/p>\n\n\n\n<p>The <a rel=\"noreferrer noopener\" href=\"https:\/\/bumptech.github.io\/glide\/javadocs\/400\/com\/bumptech\/glide\/load\/resource\/bitmap\/FitCenter.html\" target=\"_blank\">FitCenter<\/a> transformation can be used to scale an image to fit particular dimensions while maintaining the aspect ratio.<\/p>\n\n\n\n<p>The <a rel=\"noreferrer noopener\" href=\"https:\/\/bumptech.github.io\/glide\/javadocs\/400\/com\/bumptech\/glide\/load\/resource\/bitmap\/CenterCrop.html\" target=\"_blank\">CircleCrop<\/a> transformation can be used to create a round circular image using Glide.<\/p>\n\n\n\n<p>See the screenshot below showing the CircleCrop transformation being applied to box art images for the games loaded into the RecyclerView using Glide.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"417\" height=\"859\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Glide-Image-Circular-Crop-1.png\" alt=\"\" class=\"wp-image-3281\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Glide-Image-Circular-Crop-1.png 417w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Glide-Image-Circular-Crop-1-146x300.png 146w\" sizes=\"(max-width: 417px) 100vw, 417px\" \/><\/figure><\/div>\n\n\n\n<p>See the modified code sample of the GamesViewHolder class created in the section for the RecyclerView tutorial that chains the circleCrop(&#8230;) method to the load(&#8230;) method call to achieve this effect.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/f37f929218cdda6a082a2ffcf6062e5e.js\"><\/script><\/p>\n\n\n<h2 class=\"wp-block-heading\">How to Apply Rounded Corners to an Image using Glide<\/h2>\n\n\n\n<p>Glide can also be used to apply a transformation to an image to create rounded corners.<\/p>\n\n\n\n<p>For an example of applying rounded corners to an image loaded using Glide look at the screenshot of the app below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"413\" height=\"861\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Glide-Image-Rounded-Corners-1.png\" alt=\"\" class=\"wp-image-3288\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Glide-Image-Rounded-Corners-1.png 413w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Glide-Image-Rounded-Corners-1-144x300.png 144w\" sizes=\"(max-width: 413px) 100vw, 413px\" \/><\/figure><\/div>\n\n\n\n<p>See the modified code sample of the GamesViewHolder class created in the section for the RecyclerView tutorial that uses the apply(&#8230;) method to apply a bitmap transform for rounded corners.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/4cda2c43ebfec076dd1e07738e5571aa.js\"><\/script><\/p>\n\n\n<h2 class=\"wp-block-heading\">How to Load GIF and WEBP Images into an ImageView using Glide<\/h2>\n\n\n\n<p>It is possible to load and display animated images in GIF and WEBP formats using Glide.<\/p>\n\n\n\n<p>GIF files for animations are supported out of the box by Glide. It is recommended when you load an GIF image using Glide you should chain the asGif() method to the with(&#8230;) method call so that you can get an error if the image is not in the correct format.<\/p>\n\n\n\n<p>See the example screen capture loading and displaying the <a rel=\"noreferrer noopener\" href=\"https:\/\/www.reactiongifs.com\/r\/hsk.gif\" target=\"_blank\">following GIF<\/a> into an ImageView using Glide.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"408\" height=\"853\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Glide-GIF-Image-Loading.gif\" alt=\"\" class=\"wp-image-3244\"\/><\/figure><\/div>\n\n\n\n<p>WEBP is a popular image file format also used for animations. If you look at the popular website for finding image animations <a rel=\"noreferrer noopener\" href=\"https:\/\/giphy.com\/\" target=\"_blank\">giphy.com<\/a> the image files are in WEBP format.<\/p>\n\n\n\n<p>To load and display WEBP formatted images from the internet you will need to use the <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/zjupure\/GlideWebpDecoder\" target=\"_blank\">GlideWebpDecoder<\/a> library. To obtain the GlideWebpDecoder you will need to add the following to your app level build.gradle file.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/849adcfae66763016377f5493b4c15ca.js\"><\/script><\/p>\n\n\n<p>See the example screen capture loading and displaying the <a href=\"https:\/\/i.giphy.com\/media\/UmGYBusanpEwU\/giphy.webp\" target=\"_blank\" rel=\"noreferrer noopener\">following WEBP<\/a> into an ImageView using Glide.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"408\" height=\"853\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/04\/Glide-WEBP-Image-Loading-1.gif\" alt=\"\" class=\"wp-image-3247\"\/><\/figure><\/div>\n\n\n\n<p>Check out the code sample below that covers loading an animated GIF file and an animated WEBP file from the internet into an ImageView using Glide.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/02970560311c6c835449034e0bd9102e.js\"><\/script><\/p>\n\n\n<h2 class=\"wp-block-heading\">Useful Links<\/h2>\n\n\n\n<ol><li>Glide API Documentation &#8211; <a href=\"https:\/\/bumptech.github.io\/glide\/javadocs\/4110\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/bumptech.github.io\/glide\/javadocs\/4110\/index.html<\/a><\/li><li>Official website for Glide &#8211; <a rel=\"noreferrer noopener\" href=\"https:\/\/bumptech.github.io\/glide\/\" target=\"_blank\">https:\/\/bumptech.github.io\/glide\/<\/a><\/li><li>GitHub repository for Glide &#8211; <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/bumptech\/glide\" target=\"_blank\">https:\/\/github.com\/bumptech\/glide<\/a><\/li><\/ol>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Glide is an open source library for Android that is best known for making loading images from the internet into an ImageView a breeze. It also offers a cache for<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[12],"tags":[],"acf":[],"_links":{"self":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/3153"}],"collection":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/comments?post=3153"}],"version-history":[{"count":5,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/3153\/revisions"}],"predecessor-version":[{"id":3290,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/3153\/revisions\/3290"}],"wp:attachment":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/media?parent=3153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/categories?post=3153"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/tags?post=3153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}