I have implemented android app which should download images from server and display them in ListView, but very interesting thing occures while images are downloading
As you can see in video pictures which haven't been downloaded yet are represented by those which have been already downloaded. How that can happen? I've thinking about it almost two days.
http://www.youtube.com/watch?v=lxY-HAuJO0o&feature=youtu.be
here is my code of ListView adapter.
public class MoviesAdapter extends ArrayAdapter<ParkCinema> {
private ArrayList<ParkCinema> movieDataItems;
private Activity context;
public MoviesAdapter(Activity context, int textViewResourceId, ArrayList<ParkCinema> movieDataItems) {
super(context, textViewResourceId, movieDataItems);
this.context = context;
this.movieDataItems = movieDataItems;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater vi = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = vi.inflate(R.layout.movie_data_row, null);
}
ParkCinema movie = movieDataItems.get(position);
if (movie!=null){
ImageView imageView = (ImageView) convertView.findViewById(R.id.movie_thumb_icon);
String url = movie.poster();
if (url!=null) {
Bitmap bitmap = fetchBitmapFromCache(url);
if (bitmap==null) {
new BitmapDownloaderTask(imageView).execute(url);
}
else {
imageView.setImageBitmap(bitmap);
}
}
}
return convertView;
}
private LinkedHashMap<String, Bitmap> bitmapCache = new LinkedHashMap<String, Bitmap>();
private void addBitmapToCache(String url, Bitmap bitmap) {
if (bitmap != null) {
synchronized (bitmapCache) {
bitmapCache.put(url, bitmap);
}
}
}
private Bitmap fetchBitmapFromCache(String url) {
synchronized (bitmapCache) {
final Bitmap bitmap = bitmapCache.get(url);
if (bitmap != null) {
return bitmap;
}
}
return null;
}
private class BitmapDownloaderTask extends AsyncTask<String, Void, Bitmap> {
private String url;
private final WeakReference<ImageView> imageViewReference;
public BitmapDownloaderTask(ImageView imageView) {
imageViewReference = new WeakReference<ImageView>(imageView);
}
#Override
protected Bitmap doInBackground (String... source) {
url = source[0];
Bitmap image;
try{
image = BitmapFactory.decodeStream(new URL(url).openConnection().getInputStream());
return image;
}
catch(Exception e){Log.e("Error", e.getMessage()); e.printStackTrace();}
return null;
}
#Override
protected void onPostExecute(Bitmap bitmap) {
addBitmapToCache(url, bitmap);
imageViewReference.get().setImageBitmap(bitmap);
}
}
}
Edit 3:
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater vi = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = vi.inflate(R.layout.movie_data_row, null);
}
ParkCinema movie = movieDataItems.get(position);
ImageView imageView = (ImageView) convertView.findViewById(R.id.movie_thumb_icon);
if (movie!=null){
String url = movie.poster();
if (url != null) {
Bitmap bitmap = fetchBitmapFromCache(url);
if (bitmap == null) {
imageView.setImageResource(R.drawable.no_image);
new BitmapDownloaderTask(imageView).execute(url);
}
else {
imageView.setImageBitmap(bitmap);
}
}
else {
imageView.setImageResource(R.drawable.no_image);
}
}
else {
imageView.setImageResource(R.drawable.no_image);
}
return convertView;
}
Aha! I think I may know the issue. Right now, your getView method sets your ImageView like this:
Gets movie object at position
Pulls out the movie's thumbnail url
Using that url, it tries to find the image in the cache
If it finds the image, it sets it
If it can't find the image, it starts an async network request to go get it, and sets it after it gets downloaded.
Your issus arises since ListView reuses its rows' Views. When the first View scrolls off the screen, rather than inflate a new one, ListView passes the now offscreen row's View in as convertView for you to reuse (this is for efficiency).
When your getView gets a convertView that is getting reused, its ImageView has already been set from the row that had it before, so you see the old image from the offscreen row's View. With your current getView process, you check for the new row's image, and it doesn't find it in the cache, it starts a request to download it. While it is downloading, you see the old image until you get the new image.
To fix this, you need to make sure you set every field in the row's View immediately, to make sure you don't have any Views showing stale data. I would suggest you set the ImageView to the default drawable resource (you have set in your R.layout.movie_data_row) while you wait for the network download to get the image.
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater vi = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = vi.inflate(R.layout.movie_data_row, null);
}
ParkCinema movie = movieDataItems.get(position);
ImageView imageView = (ImageView) convertView.findViewById(R.id.movie_thumb_icon);
if (movie != null) {
String url = movie.poster();
if (url != null) {
Bitmap bitmap = fetchBitmapFromCache(url);
if (bitmap == null) {
// Set the movie thumbnail to the default icon while we load
// the real image
imageView.setImageResource(R.drawable.movie_thumb_icon);
new BitmapDownloaderTask(imageView).execute(url);
}
else {
// Set the image to the bitmap we get from the cache
imageView.setImageBitmap(bitmap);
}
}
else {
// Set the movie thumbnail to the default icon, since it doesn't
// have a thumbnail URL
imageView.setImageResource(R.drawable.movie_thumb_icon);
}
}
else {
// Set the movie thumbnail to the default icon, since there's no
// movie data for this row
imageView.setImageResource(R.drawable.movie_thumb_icon);
}
-Edit-
Updated to be even more robust, using your drawable. You also have an issue with your BitmapDownloaderTask, it does not handle errors/null. Try adding this as well.
#Override
protected void onPostExecute(Bitmap bitmap) {
addBitmapToCache(url, bitmap);
if (bitmap == null) {
// Set the movie thumbnail to the default icon, since an error occurred while downloading
imageViewReference.get().setImageResource(R.drawable.movie_thumb_icon);
}
else {
imageViewReference.get().setImageBitmap(bitmap);
}
}
i had this issue and implemented lruCache ...i believe you need api 12 and above or use the compatiblity v4 library. lurCache is fast memory but it also has a budget, so if your worried about that you can use a diskcache ...its all described here http://developer.android.com/training/displaying-bitmaps/cache-bitmap.html
I'll now provide my implementation which is a singleton i call from anywhere like this:
//where first is a string and other is a imageview to load
DownloadImageTask.getInstance().loadBitmap(avatarURL, iv_avatar);
here's the ideal code to cache and then call the above in getView of an adapter when retrieving the web image:
public class DownloadImageTask {
private LruCache<String, Bitmap> mMemoryCache;
/* create a singleton class to call this from multiple classes */
private static DownloadImageTask instance = null;
public static DownloadImageTask getInstance() {
if (instance == null) {
instance = new DownloadImageTask();
}
return instance;
}
//lock the constructor from public instances
private DownloadImageTask() {
// Get max available VM memory, exceeding this amount will throw an
// OutOfMemory exception. Stored in kilobytes as LruCache takes an
// int in its constructor.
final int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024);
// Use 1/8th of the available memory for this memory cache.
final int cacheSize = maxMemory / 8;
mMemoryCache = new LruCache<String, Bitmap>(cacheSize) {
#Override
protected int sizeOf(String key, Bitmap bitmap) {
// The cache size will be measured in kilobytes rather than
// number of items.
return bitmap.getByteCount() / 1024;
}
};
}
public void loadBitmap(String avatarURL, ImageView imageView) {
final String imageKey = String.valueOf(avatarURL);
final Bitmap bitmap = getBitmapFromMemCache(imageKey);
if (bitmap != null) {
imageView.setImageBitmap(bitmap);
} else {
imageView.setImageResource(R.drawable.ic_launcher);
new DownloadImageTaskViaWeb(imageView).execute(avatarURL);
}
}
private void addBitmapToMemoryCache(String key, Bitmap bitmap) {
if (getBitmapFromMemCache(key) == null) {
mMemoryCache.put(key, bitmap);
}
}
private Bitmap getBitmapFromMemCache(String key) {
return mMemoryCache.get(key);
}
/* a background process that opens a http stream and decodes a web image. */
class DownloadImageTaskViaWeb extends AsyncTask<String, Void, Bitmap> {
ImageView bmImage;
public DownloadImageTaskViaWeb(ImageView bmImage) {
this.bmImage = bmImage;
}
protected Bitmap doInBackground(String... urls) {
String urldisplay = urls[0];
Bitmap mIcon = null;
try {
InputStream in = new java.net.URL(urldisplay).openStream();
mIcon = BitmapFactory.decodeStream(in);
} catch (Exception e) {
Log.e("Error", e.getMessage());
e.printStackTrace();
}
addBitmapToMemoryCache(String.valueOf(urldisplay), mIcon);
return mIcon;
}
/* after decoding we update the view on the mainUI */
protected void onPostExecute(Bitmap result) {
bmImage.setImageBitmap(result);
}
}
}
Views are reused for performance with Adapters. You should use another approch .
You have to have a class holder which reuse your views. In your case you class should be something like this:
public class MoviesAdapter extends ArrayAdapter<ParkCinema> {
private ArrayList<ParkCinema> movieDataItems;
private Activity context;
public MoviesAdapter(Activity context, int textViewResourceId, ArrayList<ParkCinema> movieDataItems) {
super(context, textViewResourceId, movieDataItems);
this.context = context;
this.movieDataItems = movieDataItems;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater vi = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = vi.inflate(R.layout.movie_data_row, null);
holder = new ViewHolder();
holder.imageView = (BarImageView) convertView.findViewById(R.id.movie_thumb_icon);
} else {
holder = (ViewHolder) convertView.getTag();
}
ParkCinema movie = movieDataItems.get(position);
if (movie!=null){
String url = movie.poster();
if (url!=null) {
Bitmap bitmap = fetchBitmapFromCache(url);
if (bitmap==null) {
new BitmapDownloaderTask(imageView).execute(url);
}
else {
imageView.setImageBitmap(bitmap);
}
}
}
return convertView;
}
private LinkedHashMap<String, Bitmap> bitmapCache = new LinkedHashMap<String, Bitmap>();
private void addBitmapToCache(String url, Bitmap bitmap) {
if (bitmap != null) {
synchronized (bitmapCache) {
bitmapCache.put(url, bitmap);
}
}
}
private Bitmap fetchBitmapFromCache(String url) {
synchronized (bitmapCache) {
final Bitmap bitmap = bitmapCache.get(url);
if (bitmap != null) {
return bitmap;
}
}
return null;
public static class ViewHolder {
ImageView imageView;
}
}
I have spent hours trying to figure this one out as well...Thanks to Steven Byle's solution...
Here is my solution to something similar when a user selects an item from a list:
adapter.setSelectedIndex(position);
then in the custom adapter:
public void setSelectedIndex(int ind)
{
selectedIndex = ind;
notifyDataSetChanged();
}
and then finally in the getView method of the adapter:
if(selectedIndex!= -1 && position == selectedIndex)
{
holder.tab.setBackgroundColor(Color.BLACK);
}
else{
holder.tab.setBackgroundColor(Color.DKGRAY);
}
So in conclusion make sure you assign default values
In my case i used Picasso library instead of AsyncTask for downloading image.
enter link description here
Also write if else condition, that is set null to image if url is not available
instead of using the convertview object create a new view each time.
View localView = ((LayoutInflater)parentscreen.getSystemService("layout_inflater")).inflate(R.layout.activity_list_row, null);
By inflating as above.
Related
I have a global bitmap cache using LruCache class. when loading thumbnails for the listview, the cache is used first. It works just OK.
But one issue is: sometimes the Bitmap instance from the cache cannot be displayed on the listview. it seems such bitmap from cache is not valid any more. I have checked the bitmap from cache if it is not null and if it is not recycled, but it still seems such bitmap cannot be displayed (even it is not null and it is not recycled).
The cache class:
public class ImageCache {
private LruCache<String, Bitmap> mMemoryCache;
private static ImageCache instance;
public static ImageCache getInstance() {
if(instance != null) {
return instance;
}
instance = new ImageCache();
instance.initializeCache();
return instance;
}
protected void initializeCache() {
final int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024);
// Use 1/8th of the available memory for this memory cache.
final int cacheSize = maxMemory / 8;
mMemoryCache = new LruCache<String, Bitmap>(cacheSize) {
#Override
protected int sizeOf(String key, Bitmap bitmap) {
// The cache size will be measured in kilobytes rather than
// number of items.
return bitmap.getByteCount() / 1024;
}
};
}
public Bitmap getImage(String url) {
return this.mMemoryCache.get(url);
}
public void cacheImage(String url, Bitmap image) {
this.mMemoryCache.put(url, image);
}
}
and the code to use the cache is in the Adapter class which is subclass of CursorAdapter:
final ImageCache cache = ImageCache.getInstance();
// First get from memory cache
final Bitmap bitmap = cache.getImage(thumbnailUrl);
if (bitmap != null && !bitmap.isRecycled()) {
Log.d(TAG, "The bitmap is valid");
viewHolder.imageView.setImageBitmap(bitmap);
}
else {
Log.d(TAG, "The bitmap is invalid, reload it.");
viewHolder.imageView.setImageResource(R.drawable.thumbnail_small);
// use the AsyncTask to download the image and set in cache
new DownloadImageTask(context, viewHolder.imageView, thumbnailUrl, dir, filepath).execute();
}
the code of DownloadImageTask:
public class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
private ImageView mImageView;
private String url;
private String dir;
private String filename;
private Context context;
public DownloadImageTask(Context context, ImageView imageView, String url, String dir, String filename) {
this.mImageView = imageView;
this.url = url;
this.filename = filename;
this.dir = dir;
this.context = context;
this.cache = cache;
}
protected Bitmap doInBackground(String... urls) {
// String urldisplay = urls[0];
final Bitmap bitmap = FileUtils.readImage(context, dir, filename, url);
return bitmap;
}
protected void onPostExecute(Bitmap result) {
final ImageCache cache = ImageCache.getInstance();
if(result != null) {
cache.put(url, result);
mImageView.setImageBitmap(result);
}
}
}
any help will be appreciated. Thanks!
Updates: I have followed the link suggested by greywolf82: section "Handle Configuration Changes". I put the following attribute in my activity class and the two fragment classes:
public LruCache mMemoryCache;
In the activity class, I try to initialize the cache when calling the fragment:
// Get the cache
mMemoryCache = mIndexFragment.mRetainedCache;
if (mMemoryCache == null) {
final int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024);
// Use 1/8th of the available memory for this memory cache.
final int cacheSize = maxMemory / 8;
// Initialize the cache
mMemoryCache = new LruCache<String, Bitmap>(cacheSize) {
#Override
protected int sizeOf(String key, Bitmap bitmap) {
// The cache size will be measured in kilobytes rather than
// number of items.
return bitmap.getByteCount() / 1024;
}
};
Log.d(TAG, "Initialized the memory cache");
mIndexFragment.mRetainedCache = mMemoryCache;
}
in the fragment class:
setRetainInstance(true);
and I pass the cache instance to the adapter constructor so that the adapter can use the cache.
but I still got the same issue.
Update 2:
the two adapter classes with changes to accept the LruCache instance:
NewsCursorAdapter:
public class NewsCursorAdapter extends CursorAdapter {
private static final String TAG = "NewsCursorAdapter";
private LruCache<String, Bitmap> cache;
private Context mContext;
public NewsCursorAdapter(Context context, LruCache<String, Bitmap> cache) {
super(context, null, false);
this.mContext = context;
this.cache = cache;
}
#Override
public void bindView(View view, Context context, Cursor cursor) {
final Setting setting = ApplicationContext.getSetting();
// Get the view holder
ViewHolder viewHolder = (ViewHolder) view.getTag();
final String thumbnail = cursor.getString(NewsContract.Entry.THUMBNAIL_CURSOR_INDEX);
if(thumbnail != null) {
String pictureDate = cursor.getString(NewsContract.Entry.PIC_DATE_CURSOR_INDEX);
final String dir = "thumbnails/" + pictureDate + "/";
final String filepath = thumbnail + "-small.jpg";
final String thumbnailUrl = setting.getCdnUrl() + dir + filepath;
//final ImageCache cache = ImageCache.getInstance();
// First get from memory cache
final Bitmap bitmap = cache.get(thumbnailUrl);
if (bitmap != null && !bitmap.isRecycled()) {
Log.d(TAG, "The bitmap is valid: " + bitmap.getWidth());
viewHolder.imageView.setImageBitmap(bitmap);
}
else {
Log.d(TAG, "The bitmap is invalid, reload it.");
viewHolder.imageView.setImageResource(R.drawable.thumbnail_small);
new DownloadImageTask(viewHolder.imageView, thumbnailUrl, dir, filepath).execute();
}
}
else {
viewHolder.imageView.setVisibility(View.GONE);
}
}
#Override
public View newView(Context context, Cursor cursor, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.listview_item_row, parent,
false);
// Initialize the view holder
ViewHolder viewHolder = new ViewHolder();
viewHolder.titleView = (TextView) view.findViewById(R.id.title);
viewHolder.timeView = (TextView) view.findViewById(R.id.news_time);
viewHolder.propsView = (TextView) view.findViewById(R.id.properties);
viewHolder.imageView = (ImageView) view.findViewById(R.id.icon);
view.setTag(viewHolder);
return view;
}
static class ViewHolder {
TextView titleView;
TextView timeView;
TextView propsView;
ImageView imageView;
}
private class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
private ImageView mImageView;
private String url;
private String dir;
private String filename;
public DownloadImageTask(ImageView imageView, String url, String dir, String filename) {
this.mImageView = imageView;
this.url = url;
this.filename = filename;
this.dir = dir;
}
protected Bitmap doInBackground(String... urls) {
final Bitmap bitmap = FileUtils.readImage(mContext, dir, filename, url);
return bitmap;
}
protected void onPostExecute(Bitmap result) {
//final ImageCache cache = ImageCache.getInstance();
if(result != null) {
cache.put(url, result);
mImageView.setImageBitmap(result);
}
}
}
}
the list adapter, NewsTopicItemAdapter:
public class NewsTopicItemAdapter extends ArrayAdapter<NewsTopicItem> {
private Context context = null;
private EntryViewHolder viewHolder;
private HeaderViewHolder headerViewHolder;
private LruCache<String, Bitmap> mCache;
public NewsTopicItemAdapter(Context context, List<NewsTopicItem> arrayList, LruCache<String, Bitmap> cache) {
super(context, 0, arrayList);
this.context = context;
this.mCache = cache;
}
public void setItems(List<NewsTopicItem> items) {
this.addAll(items);
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
final NewsTopicItem item = getItem(position);
View view;
if(!item.isHeader()) {
view = this.getEntryView((NewsTopicEntry)item, convertView, parent);
}
else {
view = this.getHeaderView((NewsTopicHeader)item, convertView, parent);
}
return view;
}
protected View getEntryView(NewsTopicEntry newsItem, View convertView, ViewGroup parent) {
View view;
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
viewHolder = new EntryViewHolder();
view = inflater.inflate(R.layout.listview_item_row, parent,
false);
// Initialize the view holder
viewHolder.titleView = (TextView) view.findViewById(R.id.title);
viewHolder.timeView = (TextView) view.findViewById(R.id.news_time);
viewHolder.propsView = (TextView) view.findViewById(R.id.properties);
viewHolder.imageView = (ImageView) view.findViewById(R.id.icon);
view.setTag(viewHolder);
viewHolder.propsView.setText(newsItem.getSource());
if (newsItem.getThumbnail() != null) {
final String dir = "thumbnails/" + newsItem.getPictureDate() + "/";
final String filepath = newsItem.getThumbnail() + "-small.jpg";
final String thumbnailUrl = "http://www.oneplusnews.com/static/" + dir + filepath;
//final ImageCache cache = ImageCache.getInstance();
// First get from memory cache
final Bitmap bitmap = mCache.get(thumbnailUrl);
if (bitmap != null && !bitmap.isRecycled()) {
viewHolder.imageView.setImageBitmap(bitmap);
} else {
viewHolder.imageView.setImageResource(R.drawable.thumbnail_small);
new DownloadImageTask(viewHolder.imageView, thumbnailUrl, dir, filepath).execute();
}
}
else {
viewHolder.imageView.setVisibility(View.GONE);
}
viewHolder.titleView.setText(newsItem.getTitle());
viewHolder.timeView.setText(DateUtils.getDisplayDate(newsItem.getCreated()));
return view;
}
protected View getHeaderView(NewsTopicHeader header, View convertView, ViewGroup parent) {
View view;
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
headerViewHolder = new HeaderViewHolder();
view = inflater.inflate(R.layout.news_list_header, parent,
false);
// Initialize the view holder
headerViewHolder.topicView = (TextView) view.findViewById(R.id.topic);
view.setTag(headerViewHolder);
final View imageView = view.findViewById(R.id.more_icon);
imageView.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// Start the Fragement
}
});
Topic topic = header.getTopic();
if(topic.isKeyword()) {
headerViewHolder.topicView.setText(topic.getName());
}
else {
// This is a hack to avoid error with - in android
headerViewHolder.topicView.setText(ResourceUtils.getStringByName(context, topic.getName()));
}
return view;
}
private class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
private ImageView mImageView;
private String url;
private String dir;
private String filename;
public DownloadImageTask(ImageView imageView, String url, String dir, String filename) {
this.mImageView = imageView;
this.url = url;
this.filename = filename;
this.dir = dir;
}
protected Bitmap doInBackground(String... urls) {
final Bitmap mIcon11 = FileUtils.readImage(context, dir, filename, url);
return mIcon11;
}
protected void onPostExecute(Bitmap result) {
//final ImageCache cache = ImageCache.getInstance();
if(result != null) {
mCache.put(url, result);
mImageView.setImageBitmap(result);
}
}
}
static class EntryViewHolder {
TextView titleView;
TextView timeView;
TextView propsView;
ImageView imageView;
TextView topicView;
}
static class HeaderViewHolder {
TextView topicView;
}
}
Update 3: I have attached the debug information from eclipse: the 1st picture is the working bitmap, and the 2nd one is the non-working bitmap from cache. I didn't find anything suspicious.
The debug information of the working bitmap from the cache:
The debug information of the non-working bitmap from the cache:
Finally I figured out the problem. It is becuase of the adapter. in the adapter I have set some ImageView as invisible if no thumbnail is needed. when the user scrolls the list view, such ImageView instance will be reused, but the visibility is not updated.
so the cache itself is OK now. The solution is to check the visibility of the ImageView and update it if needed.
Anyway thanks a lot to greywolf82 for your time and the tip about the singleton pattern.
The singleton pattern is the evil :) Please avoid it completely and use a fragment with setReteainInstance(true) as explained here
I am getting a big response from the server with data and image url. I need to display them on the List View. Images should be like thumbnails. To make it proper i have customized my Adapter and getting the images using Async Task. Here is my Adapter and Asynctask Code:
public class TalkofTownAdapter extends BaseAdapter{
private LayoutInflater inflater = null;
private Context context = null;
ImageView thumb_image = null;
private ProgressDialog progressbar = null;
ArrayList<String> items;
ArrayList<String> thumb_url;
public TalkofTownAdapter(Context c, ArrayList<String> list, ArrayList<String> thumb)
{
this.context = c;
this.items = list;
this.thumb_url = thumb;
progressbar = new ProgressDialog(c);
Log.d("Testing", "talk of town adapter constructor "+items.size());
inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public int getCount() {
// TODO Auto-generated method stub
return items.size();
}
#Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return position;
}
#Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = inflater.inflate(R.layout.talkoftown, null);
Log.d("Testing", "before creating holder object");
holder = new ViewHolder();
holder.headlineView = (TextView) convertView.findViewById(R.id.list_title);
holder.duration = (TextView)convertView.findViewById(R.id.duration);
holder.imageView = (ImageView) convertView.findViewById(R.id.list_image_playlist);
Log.d("Testing", "image view created :::::::: ");
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
Log.d("Testing", "text::: "+items.get(position));
holder.headlineView.setText(items.get(position));
Log.d("Testing", "settting the text ");
holder.duration.setText("22/09/1987");
if (holder.imageView != null) {
Log.d("Testing", "getting the image "+thumb_url.get(position));
new ImageDownloaderTask(holder.imageView).execute(thumb_url.get(position));
}
return convertView;
}
static class ViewHolder {
TextView headlineView;
TextView duration;
ImageView imageView;
}
public static Bitmap getBitmapFromURL(String src) {
try {
URL url = new URL(src);
HttpURLConnection connection = (HttpURLConnection) url.openConnection();
connection.setDoInput(true);
connection.connect();
InputStream input = connection.getInputStream();
Bitmap myBitmap = BitmapFactory.decodeStream(input);
Log.d("Testing", "image loaded "+myBitmap);
// myBitmap = Bitmap.createBitmap(100, 50, Config.ARGB_8888);
myBitmap = Bitmap.createScaledBitmap(myBitmap,(int)(myBitmap.getWidth()), (int)(myBitmap.getHeight()), true);
return myBitmap;
} catch (IOException e) {
Log.d("Testing", "exception is getting the image "+e.toString());
e.printStackTrace();
return null;
}
}
public void startProgress()
{
progressbar.setMessage("Please wait");
progressbar.show();
}
public void stopProgress()
{
progressbar.dismiss();
}
class ImageDownloaderTask extends AsyncTask<String, Void, Bitmap> {
private final WeakReference<ImageView> imageViewReference;
public ImageDownloaderTask(ImageView imageView) {
imageViewReference = new WeakReference<ImageView>(imageView);
}
#Override
// Actual download method, run in the task thread
protected Bitmap doInBackground(String... params) {
// params comes from the execute() call: params[0] is the url.
return getBitmapFromURL(params[0]);
}
#Override
// Once the image is downloaded, associates it to the imageView
protected void onPostExecute(Bitmap bitmap) {
if (isCancelled()) {
bitmap = null;
}
if (imageViewReference != null) {
ImageView imageView = imageViewReference.get();
if (imageView != null) {
if (bitmap != null) {
imageView.setImageBitmap(bitmap);
} else {
imageView.setImageDrawable(imageView.getContext().getResources()
.getDrawable(R.drawable.rihanna));
}
}
}
}
}
Now the thumbnails are showing with the default image and then changing with downloaded images. But if i am scrolling down the list view, images are keep on changing and coming duplicates of those that appeared in the rows above that were already scrolled up. So i mean to say here, the images are coming on proper order for the corresponding rows. I know there are lots of tutorials and QA here also. But i have tried lots of solutions and it did not work properly.
Can any one help me on this?
The problem is with you if condition. Just remove the if condition if (holder.imageView != null) { the problem is each and everytime getView will check for your view is null or not and based on that it will execute and inflate the image.
Change your if condition like
if(thumb_url.get(position) !=null)
{
Log.d("Testing", "getting the image "+thumb_url.get(position));
new ImageDownloaderTask(holder.imageView).execute(thumb_url.get(position));
}
I'm trying to build a list with an image that is taken from the device and a text. It turns out that taking images from the phone that was from the phone's camera is a task that takes a while so I'm trying to make it as fast as possible so the user experience won't get slower. All I got from this is that it looks like all the images are loaded in one ImageView and than the images spread to all the other ImageViews (I'm not completely sure that my implementation of the ViewHolder technique and Custom CursorAdapter is correct).
public class MyCustomCurserAdapter extends CursorAdapter {
static class ViewHolder {
public TextView nameText;
public ImageView imageThumbnail;
}
Cursor cursor;
public MyCustomCurserAdapter(Context context, Cursor c, int flags) {
super(context, c, flags);
// TODO Auto-generated constructor stub
}
#Override
public void bindView(View view, Context arg1, Cursor cursor) {
ViewHolder holder = (ViewHolder)view.getTag();
int pathCol = cursor.getColumnIndex(NewPicSQLiteHelper.COLUMN_PATH);
String imageInSD = cursor.getString(pathCol);
File imgFile = new File(imageInSD);
if(imgFile.exists()){
int nameCol = cursor.getColumnIndex(NewPicSQLiteHelper.COLUMN_PIC_NAME);
String name = cursor.getString(nameCol);
if (name != null)
holder.nameText.setText(name);
ImageTask task = new ImageTask(holder.imageThumbnail);
task.execute(imgFile);
}
}
#Override
public View newView(Context arg0, Cursor cur, ViewGroup parent) {
LayoutInflater inflater = LayoutInflater.from(parent.getContext());
View view = inflater.inflate(R.layout.new_pic_item, parent, false);
ViewHolder holder = new ViewHolder();
holder = new ViewHolder();
holder.nameText = (TextView) view.findViewById(R.id.pic_name_entry);
holder.imageThumbnail = (ImageView) view.findViewById(R.id.pic_thumbnail);
// The tag can be any Object, this just happens to be the ViewHolder
view.setTag(holder);
return view;
}
private class ImageTask extends AsyncTask<File, Void, Bitmap>{
private final WeakReference <ImageView> imageViewReference;
public ImageTask(ImageView imageView) {
imageViewReference = new WeakReference <ImageView> (imageView);
}
#Override
protected Bitmap doInBackground(File... params) {
String path = params[0].getAbsolutePath();
return decodeSampledBitmapFromResource(path,75,75);
}
#Override
protected void onPostExecute(Bitmap result) {
if (imageViewReference != null) {
ImageView imageView = imageViewReference.get();
if (imageView != null) {
if (result != null) {
imageView.setImageBitmap(result);
imageView.setVisibility(ImageView.VISIBLE);
} else {
imageView.setVisibility(ImageView.INVISIBLE);
}
}
}
}
private Bitmap decodeSampledBitmapFromResource(String orgImagePath, int reqWidth, int reqHeight) {
}
private int calculateInSampleSize(BitmapFactory.Options options, int reqWidth, int reqHeight) {
}
}
I think probable reason thats its taking time is because the images would be of at least 1 mb size further you can change to thumbnail and retrieve it and also if still taking time you could put lazy downloading which is done when we take image from the server(Basically what it does is it loads the text and shows image when we get the image)
Remove ImageTask AsyncTask ..
Use a Libraries like Glide or Picasso . Very effective for almost any case where you need to fetch, resize, and display a remote image.
I used a glide for loading images from phone storage uri
Use any of the above and see the difference
I have an adapter with this getView:
public View getView(int position, View convertView, ViewGroup parent) {
Log.d("getView gv", position+"");
NewsLine holder = null;
if (convertView == null) {
LayoutInflater inflater = ((Activity) context).getLayoutInflater();
convertView = inflater.inflate(R.layout.grid_entry, parent, false);
holder = new NewsLine();
holder.iv= (ImageView) convertView.findViewById(R.id.photo);
convertView.setTag(holder);
} else {
holder = (NewsLine) convertView.getTag();
}
NewsItem item=news.ITEMS.get(position);
//---------
if(item.imgurl!=null && item.imgurl.compareToIgnoreCase("null")!=0)
{
holder.iv.setVisibility(View.VISIBLE);
mMemoryCache.loadBitmap(item.imgurl, holder.iv,position);
}
else
holder.iv.setVisibility(View.INVISIBLE);
//-------------
return convertView;
}
I have two problems:
the getView is called several times for position 0 (the bitmap is downloaded with an AsyncTask if its missed in a LruCache). I have an animation (alpha from 0-1) that restarts several times for that position.
because I'm recycling the view sometimes you can see the old imageView content for a fraction of a second.
//----
And here is the cache class (only heap):
public class SetImgAT extends LruCache<String, Bitmap> {
private static SetImgAT instance;
private Animation FadeInAnimation;
private SetImgAT(int size, Context context) {
super(size);
FadeInAnimation = AnimationUtils.loadAnimation(context, R.anim.fadein);
}
public static synchronized SetImgAT getInstance(int size, Context context) {
if (instance == null) {
instance = new SetImgAT(size, context);
}
return instance;
}
#Override
protected int sizeOf(String key, Bitmap value) {
return (value.getRowBytes() * value.getHeight());
}
public void loadBitmap(String url, ImageView imageView,int pos) {
Bitmap bitmap = instance.get(url.hashCode() + "");
if (bitmap != null) {
Log.d("ImageCache", "hit - "+url.hashCode()+"pos:"+pos);
imageView.setImageBitmap(bitmap);
imageView.invalidate();
} else {
Log.d("ImageCache", "miss");
BitmapWorkerTask task = new BitmapWorkerTask(imageView);
task.execute(url);
}
}
class BitmapWorkerTask extends AsyncTask<String, Void, Bitmap> {
ImageView mImageView;
public BitmapWorkerTask(ImageView imageView) {
mImageView = imageView;
}
#Override
protected Bitmap doInBackground(String... url) {
Bitmap Picture = null;
if (url[0] != null && url[0].compareToIgnoreCase("null") != 0) {
Log.d("GetBMP from", url[0]);
URL img_value = null;
try {
img_value = new URL(url[0]);
} catch (MalformedURLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
try {
Picture = BitmapFactory.decodeStream(img_value
.openConnection().getInputStream());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
if (Picture == null) {
Log.d("deb", "no bitmap");
} else {
Log.d("got deb", "got bitmap to "+url[0].hashCode());
instance.put(url[0].hashCode()+"", Picture);
}
}
return Picture;
}
#Override
protected void onPostExecute(Bitmap result) {
// super.onPostExecute(result);
if (result != null) {
Log.d("deb", "set bitmap");
mImageView.setImageBitmap(result);
//mImageView.startAnimation(FadeInAnimation);
}
}
}
//----------------
}
Thank you! :)
I've seen similar behavior when scrolling back and forth or haphazardly calling notifyDataSetChanged().
As an enhancement to what you are doing now I would suggest using Picasso instead since it handles this case very well, in addition to the fade in animation.
A one liner in your getView():
Picasso.with(context).load(urlToLoad).into(imageView);
See:
http://square.github.io/picasso/
I have one ListView which can hold an image. It depends if image exists or not in SDCARD.
Here my example code:
public class MainActivity extends Activity {
ListView mListView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mListView = new ListView(this);
setContentView(mListView);
String[] arr = new String[] {
"/example/images/1.jpg", "/example/images/2.jpg",
"/example/images/3.jpg", "/example/images/4.jpg",
"/example/images/5.jpg", "/example/images/6.jpg",
"/example/images/7.jpg", "/example/images/8.jpg",
"/example/images/9.jpg", "/example/images/1.jpg",
"/example/images/2.jpg", "/example/images/3.jpg",
"/example/images/4.jpg", "/example/images/5.jpg",
"/example/images/6.jpg", "/example/images/7.jpg",
"/example/images/8.jpg", "/example/images/9.jpg",
"/example/images/1.jpg", "/example/images/2.jpg",
"/example/images/3.jpg", "/example/images/4.jpg",
"/example/images/5.jpg", "/example/images/6.jpg",
"/example/images/7.jpg", "/example/images/8.jpg",
"/example/images/9.jpg", "/example/images/1.jpg",
"/example/images/2.jpg", "/example/images/3.jpg",
"/example/images/4.jpg", "/example/images/5.jpg",
"/example/images/6.jpg", "/example/images/7.jpg",
"/example/images/8.jpg", "/example/images/9.jpg"};
List<String> list = Arrays.asList(arr);
MyAdapter adapter = new MyAdapter(this, R.layout.listitem_imv, list);
mListView.setAdapter(adapter);
}
class MyAdapter extends ArrayAdapter<String>{
List<String> mList;
LayoutInflater mInflater;
int mResource;
public MyAdapter(Context context, int resource,
List<String> objects) {
super(context, resource, objects);
mResource = resource;
mInflater = getLayoutInflater();
mList = objects;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View view;
if(convertView == null){
view = mInflater.inflate(mResource, null);
}else{
view = convertView;
}
ImageView imageView = (ImageView) view.findViewById(R.id.imv);
TextView textView = (TextView) view.findViewById(R.id.txv);
imageView.setTag(mList.get(position));//tag of imageView == path to image
new LoadImage().execute(imageView);
textView.setText(mList.get(position).toString());
return view;
}
}
class LoadImage extends AsyncTask<Object, Void, Bitmap>{
private ImageView imv;
private String path;
#Override
protected Bitmap doInBackground(Object... params) {
imv = (ImageView) params[0];
path = imv.getTag().toString();
Bitmap bitmap = null;
File file = new File(
Environment.getExternalStorageDirectory().getAbsolutePath() + path);
if(file.exists()){
bitmap = BitmapFactory.decodeFile(file.getAbsolutePath());
}
return bitmap;
}
#Override
protected void onPostExecute(Bitmap result) {
if(result != null && imv != null){
imv.setVisibility(View.VISIBLE);
imv.setImageBitmap(result);
}else{
imv.setVisibility(View.GONE);
}
}
}
}
The 'sdcard/example/images' directory has the images: 1.jpg, 2.jpg, 3.jpg, 4.jpg, 6.jpg, 7.jpg and 9.jpg.
the expected result is:
But, if I scroll the list quickly, some images are inserted in the wrong items.
It happens due to use of convertView in getView() method.
If I use the following code, the code works fine:
//if(convertView == null){
// view = mInflater.inflate(mResource, null);
//}else{
// view = convertView;
//}
view = mInflater.inflate(mResource, null);
When list scrolled quickly, two asyncTasks can reference one same View, due to use of convertView.
How Can I cancel AsyncTask when the View is no longer visible?(and is useb by another item of ListView)
edit
#Override
protected void onPostExecute(Bitmap result) {
if(result != null && imv != null){
if(imv.getTag().equals(path)){
imv.setVisibility(View.VISIBLE);
imv.setImageBitmap(result);
}else{
imv.setVisibility(View.GONE);
}
}else{
imv.setVisibility(View.GONE);
}
}
You can send in the ImageView to the task constructor and keep a reference to the image path there. Now at onPostExecute, check if the current tag of the ImageView is the same as the one that you started with. If yes, then set the image. If no, don't do anything.
However, this means that the image will be downloaded in any case. You'll just not set the wrong image on the view.
EDIT:
First pass the ImageView to the task constructor:
new LoadImage(imageView).execute()
Then save a reference to the ImageView and image path in LoadImage constructor. It is important to save the path in the constructor and not in doInBackground to ensure that we don't run into multi threading problems. Then at onPostExecute we check the current path.
class LoadImage extends AsyncTask<Object, Void, Bitmap>{
private ImageView imv;
private String path;
public LoadImage(ImageView imv) {
this.imv = imv;
this.path = imv.getTag().toString();
}
#Override
protected Bitmap doInBackground(Object... params) {
Bitmap bitmap = null;
File file = new File(
Environment.getExternalStorageDirectory().getAbsolutePath() + path);
if(file.exists()){
bitmap = BitmapFactory.decodeFile(file.getAbsolutePath());
}
return bitmap;
}
#Override
protected void onPostExecute(Bitmap result) {
if (!imv.getTag().toString().equals(path)) {
/* The path is not same. This means that this
image view is handled by some other async task.
We don't do anything and return. */
return;
}
if(result != null && imv != null){
imv.setVisibility(View.VISIBLE);
imv.setImageBitmap(result);
}else{
imv.setVisibility(View.GONE);
}
}
}
This Android Developers Blog post will give you a complete reference project for this complete with caching. Just replace the Http access code with SD card file reads.
I hope this helps.
After lot of search I have this working solution.
public class CustomAdapter extends ArrayAdapter<String>{
/*
public CustomAdapter(Context context , String[] video) {
super(context,R.layout.custom_row, video);
}
*/
private final Activity context;
private final String[] video;
static class ViewHolder {
public TextView videoTitle;
public ImageView videoThumbnail;
public int position;
public String path;
}
public CustomAdapter(Activity context, String[] video) {
super(context, R.layout.custom_row, video);
this.context = context;
this.video = video;
}
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
LayoutInflater videoInflator = LayoutInflater.from(getContext());
View customView = videoInflator.inflate(R.layout.custom_row, parent, false);
ViewHolder viewHolder = new ViewHolder();
viewHolder.position = position;
viewHolder.path = video[position];
viewHolder.videoTitle = (TextView) customView.findViewById(R.id.videoTitle);
viewHolder.videoThumbnail = (ImageView) customView.findViewById(R.id.videoThumbnail);
//rowView.setTag(viewHolder);
//}
customView.setTag(viewHolder);
final String videoItem = video[position];
int index=videoItem.lastIndexOf('/');
String lastString=(videoItem.substring(index +1));
index = lastString.indexOf(".mp4");
lastString=(lastString.substring(0,index));
viewHolder.videoTitle.setText(lastString);
new AsyncTask<ViewHolder, Void, Bitmap>() {
private ViewHolder v;
#Override
protected Bitmap doInBackground(ViewHolder... params) {
v = params[0];
Bitmap thumb = ThumbnailUtils.createVideoThumbnail(videoItem, MediaStore.Images.Thumbnails.MINI_KIND);
return thumb;
}
#Override
protected void onPostExecute(Bitmap result) {
super.onPostExecute(result);
if (v.position == position) {
// If this item hasn't been recycled already, hide the
// progress and set and show the image
v.videoThumbnail.setImageBitmap(result);
}
}
}.execute(viewHolder);
return customView;
}
}
Maybe you should try:
view = mInflater.inflate(mResource,parent,null);
Check this blog it explains the similar issue:
http://www.doubleencore.com/2013/05/layout-inflation-as-intended/
What I would do (unless you have thousands of images):
1. create a data structure - a simple class holding a String name to be displayed and a bitmap
2. create an adapter for it
3. in the getView method assign the correct bitmap to the correct ImageView.
In your case though you can create a similar data structure but holding not a bitmap but an AsyncTask. Anyway you need to bind the asynctask to the string into one item. An array (or arraylist) of such items will be fed to your adapter. Displayed will be an imageview and a textview.
AsyncTask can be cancelled with cancel().
Hey I found the solution to this problem just use following function instead of your function
#Override
protected void onPostExecute(Bitmap result) {
if (!imv.getTag().toString().equals(rec_id)) {
return;
}
if(result != null && imv != null){
int index = id.indexOf(imv.getTag().toString());
if(list.getFirstVisiblePosition()<=index && index<=list.getLastVisiblePosition())
{
imv.setVisibility(View.VISIBLE);
imv.setImageBitmap(result);
}
}else{
imv.setImageBitmap(icon);
imv.setVisibility(View.GONE);
}
}
Here list is the object of listview. Just pass your list view object to your adapter and paste this function instead of your onPostExecute function.