Actually I'm trying to load images into my reycycleview using glide 4.4.0 and it's loading fine . But now the problem is my recyclerview is lagging a bit when I scroll fast due to the image loading . But I saw some of the glide's method called preload and downloadOnly .So,my question is are these methods helpful for loading image in advance if so then how to use them?
You can use this to fine-tune your preloading. It requires quite a bit of work but looks promising.
In short, you need to create a PreLoader class that will get image URLs from your data set:
private class MyPreloadModelProvider implements PreloadModelProvider {
#Override
#NonNull
public List<U> getPreloadItems(int position) {
String url = myUrls.get(position);
if (TextUtils.isEmpty(url)) {
return Collections.emptyList();
}
return Collections.singletonList(url);
}
#Override
#Nullable
public RequestBuilder getPreloadRequestBuilder(String url) {
return
GlideApp.with(fragment)
.load(url)
.override(imageWidthPixels, imageHeightPixels);
}
}
And then you set it as a scroll listener on your recycler view:
PreloadSizeProvider sizeProvider =
new FixedPreloadSizeProvider(imageWidthPixels, imageHeightPixels);
PreloadModelProvider modelProvider = new MyPreloadModelProvider();
RecyclerViewPreloader<Photo> preloader =
new RecyclerViewPreloader<>(
Glide.with(this), modelProvider, sizeProvider, 10 /*maxPreload*/);
RecyclerView myRecyclerView = (RecyclerView) result.findViewById(R.id.recycler_view);
myRecyclerView.addOnScrollListener(preloader);
After this, you'll get your images preloaded before the onBondViewHolder callback in the adapter, and you'll be able to display them from the cache.
#Override
public void onBindViewHolder(ViewHolder viewHolder, int position) {
ImageView imageView = ((MyViewHolder) viewHolder).imageView;
String currentUrl = myUrls.get(position);
GlideApp.with(fragment)
.load(currentUrl)
.override(imageWidthPixels, imageHeightPixels)
.into(imageView);
}
Related
I could get it right with Realtime Database, but I went over to Cloud FireStore and now I'm running into some problems. I want to display an image that is in Firestore via a download URL from Firestore. I'm using the FirestoreRecyclerAdapter, I want to populate an imageView in a RecyclerView.
I tried to do it the same way it worked in Realtime Database, but I get an error, but this time I get an error telling me NumberFormatException: For input string:
#Override
protected void onBindViewHolder(#NonNull NoteHolder holder, int p,
#NonNull promo_one_data promo_one) {
holder.produk_product.setText(promo_one.getProduct());
holder.produk_discription.setText(promo_one.getDiscription());
holder.produk_discription_two.setText(promo_one.getDiscription_two());
holder.produk_size.setText(promo_one.getSize());
holder.produk_product_two.setText(promo_one.getProduct_two());
holder.produk_price.setText(promo_one.getPrice());
holder.produk_department.setText(promo_one.getDepartment());
if ("1".equals(holder.produk_department.getText().toString())) {
holder.itemView.setBackgroundColor(Color.parseColor("#FFCDD2"));
} else if ("2".equals(holder.produk_department.getText().toString())) {
holder.itemView.setBackgroundColor(Color.parseColor("#FFA6AF"));
} else {
holder.itemView.setBackgroundColor(Color.WHITE);
}
holder.produk_image.setImageResource(Integer.parseInt(promo_one.getImage()));
Picasso.get().load(promo_one.getImage()).into(holder.produk_image);
}
#NonNull
#Override
public NoteHolder onCreateViewHolder(#NonNull ViewGroup parent, int viewType) {
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item_promo, parent, false);
return new NoteHolder(v);
}
How can I display an image in a recyclerView from Cloud Firestore. It shows me "java.lang.NumberFormatException: For input string:...(the URL here), which I could gather means the string is to long to convert into a int to fill the imageView. How do I do this, or is there a way around? Or even how do I shorten the URL, or maybe is there a way to do it and not use Picasso?
Your problem is this line :
holder.produk_image.setImageResource(Integer.parseInt(promo_one.getImage()));
you should not be trying to parse the URL of the image to an integer here, the next line using Picasso:
Picasso.get().load(promo_one.getImage()).into(holder.produk_image);
should handle the image loading for you.
I am developing an Android app which should display a list of video thumbnails in RecyclerView. A new activity will then play the video for selected thumbnail.
How do I set com.vimeo.networking.model.Picture to Android ImageView?
My code:
mVimeoClient.fetchNetworkContent(VIDEO_URI, new ModelCallback<VideoList>(VideoList.class) {
#Override
public void success(VideoList videoList) {
ArrayList<Video> videoArrayList = videoList.data;
Video video = videoArrayList.get(0);
ArrayList<com.vimeo.networking.model.Picture> arrayListPics = video.pictures.sizes;
// imageView.setImageDrawable((Drawable) pictureAL.get(0));
imageView.setImageBitmap( (Bitmap) arrayListPics.get(0));
}
#Override
public void failure(VimeoError error) {
}
});
}
The setImageBitmap() And setImageDrawable() throws
java.lang.ClassCastException
The Picture object (the one returned from arrayListPics.get(0)) in the vimeo-networking library isn't a Bitmap and therefore can't be cast to one. The Picture object has a field on it called mLink which can be access via Picture#getLink(). This will return a URI string which you then can set on your ImageView.
The simplest code you could use to get this working is:
// The ImageView you want to put the thumbnail in
ImageView yourImageView = <insert your ImageView here>;
// The video whose thumbnail you want
Video yourVideo = <insert your Video here>;
// The collection of `Picture` objects associated with this video.
// Each `Picture` in this "collection" is a different size
PictureCollection yourVideosPictures = yourVideo.getPictures();
// Get the first thumbnail/picture from this collection (not recommended)
Picture videoThumbnailPicture = yourVideosPictures.getPictures().get(0);
// The URI to the image of the thumbnail
String videoThumbnailUri = videoThumbnailPicture.getLink();
// Convert the String URI to an actual URI object
final Uri uri = Uri.parse(videoThumbnailUri);
yourImageView.setImageURI(uri);
I say this is the simplest because there are more things you should do when setting an image uri. One thing is you should base the Picture your grab from yourVideosPictures based on the width of your ImageView so that you're not needlessly pulling down a larger image than you need.
You should also probably not just set the image URI directly onto yourImageView, but instead you should use some image caching library (or some caching implementation).
I'd suggest looking into Picasso, Glide, or Fresco. Or just google "Image caching on Android".
Here's a solution using Glide 4.x.
First of all, import the lib on your project:
implementation 'com.github.bumptech.glide:glide:4.6.1'
Since the Pictures class contains an Uri as the others stated, you can use Glide to download the image for you effortlessly as follows.
// Get your ImageView
ImageView iv = findViewById(R.id.your_image_view);
// Get your thumbnails
ArrayList<com.vimeo.networking.model.Picture> arrayListPics = video.pictures.sizes;
// Load them using Glide
Glide.with(this) // Assuming "this" is your Activity, but you can also use any context here
.load(arrayListPics.get(0).getLink())
.into(iv);
That way it won't matter where is the thumbnail located (Network, file, resources), Glide will load it for you.
You can also apply some transformations or use placeholders by using Glide's RequestOptions class. Read more on how to use it here.
Please user Picasso library to load image in Image-view.
In gradle
implementation 'com.squareup.picasso:picasso:2.71828'
in your adapter class
mVimeoClient.fetchNetworkContent(VIDEO_URI, new ModelCallback<VideoList>(VideoList.class) {
#Override
public void success(VideoList videoList) {
ArrayList<Video> videoArrayList = videoList.data;
Video video = videoArrayList.get(0);
ArrayList<Pictures> arrayListPics = video.pictures.sizes;
Picasso.get().load(arrayListPics.get(0).getpath).into(view);
}
#Override
public void failure(VimeoError error) {
}
});
}
So I'm making an app that displays captured images. I first save the snapped images in a static ArrayList of String (In the code below: methods.locationPath), and then converts these strings to bitmaps and save them in an ArrayList of Bitmap (In the code below: images).
for (String path : methods.locationPath) {
Bitmap bitmap = BitmapFactory.decodeFile(path);
images.add(bitmap);
}
gr = (GridView) findViewById(R.id.grid);
GridAdapter gridAdapter = new GridAdapter(this, values,images);
gr.setAdapter(gridAdapter);
this method, however, takes too long. Is there a way to make this loop faster with as small changes as possible?
Thanks
Instead of changing the image path into Bitmap object. You can directly pass the path of the Image and on Adapter class set the Image like
Picasso.with(mContext).load(new File(imageUrl)).resize(100,100).into(myViewHolder.imageView, new Callback() {
#Override
public void onSuccess() {
}
#Override
public void onError() {
}
});
If i had to send a request to get data within onBindViewHolder(), how can i update view after data comes back from server?
what I have now is that I cache the data along with row position, so that next time when user scrolls to that row, I can display info right away.
but there are 2 other issues I don't know how to solve.
I scroll the list to view item at position 10, 11 and 12. I decided to wait for data to come back. do i call notifyDataSetChanged() after? because onBindViewHolder already been called by the time data comes back and view would just remained empty, but I also don't think by calling notifyDataSetChanged() after each request would be a good idea.
I start to view the list at position 0 and keep scrolling to position 10. app sends out request to pull data for position 0 to 10. since the request at 0 is sent out first, more likely it would get back first or at least sooner than position 10, but by that time I'm already viewing the item at position 10. my view would start changing if all requests are back in order, so it would show data for position 0 then keep updating all the way to 10.
is it a bad practice to load data from server as recyclerview scrolls? but by doing this would save me a lot of time, and I guess for user too? because instead of sending all the requests ahead of time, user get to see partial data while other data are being loaded in the background.
Thanks!!!
EDITED
public class TestAdapter extends RecyclerView.Adapter<TestAdapter.ViewHolder> {
private Context ctx;
private ArrayList<Photo> alPhotos = new ArrayList<>();
private HashMap<String, Drawable> hmImages = new HashMap<>();
public TestAdapter(Context ctx, ArrayList<Photo> alPhotos) {
this.ctx = ctx;
this.alPhotos = alPhotos;
}
#Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new ViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_photo_brief, parent, false));
}
#Override
public void onBindViewHolder(ViewHolder holder, int position) {
Photo photo = alPhotos.get(position);
loadRemoteImage(photo.IMG, holder.ivThumb, true);
holder.tvEmail.setText(photo.EMAIL);
}
#Override
public int getItemCount() {
return alPhotos.size();
}
private void loadRemoteImage(final String imgUrl, final ImageView view, final boolean cache) {
if (hmImages.containsKey(imgUrl)) {
view.setImageDrawable(hmImages.get(imgUrl));
} else {
final WeakReference<ImageView> weakView = new WeakReference<>(view);
RequestManager.getManager().add(new Request<>(imgUrl, new DrawableParser(), new RequestCallback<Drawable>() {
#Override
public void onFinished(Request<Drawable> request, Response<Drawable> response) {
if (cache) hmImages.put(imgUrl, response.result);
ImageView view = weakView.get();
if (view != null) {
view.setImageDrawable(response.result);
}
}
#Override
public void onError(Request<Drawable> request, Response<Drawable> response) {
}
#Override
public void onTimeout(Request<Drawable> request, Response<Drawable> response) {
}
})
);
}
}
public class ViewHolder extends RecyclerView.ViewHolder {
private ImageView ivThumb;
private TextView tvEmail;
public ViewHolder(View itemView) {
super(itemView);
findViews();
}
private void findViews() {
ivThumb = (ImageView) itemView.findViewById(R.id.ivThumb);
tvEmail = (TextView) itemView.findViewById(R.id.tvEmail);
}
}
}
It's a good idea to load data while scrolling, a lot of popular apps do that. I personally use WeakReference in this case. I store a weak reference to the view holder in my model when I start loading data. If the reference is still valid by the time I get the response then it makes sense to update the view. If there is no view holder in memory then it's already been recycled and I don't have to update anything anymore.
When onViewRecycled is called you can clear the weak reference and also consider cancelling the network request (depends on your needs).
Caching works perfect with this model, you just insert this logic before making a network request. Again, this depends on your needs, maybe you don't need caching at all, or maybe your data is rarely updated then it makes sense to always use cache until some event.
In my app I also use EventBus, it helps me with event handling, but it is absolutely fine to just use Android SDK and support library.
You can also add a ScrollListener if you need to differentiate the item behavior depending on whether user scrolls the list right now. E.g. in my app I animate the data if list loaded and user wasn't scrolling it (improves interaction with the user). When user scrolls I load data as is, because it will be too much motion on the screen if I animate data.
this is very big trouble for me, I have been working for hours on this, and no clue !
I having a problem with Asynchronous image loading in ListView.
I'm using Parse.com as my application's Backend, i'm retrieving Messages and their images from the Parse.com class.
Everything is working fine, when I scroll Up/Down, or Load the list view again, the Pictures Mixed, and all pictures Reload in another order, and after few seconds they will ordered as I want, but this is a big issue for me.
I think this is happening because I'm using class like this to Upload images
private class DownloadImageTask extends AsyncTask<String, Void, Bitmap>
Anyway my adapter class is the following :
public class adapterview extends ArrayAdapter<Message> {
Bitmap image;
public adapterview(Context context, ArrayList<Message> Messages) {
super(context, 0, Messages);
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
// Get the data item for this position
final Message m = getItem(position);
// Check if an existing view is being reused, otherwise inflate the view
if (convertView == null) {
convertView = LayoutInflater.from(getContext()).inflate(R.layout.custom2, parent, false);
}
TextView message = (TextView) convertView.findViewById(R.id.message);
TextView date = (TextView) convertView.findViewById(R.id.date);
TextView user = (TextView) convertView.findViewById(R.id.user);
message.setText(m.getMessage());
user.setText(m.getUser());
new DownloadImageTask((ImageView) convertView.findViewById(R.id.imageView1))
.execute(m.getImage());
return convertView;
}
private class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
ImageView bmImage;
public DownloadImageTask(ImageView bmImage) {
this.bmImage = bmImage;
}
protected Bitmap doInBackground(String... urls) {
String urldisplay = urls[0];
Bitmap mIcon11 = null;
try {
InputStream in = new java.net.URL(urldisplay).openStream();
mIcon11 = BitmapFactory.decodeStream(in);
} catch (Exception e) {
Log.e("Error", e.getMessage());
e.printStackTrace();
}
return mIcon11;
}
protected void onPostExecute(Bitmap result) {
bmImage.setImageBitmap(result);
}
}
and this is my message class :
public class Message {
String message;
String user;
String phone;
String image;
String date;
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getUser() {
return user;
}
public void setUser(String user) {
this.user = user;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}
and this how i'm adding items to my list :
contacts c = new contacts();
c.setName(object.get("name").toString());
c.setNumero(object.get("phone").toString());
ParseFile image = (ParseFile)object.get("Profil");
c.setProfil(image.getUrl());
messagelist.addcontact(c);
and this is the code how i'm filling the list view from the MainActivity :
adapterview adapter = new adapterview(MainActivity.this, (ArrayList<Message>) messagelist);
list.setAdapter(adapter);
Here is two screenshots when I scroll Down and then Up so the picture of the first listItem changes !! for no reason and then get back to the normal picture after some seconds.
If you can suggest a new way on how I can upload the images from URL to ImageView, that would be great.
What you are observing is i think due to the viewholder pattern of the listview.You are trying to download and set image to the images via aysnctask in getview() but when you scrollup or down the view get recycled and when you again go to that position your getview called for that position so the asynctask is again executed and it download the set the image in imageview again therefore you see the delay,i would suggest you to use PICASSO libraray from square it is quite efficient for image downloads and caches your images also here is the link http://square.github.io/picasso/ or use Glide which is now officially recommended by Google,here is the github link Glide
last time I also used manual downloading avatars of contacts, but it's bad.
Your problem I think:
Download avatar, then set to ImageView
But, you are using ViewHolder pattern, so new downloaded avatar will set to many imageview > wrong avatar for specified contact (This only run well when all avatars are downloaded)
First, check Universal Image Loader library, set avatar URL to the view and it will automatically download, cache your avatars into memory.
Then post here if you still get wrong avatar problem.
the Pictures Mixed, and all pictures Reload in another order, and
after few seconds they will ordered as I want
This weird behavior happening due to AsyncTask in getView method without View Holder Pattern.
To avoid rendering already rendered thumbnail images again and load new images from network in listview on scroll use View Holder pattern.
See following useful tutorial for creating ListView with good scroll and loading performace using View Holder:
Performance Tips for Android’s ListView
That happens because ListView recycle the views when you scroll, and then when you call your async task for downloading of the pictures and scroll, the download finish but the reference points to a recycled view and one or more async task pointing to the same view. One way you could avoid this its tagging you view when a download start, and when the download end, before you draw the image check if its the actual reference the correct and then draw the image.
You could tag the view with the URL of the image because its a unique value.
In the preExecute of the download you must tag the ImageView with the URL(String).
imageView.setTag(url);
And when the task finish and before draw the image, recover the tag and check it.
String tag = (String)imageView.getTag();
if(tag != null && tag.equals(url)){
//Draw the image
} else {
//Draw the placeholder or clean the ImageView
}
And you can upgrade the performance of you ListView using the ViewHolder pattern, and why you download the image manually when Parse can perform it by their API, for the Parse way and using a Cache policy, when you download a image automatically cached the bitmap, and when you ask again for the download just retrieved the cached result.
Cheers!
I solved by using Recycle view's onBindViewHolder
#Override
public void onBindViewHolder(final MyViewHolder viewHolder, int i) {
CartsViewModel currentData = data.get(i);
ParseFile image = currentData.getParseImage();
if(image!=null){
Log.d(TAG,"image not null. Downloading....");
image.getDataInBackground(new GetDataCallback() {
#Override
public void done(byte[] bytes, ParseException e) {
if(e==null){
Log.d(TAG,"donload finished");
Bitmap bmp = BitmapFactory.decodeByteArray(bytes, 0, bytes.length);
viewHolder.cartImage.setImageBitmap(bmp);
}else{
viewHolder.cartImage.setImageBitmap(null);
}
}else{
viewHolder.cartImage.setImageBitmap(null);
}
});
}
viewHolder.cartName.setText(currentData.getCartName());
viewHolder.cartAddress.setText(currentData.getCartAddress());
viewHolder.rating.setText(currentData.getRating());
viewHolder.reviewCount.setText(currentData.getReviewCount());
}
works like charm with the parse method.
What is the listview cell layout xml file?
I think the Android can't determine the cell size of listview. This causes some issues.
If you want to use async loading images, one way to escape the issue is to fix the image size. For example
<ImageView
android:id="#+id/row_icon1"
android:layout_width="60dip"
android:layout_height="60dip"
android:layout_gravity="center_vertical"
/>