Android: Binding content to the views while loading Images the correct way

Anubhav
CodeX
Published in
3 min readJul 5, 2021
Photo by Susan Q Yin on Unsplash

Working with images in Android is one of the most common parts of Android Applications Development. The image may be from the web or from the device's local storage. Loading images into views needs to be effective so that fewer resources are being used, and the views are rendered gracefully. There are scenarios when we would like to load other content from the web or the database with the images or we would want to perform certain actions once the images are downloaded.

There are many libraries which make our lives easy by providing us with efficient image downloading and caching functionalities, Glide is one of them. Glide can load and display images from many sources, while also taking care of caching and keeping a low memory impact when doing image manipulations. Glide is also being using in official google applications.

Glide supports fetching, decoding, and displaying video stills, images, and animated GIFs. Glide includes a flexible api that allows developers to plug in to almost any network stack. By default Glide uses a custom HttpUrlConnection based stack, but also includes utility libraries plug in to Google’s Volley project or Square’s OkHttp library instead.

Glide’s primary focus is on making scrolling any kind of a list of images as smooth and fast as possible, but Glide is also effective for almost any case where we need to fetch, resize, and display a remote image.

For our case we will be handling images downloading from the web along with the corresponding text content. For majority of the times, the text content will be dowloaded before an image is downloaded. To give a better user experience we will be displaying them both at the same time.

Glide Dependency

dependencies {    def glideVersion = '4.11.0'
implementation "com.github.bumptech.glide:glide:$glideVersion"
}

Android Manifest Permissions

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

We need to add the INTERNET permission to let our app access the web. I will explain the need for ACCESS_NETWORK_STATE permission as we continue with the article.

Basic Implementation of Glide

Glide.with(fragment)
.load(imageUrl)
.error(R.drawable.ic_error)
.into(imageView)

In the above snippet, we are just giving it a reference of a fragment in which the imageView is present. We pass in the image url to the load(..) function and set a drawable for error case. There are multiple functionalities which you can access with Glide, but that is beyond the scope of this article.

Adding Download Listeners

Glide.with(fragment)
.load(imageUrl)
.error(R.drawable.ic_error)
.listener(object : RequestListener<Drawable> {
override fun onLoadFailed(
e: GlideException?,
model: Any?,
target: Target<Drawable>?,
isFirstResource: Boolean
): Boolean {
TODO("Not yet implemented")
}

override fun onResourceReady(
resource: Drawable?,
model: Any?,
target: Target<Drawable>?,
dataSource: DataSource?,
isFirstResource: Boolean
): Boolean {
TODO("Not yet implemented")
}

})

.into(imageView)

Here we have added a listener which provides us with two callbacks, one for the fail case onLoadFailed(..), and other for the success case onResourceReady(..). We need to do the rendering of the views in the onResourceReady(..) method.

Glide.with(fragment)
.load(imageUrl)
.error(R.drawable.ic_error)
.listener(object : RequestListener<Drawable> {
override fun onLoadFailed(
e: GlideException?,
model: Any?,
target: Target<Drawable>?,
isFirstResource: Boolean
): Boolean {
pbImage.isVisible = false
return false

}

override fun onResourceReady(
resource: Drawable?,
model: Any?,
target: Target<Drawable>?,
dataSource: DataSource?,
isFirstResource: Boolean
): Boolean {
pbImage.isVisible = false
txtAuthor.isVisible = true
txtDescription.isVisible = image.description != null
return false

}

})
.into(imageView)

Here pbImage is the id of our ProgressBar, txtAuthor and txtDescription are the ids of our TextViews, and imageView is the id of our ImageView. In case of a failed response, we set the progress bar visibility to invisible and return false. In case of a successful response, we bind data to all the views at the same time giving users a better experience. We need to return false from both the callback methods for the image to be loaded into the imageView view.

And this is how we can load data with images more gracefully.

Handling Network Errors

Consider the case where the images failed to load into the views due to a network error. To make sure that the images get loaded when our device has network access we need the ACCESS_NETWORK_STATE permission and Glide takes care of the rest. Yes, it is that simple.

And we are done with the article.

Hope you learnt something. Cheers !

--

--

CodeX
CodeX

Published in CodeX

Everything connected with Tech & Code. Follow to join our 1M+ monthly readers

Anubhav
Anubhav

No responses yet