I am new Android developer. I want to achieve the following: On a particular screen (Activity) I have a grid view with images being set onto it. I have hundreds of thumbnail images coming from a server via http request. Now I don't want the gridview (with 4 columns in one row) to load the images in one go. Instead I want images to be loaded one row at a time (4 images), with other tiles of the grid view showing progess bar. Also when only few images are displayed the user should still be able to scroll the gridview vertically and thereby displaying empty gridview frames or tiles but if the scrolling is paused the frames or tiles of gridview are again loaded one row at a time.
I am looking for ideas to achieve this.
Thanks in advance for your responses.
In your Adapter's getView method set the image with a indefinite progress spinner.
After that start an AsyncTask to download the image if its not present in the object returned by getItem. Pass the item's position to the asynctask.
In AsyncTask's onPostExecute set the image to the view at position and hide the progress spinner.
Downloading the image in AsyncTask will ensure that your gridview is filled with items(empty) and responds to scrolling.
Related
I have a list which I use recyclerView to display. Each row in the list displays an image that is downloaded from a remote server. In order to speedup the display of the list I am downloading the images in the background. Each time the bind() wants to display the image I call a method that starts an asynchronous task that download the image and in the onPostExecute() method I call setImageBitmap() of the image to display the bit-mapped downloaded.
The problem is as follows
As I scroll down, the recyclerView loads more images that fits the screen and when the setImageBitmap() is called the list jumps up, so that the last 1 or 2 items in the list almost never displayed.
When I disable the call to setImageBitmap() there is no problem in displaying the last items (the list now is without images), and scrolling up and down the list.
The problem also shows up when I scroll down very slow. I limited the screen to show only 4 items, and as I scroll down to the 6th or 7th item suddenly the display jumps and displays again from item 2 to 5.
What is going on there and how can I make the display to scroll smoothly and without jumping all over?
There problem here comes to the fact your recycler view at the time it is inflated has size X, when you load your image the size changes but the LayoutManager is not aware of this change, hence it won't update your view.
You should post a snippet of your code, it will help to clarify.
Two questions:
a) is there any way to stop views from getting "thrown out" when you scroll? I'm fetching images from the web using the YouTubeAPI (YouTubeThumbnailView) and it takes some time to fetch these - when scrolling the images are loaded in a couple seconds after scrolling has stopped.
and b) can I withhold elements of the listview until they are completely loaded? I'd prefer the elements to render when their thumbnails have loaded.
It seems like you're going about this the wrong way. You should be fetching the images and storing them in some sort of cache (there are numerous topics on this, so I'll leave that part as an exercise) and then notifying when the data has loaded and updating the thumbnail if it's still on screen. It shouldn't matter whether the View was "thrown out"; on the next time you try to View that particular thumbnail it should already be in the cache and should be able to be loaded near-instantly.
As for the second question, you could initially set the visibility of the View that you return in your Adapter's getView() to INVISIBLE, then when you display the thumbnail, set the thumbnail and then set the View to VISIBLE.
I am working on an app which requires an autocompletetextview for suggesting contacts in dropdown view. I am using a custom cursor adapter. My layout for one drop down item has imageview on the left (for showing image of the contact if available, else a default image).
I have used Asynctask to load images from the contacts. In my bindView method, I have following snippet to load images from the Async task.
contactImage = new conactImage(viewHolder, cursor);
contactImage.execute(new String[] {userId});
and in the Asynctask's onPostExecute method, I set the image bitmap.
mViewHolder.cImage.setImageBitmap(imageResultBitmap);
mViewHolder is the viewholder passed as argument in the previous snippet.
The problem I am facing is a bad UX. Suppose I entered two characters in the autocompletetextview. The images show up in a second. When I scroll, the images don't change unless I wait another 2 3 seconds to get the correct image loaded. And when I scroll fast, the views flicker a lot because of the random image bitmap changes.
I understand it is a view recycling thing, but this gets annoying. Please suggest any other possible way to do the same.
on scrolling
Thanks!
Hi I want to show the images in listview when user scroll the list.
I retrieved the image from database(blob) not from web service.
for example
I have an 40 items in the list view and in my mobile screen 10 item is visible. when i scroll the list it load the next images. i don't want to load the 40 images concurrently.
list will show images between Fisrt Visible Position and Last Visible Position.
Like in a twitter app the images first blank when user scroll then it load in the listview
Thanks in advance.
The solution you finding is called Lazy Loading Adapter, this tutorial will work as you want check this link, this loads images in lazy manner.
I am using a GridView having image as child items.
The getView functions loads a default image from the application "Loading.gif" for all the child items.
In another thread I load all the images to some Bitmap type into the adapter.
Is it wise enough to call adapter.notifyDataSetChanged() after each image is loaded ?
Or is there and alternative way to directly update the image ?
Checkout the technique used in ListView , where default image used in listview items. And a thread load images for list items and update the new images without adapter.notifyDataSetChanged() called.
http://iamvijayakumar.blogspot.com/2011/06/android-lazy-image-loader-example.html
If you want more efficient way to do this then check this out.
http://developer.android.com/resources/samples/XmlAdapters/src/com/example/android/xmladapters/ImageDownloader.html