ImageView RecyclerView Lazy Load











up vote
0
down vote

favorite












I have a RecyclerViewAdapter which in onBindViewHolder, I make an AsyncTask call to download the image required from Google Cloud Storage.



There are some items in the RecyclerViewAdapter which call for the same image. I tried to deal with this by only downloading the image if it doesn't already exist in the local file storage; otherwise if it does then it uses the image that has already been downloaded.



Now what's happening is, if there are multiple items from the RecyclerView calling for the same image at near enough the same time, one of the items ImageView will just be blank/white but the rest of them will display the image correctly.



I was hoping to be able to capture this scenario and just use Thread.sleep and then try to get/use the file again but I'm not getting any exceptions thrown or anything so I'm not sure how to even capture that scenario to deal with it.



The only thing that I can see in the logcat which looks remotely helpful is the below:



D/skia: --- Failed to create image decoder with message 'unimplemented'



However it's not throwing an exception, it's just logging it as a message.



It does however point to there being an issue with the decoding of the image. So I checked the BitmapFactory.decodeFile documentation and it says that it returns a null if it couldn't decode it. So I tried to check if my bitmap was null after trying to decode but it never hit that IF statement meaning it was never returning null so I'm not sure what to do.



new Getlogos(holder.logoImageView.getTag().toString(), holder.itemView.getContext(), new Getlogos.AsyncResponse() {
@Override
public void returnBitmapURI(String URI, String tag) {
if (holder.logoImageView != null && holder.logoImageView.getTag().toString().equals(tag)) {
if (URI.contains("drawable://")) {
int id = Integer.parseInt(URI.substring(11));
Bitmap myBitmap = BitmapFactory.decodeResource(context.getResources(), id);
holder.logoImageView.setImageBitmap(myBitmap);
} else {
Bitmap myBitmap = BitmapFactory.decodeFile(URI);
holder.logoImageView.setImageBitmap(myBitmap);
}
}
}
}).execute();


The issue only occurs sometimes and it doesn't happen to the same image consistently. it normally varies between some of the items that have the same image to download/use. Sometimes it doesn't occur at all.



Can anyone shed any light on where that skia message is coming from and how I can capture it when it fails to decode, so I can handle it?










share|improve this question
























  • by google storage you mean firebase storage?
    – ahuja007
    Nov 21 at 10:13










  • I mean Google Cloud Storage
    – Rafiq07
    Nov 21 at 10:15












  • Is there a reason you don't wanne use a library for this, for example Picasso Image Loader.. Picasso image loader will handle all this stuff for you and you can set the image source by a single oneliner.
    – Luciano
    Nov 21 at 10:19












  • I try not to use libraries unless I have to. I suppose I think it might help me learn or understand more about how it all works.
    – Rafiq07
    Nov 21 at 10:28










  • when you set bitmap from uri it loads whole image with full width and full height so first crop the bitmap and set with respect to imageview instead of it use glide library
    – Chetan Shelake
    Nov 21 at 10:48

















up vote
0
down vote

favorite












I have a RecyclerViewAdapter which in onBindViewHolder, I make an AsyncTask call to download the image required from Google Cloud Storage.



There are some items in the RecyclerViewAdapter which call for the same image. I tried to deal with this by only downloading the image if it doesn't already exist in the local file storage; otherwise if it does then it uses the image that has already been downloaded.



Now what's happening is, if there are multiple items from the RecyclerView calling for the same image at near enough the same time, one of the items ImageView will just be blank/white but the rest of them will display the image correctly.



I was hoping to be able to capture this scenario and just use Thread.sleep and then try to get/use the file again but I'm not getting any exceptions thrown or anything so I'm not sure how to even capture that scenario to deal with it.



The only thing that I can see in the logcat which looks remotely helpful is the below:



D/skia: --- Failed to create image decoder with message 'unimplemented'



However it's not throwing an exception, it's just logging it as a message.



It does however point to there being an issue with the decoding of the image. So I checked the BitmapFactory.decodeFile documentation and it says that it returns a null if it couldn't decode it. So I tried to check if my bitmap was null after trying to decode but it never hit that IF statement meaning it was never returning null so I'm not sure what to do.



new Getlogos(holder.logoImageView.getTag().toString(), holder.itemView.getContext(), new Getlogos.AsyncResponse() {
@Override
public void returnBitmapURI(String URI, String tag) {
if (holder.logoImageView != null && holder.logoImageView.getTag().toString().equals(tag)) {
if (URI.contains("drawable://")) {
int id = Integer.parseInt(URI.substring(11));
Bitmap myBitmap = BitmapFactory.decodeResource(context.getResources(), id);
holder.logoImageView.setImageBitmap(myBitmap);
} else {
Bitmap myBitmap = BitmapFactory.decodeFile(URI);
holder.logoImageView.setImageBitmap(myBitmap);
}
}
}
}).execute();


The issue only occurs sometimes and it doesn't happen to the same image consistently. it normally varies between some of the items that have the same image to download/use. Sometimes it doesn't occur at all.



Can anyone shed any light on where that skia message is coming from and how I can capture it when it fails to decode, so I can handle it?










share|improve this question
























  • by google storage you mean firebase storage?
    – ahuja007
    Nov 21 at 10:13










  • I mean Google Cloud Storage
    – Rafiq07
    Nov 21 at 10:15












  • Is there a reason you don't wanne use a library for this, for example Picasso Image Loader.. Picasso image loader will handle all this stuff for you and you can set the image source by a single oneliner.
    – Luciano
    Nov 21 at 10:19












  • I try not to use libraries unless I have to. I suppose I think it might help me learn or understand more about how it all works.
    – Rafiq07
    Nov 21 at 10:28










  • when you set bitmap from uri it loads whole image with full width and full height so first crop the bitmap and set with respect to imageview instead of it use glide library
    – Chetan Shelake
    Nov 21 at 10:48















up vote
0
down vote

favorite









up vote
0
down vote

favorite











I have a RecyclerViewAdapter which in onBindViewHolder, I make an AsyncTask call to download the image required from Google Cloud Storage.



There are some items in the RecyclerViewAdapter which call for the same image. I tried to deal with this by only downloading the image if it doesn't already exist in the local file storage; otherwise if it does then it uses the image that has already been downloaded.



Now what's happening is, if there are multiple items from the RecyclerView calling for the same image at near enough the same time, one of the items ImageView will just be blank/white but the rest of them will display the image correctly.



I was hoping to be able to capture this scenario and just use Thread.sleep and then try to get/use the file again but I'm not getting any exceptions thrown or anything so I'm not sure how to even capture that scenario to deal with it.



The only thing that I can see in the logcat which looks remotely helpful is the below:



D/skia: --- Failed to create image decoder with message 'unimplemented'



However it's not throwing an exception, it's just logging it as a message.



It does however point to there being an issue with the decoding of the image. So I checked the BitmapFactory.decodeFile documentation and it says that it returns a null if it couldn't decode it. So I tried to check if my bitmap was null after trying to decode but it never hit that IF statement meaning it was never returning null so I'm not sure what to do.



new Getlogos(holder.logoImageView.getTag().toString(), holder.itemView.getContext(), new Getlogos.AsyncResponse() {
@Override
public void returnBitmapURI(String URI, String tag) {
if (holder.logoImageView != null && holder.logoImageView.getTag().toString().equals(tag)) {
if (URI.contains("drawable://")) {
int id = Integer.parseInt(URI.substring(11));
Bitmap myBitmap = BitmapFactory.decodeResource(context.getResources(), id);
holder.logoImageView.setImageBitmap(myBitmap);
} else {
Bitmap myBitmap = BitmapFactory.decodeFile(URI);
holder.logoImageView.setImageBitmap(myBitmap);
}
}
}
}).execute();


The issue only occurs sometimes and it doesn't happen to the same image consistently. it normally varies between some of the items that have the same image to download/use. Sometimes it doesn't occur at all.



Can anyone shed any light on where that skia message is coming from and how I can capture it when it fails to decode, so I can handle it?










share|improve this question















I have a RecyclerViewAdapter which in onBindViewHolder, I make an AsyncTask call to download the image required from Google Cloud Storage.



There are some items in the RecyclerViewAdapter which call for the same image. I tried to deal with this by only downloading the image if it doesn't already exist in the local file storage; otherwise if it does then it uses the image that has already been downloaded.



Now what's happening is, if there are multiple items from the RecyclerView calling for the same image at near enough the same time, one of the items ImageView will just be blank/white but the rest of them will display the image correctly.



I was hoping to be able to capture this scenario and just use Thread.sleep and then try to get/use the file again but I'm not getting any exceptions thrown or anything so I'm not sure how to even capture that scenario to deal with it.



The only thing that I can see in the logcat which looks remotely helpful is the below:



D/skia: --- Failed to create image decoder with message 'unimplemented'



However it's not throwing an exception, it's just logging it as a message.



It does however point to there being an issue with the decoding of the image. So I checked the BitmapFactory.decodeFile documentation and it says that it returns a null if it couldn't decode it. So I tried to check if my bitmap was null after trying to decode but it never hit that IF statement meaning it was never returning null so I'm not sure what to do.



new Getlogos(holder.logoImageView.getTag().toString(), holder.itemView.getContext(), new Getlogos.AsyncResponse() {
@Override
public void returnBitmapURI(String URI, String tag) {
if (holder.logoImageView != null && holder.logoImageView.getTag().toString().equals(tag)) {
if (URI.contains("drawable://")) {
int id = Integer.parseInt(URI.substring(11));
Bitmap myBitmap = BitmapFactory.decodeResource(context.getResources(), id);
holder.logoImageView.setImageBitmap(myBitmap);
} else {
Bitmap myBitmap = BitmapFactory.decodeFile(URI);
holder.logoImageView.setImageBitmap(myBitmap);
}
}
}
}).execute();


The issue only occurs sometimes and it doesn't happen to the same image consistently. it normally varies between some of the items that have the same image to download/use. Sometimes it doesn't occur at all.



Can anyone shed any light on where that skia message is coming from and how I can capture it when it fails to decode, so I can handle it?







android imageview bitmapfactory recyclerview-layout skia






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 21 at 10:52









Kling Klang

32.1k156287




32.1k156287










asked Nov 21 at 10:11









Rafiq07

177




177












  • by google storage you mean firebase storage?
    – ahuja007
    Nov 21 at 10:13










  • I mean Google Cloud Storage
    – Rafiq07
    Nov 21 at 10:15












  • Is there a reason you don't wanne use a library for this, for example Picasso Image Loader.. Picasso image loader will handle all this stuff for you and you can set the image source by a single oneliner.
    – Luciano
    Nov 21 at 10:19












  • I try not to use libraries unless I have to. I suppose I think it might help me learn or understand more about how it all works.
    – Rafiq07
    Nov 21 at 10:28










  • when you set bitmap from uri it loads whole image with full width and full height so first crop the bitmap and set with respect to imageview instead of it use glide library
    – Chetan Shelake
    Nov 21 at 10:48




















  • by google storage you mean firebase storage?
    – ahuja007
    Nov 21 at 10:13










  • I mean Google Cloud Storage
    – Rafiq07
    Nov 21 at 10:15












  • Is there a reason you don't wanne use a library for this, for example Picasso Image Loader.. Picasso image loader will handle all this stuff for you and you can set the image source by a single oneliner.
    – Luciano
    Nov 21 at 10:19












  • I try not to use libraries unless I have to. I suppose I think it might help me learn or understand more about how it all works.
    – Rafiq07
    Nov 21 at 10:28










  • when you set bitmap from uri it loads whole image with full width and full height so first crop the bitmap and set with respect to imageview instead of it use glide library
    – Chetan Shelake
    Nov 21 at 10:48


















by google storage you mean firebase storage?
– ahuja007
Nov 21 at 10:13




by google storage you mean firebase storage?
– ahuja007
Nov 21 at 10:13












I mean Google Cloud Storage
– Rafiq07
Nov 21 at 10:15






I mean Google Cloud Storage
– Rafiq07
Nov 21 at 10:15














Is there a reason you don't wanne use a library for this, for example Picasso Image Loader.. Picasso image loader will handle all this stuff for you and you can set the image source by a single oneliner.
– Luciano
Nov 21 at 10:19






Is there a reason you don't wanne use a library for this, for example Picasso Image Loader.. Picasso image loader will handle all this stuff for you and you can set the image source by a single oneliner.
– Luciano
Nov 21 at 10:19














I try not to use libraries unless I have to. I suppose I think it might help me learn or understand more about how it all works.
– Rafiq07
Nov 21 at 10:28




I try not to use libraries unless I have to. I suppose I think it might help me learn or understand more about how it all works.
– Rafiq07
Nov 21 at 10:28












when you set bitmap from uri it loads whole image with full width and full height so first crop the bitmap and set with respect to imageview instead of it use glide library
– Chetan Shelake
Nov 21 at 10:48






when you set bitmap from uri it loads whole image with full width and full height so first crop the bitmap and set with respect to imageview instead of it use glide library
– Chetan Shelake
Nov 21 at 10:48














1 Answer
1






active

oldest

votes

















up vote
3
down vote



accepted











Use Glide to display image in recyclerView



Add this dependencies to build.gradle




implementation 'com.github.bumptech.glide:glide:4.8.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'


Inside onBindViewHolder




Request option to show error image, placeholder image etc.
CircularProgressDrawable for placeholder drawable(optional)




val circularProgressDrawable = CircularProgressDrawable(mContext)
circularProgressDrawable.strokeWidth = 5f
circularProgressDrawable.centerRadius = 30f
circularProgressDrawable.start()

val requestOption : RequestOptions = RequestOptions()
.placeholder(circularProgressDrawable)
.error(R.drawable.ic_error_1)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.priority(Priority.HIGH)
.dontAnimate()
.dontTransform()



initialize Glide as shown below




Glide.with(mContext)
.load(model.imageUrl)
.apply(requestOption)
.into(holder.imageView!!)





share|improve this answer























  • Even though this doesn't really answer my question, it is a usable workaround to the issue around implementing the required functionality myself, so I've marked it as an answer. Thanks for the example code on how to implement Glide. My RecyclerViewAdapter is a bit slower but it does look to be functioning correctly now after a bit of tweaking.
    – Rafiq07
    Nov 21 at 12:01













Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53409693%2fimageview-recyclerview-lazy-load%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
3
down vote



accepted











Use Glide to display image in recyclerView



Add this dependencies to build.gradle




implementation 'com.github.bumptech.glide:glide:4.8.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'


Inside onBindViewHolder




Request option to show error image, placeholder image etc.
CircularProgressDrawable for placeholder drawable(optional)




val circularProgressDrawable = CircularProgressDrawable(mContext)
circularProgressDrawable.strokeWidth = 5f
circularProgressDrawable.centerRadius = 30f
circularProgressDrawable.start()

val requestOption : RequestOptions = RequestOptions()
.placeholder(circularProgressDrawable)
.error(R.drawable.ic_error_1)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.priority(Priority.HIGH)
.dontAnimate()
.dontTransform()



initialize Glide as shown below




Glide.with(mContext)
.load(model.imageUrl)
.apply(requestOption)
.into(holder.imageView!!)





share|improve this answer























  • Even though this doesn't really answer my question, it is a usable workaround to the issue around implementing the required functionality myself, so I've marked it as an answer. Thanks for the example code on how to implement Glide. My RecyclerViewAdapter is a bit slower but it does look to be functioning correctly now after a bit of tweaking.
    – Rafiq07
    Nov 21 at 12:01

















up vote
3
down vote



accepted











Use Glide to display image in recyclerView



Add this dependencies to build.gradle




implementation 'com.github.bumptech.glide:glide:4.8.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'


Inside onBindViewHolder




Request option to show error image, placeholder image etc.
CircularProgressDrawable for placeholder drawable(optional)




val circularProgressDrawable = CircularProgressDrawable(mContext)
circularProgressDrawable.strokeWidth = 5f
circularProgressDrawable.centerRadius = 30f
circularProgressDrawable.start()

val requestOption : RequestOptions = RequestOptions()
.placeholder(circularProgressDrawable)
.error(R.drawable.ic_error_1)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.priority(Priority.HIGH)
.dontAnimate()
.dontTransform()



initialize Glide as shown below




Glide.with(mContext)
.load(model.imageUrl)
.apply(requestOption)
.into(holder.imageView!!)





share|improve this answer























  • Even though this doesn't really answer my question, it is a usable workaround to the issue around implementing the required functionality myself, so I've marked it as an answer. Thanks for the example code on how to implement Glide. My RecyclerViewAdapter is a bit slower but it does look to be functioning correctly now after a bit of tweaking.
    – Rafiq07
    Nov 21 at 12:01















up vote
3
down vote



accepted







up vote
3
down vote



accepted







Use Glide to display image in recyclerView



Add this dependencies to build.gradle




implementation 'com.github.bumptech.glide:glide:4.8.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'


Inside onBindViewHolder




Request option to show error image, placeholder image etc.
CircularProgressDrawable for placeholder drawable(optional)




val circularProgressDrawable = CircularProgressDrawable(mContext)
circularProgressDrawable.strokeWidth = 5f
circularProgressDrawable.centerRadius = 30f
circularProgressDrawable.start()

val requestOption : RequestOptions = RequestOptions()
.placeholder(circularProgressDrawable)
.error(R.drawable.ic_error_1)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.priority(Priority.HIGH)
.dontAnimate()
.dontTransform()



initialize Glide as shown below




Glide.with(mContext)
.load(model.imageUrl)
.apply(requestOption)
.into(holder.imageView!!)





share|improve this answer















Use Glide to display image in recyclerView



Add this dependencies to build.gradle




implementation 'com.github.bumptech.glide:glide:4.8.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'


Inside onBindViewHolder




Request option to show error image, placeholder image etc.
CircularProgressDrawable for placeholder drawable(optional)




val circularProgressDrawable = CircularProgressDrawable(mContext)
circularProgressDrawable.strokeWidth = 5f
circularProgressDrawable.centerRadius = 30f
circularProgressDrawable.start()

val requestOption : RequestOptions = RequestOptions()
.placeholder(circularProgressDrawable)
.error(R.drawable.ic_error_1)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.priority(Priority.HIGH)
.dontAnimate()
.dontTransform()



initialize Glide as shown below




Glide.with(mContext)
.load(model.imageUrl)
.apply(requestOption)
.into(holder.imageView!!)






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 21 at 10:39









Aniruddh Parihar

2,16311027




2,16311027










answered Nov 21 at 10:34









Chethan Kumar

1339




1339












  • Even though this doesn't really answer my question, it is a usable workaround to the issue around implementing the required functionality myself, so I've marked it as an answer. Thanks for the example code on how to implement Glide. My RecyclerViewAdapter is a bit slower but it does look to be functioning correctly now after a bit of tweaking.
    – Rafiq07
    Nov 21 at 12:01




















  • Even though this doesn't really answer my question, it is a usable workaround to the issue around implementing the required functionality myself, so I've marked it as an answer. Thanks for the example code on how to implement Glide. My RecyclerViewAdapter is a bit slower but it does look to be functioning correctly now after a bit of tweaking.
    – Rafiq07
    Nov 21 at 12:01


















Even though this doesn't really answer my question, it is a usable workaround to the issue around implementing the required functionality myself, so I've marked it as an answer. Thanks for the example code on how to implement Glide. My RecyclerViewAdapter is a bit slower but it does look to be functioning correctly now after a bit of tweaking.
– Rafiq07
Nov 21 at 12:01






Even though this doesn't really answer my question, it is a usable workaround to the issue around implementing the required functionality myself, so I've marked it as an answer. Thanks for the example code on how to implement Glide. My RecyclerViewAdapter is a bit slower but it does look to be functioning correctly now after a bit of tweaking.
– Rafiq07
Nov 21 at 12:01




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53409693%2fimageview-recyclerview-lazy-load%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Berounka

Sphinx de Gizeh

Different font size/position of beamer's navigation symbols template's content depending on regular/plain...