ListView Loading Images with AsyncTask - android

I have been reading through a lot of answers of questions that are similar to mine, but still having problem fixing my issue. I have a project that is an RSS Reader that loads in images in the background with an AsyncTask class. The program works, except if the user scrolls quickly then the images sometimes do not load in my rows. They never load in the incorrect spot, it just seems like they are skipped if the user scrolls quickly. Also, on start-up, only 2 or 1 of the images in my listview load out of the 4 rows that the user can see.
I know the problem has something to do with the WeakReference object that I use, but I am not sure how to implement it in a better way...
This is my RssListAdapter, which contains my Async class as well.
public class RssListAdapter extends ArrayAdapter<JSONObject>
{
TextView textView;
ImageView imageView;
JSONObject jsonImageText;
ProgressDialog progressDialog;
Activity activity2;
View rowView;
public RssListAdapter(Activity activity, List<JSONObject> imageAndTexts)
{
super(activity, 0, imageAndTexts);
activity2 = activity;
}
#Override
public View getView(int position, View convertView, ViewGroup parent)
{
Activity activity = (Activity) getContext();
LayoutInflater inflater = activity.getLayoutInflater();
// Inflate the views from XML
View rowView = (View) inflater
.inflate(R.layout.image_text_layout, null);
jsonImageText = getItem(position);
// ////////////////////////////////////////////////////////////////////////////////////////////////////
// The next section we update at runtime the text - as provided by the
// JSON from our REST call
// //////////////////////////////////////////////////////////////////////////////////////////////////
textView = (TextView) rowView.findViewById(R.id.job_text);
imageView = (ImageView) rowView.findViewById(R.id.feed_image);
BitmapDownloaderTask task = new BitmapDownloaderTask();
Spanned text;
try
{
text = (Spanned) jsonImageText.get("text");
textView.setText(text);
}
catch (JSONException e)
{
// TODO Auto-generated catch block
e.printStackTrace();
}
task.execute();
return rowView;
}
public class BitmapDownloaderTask extends AsyncTask<String, Void, Bitmap>
{
private String url;
private RssListAdapter adapter;
private WeakReference<ImageView> imageViewReference = null;
#Override
// Actual download method, run in the task thread
protected Bitmap doInBackground(String... params)
{
imageViewReference = new WeakReference<ImageView>(imageView);
Bitmap img = null;
try
{
if (jsonImageText.get("imageLink") != null)
{
System.out.println("XXXX Link found!");
String url = (String) jsonImageText.get("imageLink");
URL feedImage = new URL(url);
HttpURLConnection conn = (HttpURLConnection) feedImage
.openConnection();
InputStream is = conn.getInputStream();
img = BitmapFactory.decodeStream(is);
}
}
catch (MalformedURLException e)
{
// handle exception here - in case of invalid URL being parsed
// from the RSS feed item
}
catch (IOException e)
{
// handle exception here - maybe no access to web
}
catch (JSONException e)
{
// textView.setText("JSON Exception");
}
return img;
}
#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)
{
imageView.setImageBitmap(bitmap);
}
}
}
#Override
// Before images are loaded
protected void onPreExecute()
{
if (imageViewReference == null)
{
imageView.setImageResource(R.drawable.stub);
}
}
}
}

You should check the official Android "Displaying Bitmaps Efficiently" tutorial on how to load and display bitmaps efficiently. It comes with a ready to use piece of code.

Related

android Lazy image load of ListView not working properly

I am tying to lazy load images into my ListView, the images are loading fine, but I've a problem. While loading the images get interchanged.
Let's say that the ListView has 10 rows. It loads the images for 1st row, it displays it in the 1st row, then it loads the image for the 2nd row. It displays in the 2nd row for a moment and then it displays the image for the 2nd row in the 1st row. Then the ImageView in row1 switches between images of 1st row and 2nd. Similarly while loading images of next rows. the previous row's images get switched between. And then after loading all the images, everything gets displayed correctly.
Here's my code
Adapater class:
public class FamilyMemberListAdapter extends ArrayAdapter<Map<String, String>> {
List<Map<String, String>> familyMemberList = new ArrayList<Map<String, String>>();
private Activity activity;
public FamilyMemberListAdapter(Activity activity,
List<Map<String, String>> familyMemberList) {
super(activity, R.layout.activity_gch_family_members, familyMemberList);
this.activity = activity;
this.familyMemberList = familyMemberList;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = LayoutInflater.from(this.getContext()).inflate(
R.layout.activity_gch_family_member_item, parent, false);
holder = new ViewHolder();
holder.lblFamilyMemberName = (TextView) convertView
.findViewById(R.id.lblFamilyMemberItem);
holder.lblFamilyMemberRelation = (TextView) convertView
.findViewById(R.id.lblFamilyMemberRelationItem);
holder.imgProfilePic = (ImageView) convertView
.findViewById(R.id.imgvProfilePic);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
int accountId = Integer.valueOf(familyMemberList.get(position).get(
"accountId"));
holder.lblFamilyMemberName.setText("Name: "
+ familyMemberList.get(position).get("name"));
holder.lblFamilyMemberRelation.setText("Relation: "
+ familyMemberList.get(position).get("relation"));
if (holder.imgProfilePic != null) {
new ImageDownloaderTask(holder.imgProfilePic).execute(String
.valueOf(accountId));
}
return convertView;
}
#Override
public int getCount() {
return familyMemberList.size();
}
static class ViewHolder {
TextView lblFamilyMemberName;
TextView lblFamilyMemberRelation;
ImageView imgProfilePic;
}
}
Imageloader AsyncTask:
public class ImageDownloaderTask extends AsyncTask<String, Void, Bitmap> {
private final WeakReference<ImageView> imageViewReference;
public ImageDownloaderTask(ImageView imageView) {
imageViewReference = new WeakReference<ImageView>(imageView);
}
#Override
protected Bitmap doInBackground(String... params) {
String responseText = null;
HttpClient httpClient = ServiceHelper.getHttpClient();
HttpContext localContext = new BasicHttpContext();
HttpGet httpGet = new HttpGet(RestApiPaths.GET_PROFILE_PIC + accountId);
try {
HttpResponse response = httpClient.execute(httpGet);
int statusCode = response.getStatusLine().getStatusCode();
final HttpEntity entity = response.getEntity();
if (entity != null) {
InputStream inputStream = null;
try {
// getting contents from the stream
inputStream = entity.getContent();
// decoding stream data back into image Bitmap that android understands
final Bitmap bitmap = BitmapFactory.decodeStream(inputStream);
return bitmap;
} finally {
if (inputStream != null) {
inputStream.close();
}
entity.consumeContent();
}
}
Log.d(TAG, responseText);
} catch (ClientProtocolException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
#Override
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 {
Drawable placeholder = imageView.getContext().getResources().getDrawable(R.drawable.holder_pic_side);
imageView.setImageDrawable(placeholder);
}
}
}
}
}
I've created a Static class for the ListView items. Still Why is the images go on interchanging while loading. Please tell me what I'm doing wrong here.
Add holder.imgProfilePic.setTag(accountId); before you call the AsyncTask. Add an extra parameter accountId to your task. Then in onPostExecute check if it is the same accountId as in the image view
Maybe try to use libraries like picasso or universal image loader or something.
They have solved most of problems with image loading

Picasso out of memory error - Android Image Loading in ListView with custom adapter

So now I included picasso and sonce then I regularly get out of memory errors every time I want to do anything. could this be because of picasso caching the images? I have absolutely no idea why this is happening and how to solve... any experiences with that?
EDIT: Solution was pretty simple. had to change my custom adapters as suggested by picasso to receive images url and load it directly into the imageview instead of using the detour of saving as bitmap. overlooked the hint, don't know why.
Here's the adapter:
public class ImageTextListViewAdapter extends ArrayAdapter<RowItem> {
Context context;
public ImageTextListViewAdapter(Context context, int resourceId,
List<RowItem> items) {
super(context, resourceId, items);
this.context = context;
}
/*private view holder class*/
private class ViewHolder {
ImageView imageView;
TextView txt;
TextView id;
}
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
RowItem rowItem = getItem(position);
LayoutInflater mInflater = (LayoutInflater) context
.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
convertView = mInflater.inflate(R.layout.list_item_friends, null);
holder = new ViewHolder();
holder.id = (TextView) convertView.findViewById(R.id.text_view_id_friends);
holder.txt = (TextView) convertView.findViewById(R.id.list_item_friends_textview);
holder.imageView = (ImageView) convertView.findViewById(R.id.friends_image);
convertView.setTag(holder);
} else
holder = (ViewHolder) convertView.getTag();
holder.txt.setText(rowItem.getText());
String url = getItem(position).getUrl();
Picasso.with(context).load(url).into(holder.imageView);
holder.id.setText(rowItem.getId());
return convertView;
}
}
I have a listview where I load the name from every user from json (via asynctask) in a ListView.
Additionally the user image has to be loaded from server, too. this happens via a second ajax request. as I get the json with the url for the saved image to get the image then from server, for each image a request is fired via asynctask. this makes the load of the listview last very long so other activities stay in queue until this task is finished.
I found out how to save images in memory cache. but that does not solve the problem as the images are only saved when I put the app in background.
the listview contains a custom adapter called RowItem which contains an imageview and two listviews.
any suggestions? I am working on this for about 1 day and a half now...
thank you!
heres my Async task for loading the images.
public class ImageLoadTask extends AsyncTask<Void, Void, Bitmap> {
private final String LOG_TAG = ImageLoadTask.class.getSimpleName();
String url, userId;
String[] items;
BufferedReader reader = null;
public ImageLoadTask(String url, String userId, String[] items) {
this.url = url;
this.userId = userId;
this.items = items;
}
private String getImageUrlFromJson(String imageJson) throws JSONException {
JSONObject imageJsonOutput = new JSONObject(imageJson);
imageJsonUrl = imageJsonOutput.getString("imageUrl");
Log.v(LOG_TAG, imageJsonUrl);
return imageJsonUrl;
}
#Override
protected Bitmap doInBackground(Void... params) {
String imageJson = null;
try {
URL urlConnection = new URL(url + userId);
HttpURLConnection connection = (HttpURLConnection) urlConnection
.openConnection();
connection.setDoInput(true);
connection.connect();
InputStream input = connection.getInputStream();
StringBuffer buffer = new StringBuffer();
if (input == null) {
// Nothing to do.
//jsonStr = null;
return null;
}
reader = new BufferedReader(new InputStreamReader(input));
String line;
while ((line = reader.readLine()) != null) {
// Since it's JSON, adding a newline isn't necessary (it won't affect parsing)
// But it does make debugging a *lot* easier if you print out the completed
// buffer for debugging.
buffer.append(line + "\n");
}
if (buffer.length() == 0) {
return null;
}
imageJson = buffer.toString();
} catch (Exception e) {
e.printStackTrace();
}
try {
String imageUrl = getImageUrlFromJson(imageJson);
URL url = new URL(imageUrl);
bmp = BitmapFactory.decodeStream(url.openConnection().getInputStream());
addBitmapToMemoryCache(userId, bmp);
return bmp;
}
catch(Exception e) {
e.printStackTrace();
}
return null;
}
#Override
protected void onPostExecute(Bitmap result) {
super.onPostExecute(result);
bmp = result;
item = new RowItem(bmp, item[0], item[1], item[2]);
mDiscoverAdapter.add(item);
}
}
You are trying to reinvent the wheel by not using an existing image loading library. Have a look at some of the top libraries:
Glide
Picasso
Fresco
If you are still determined to build it yourself. You will need to create a caching system to save/load from memory/disk as needed. Also be careful about leaking views as this can get very tricky with image loading (esp a list or grid) with orientation change.
The official android documentation has a great tutorial on Loading/Caching Images. Go through that and have a look at the sample app that they provide to help you get started.

Downloading images in the background issue displaying

what I am currently doing is allowing users to look up tracks, it will display the song name and display the artist and then start downloading the images in the background so that the user sees the results quickly. What I currently do is take the first 10 queries and dislpay those and download those images, then when the user clicks show more it will download 10 more and so on, but the only image that actually displays once it is done loading is the first one. The rest of the images download, but the imageviews do not populate unless i scroll away from them and then back over them. I can't figure out why, but here is my code.
My code for the custom list adapter:
public class SearchSongAdapter extends BaseAdapter {
ArrayList<ArrayList<String>> track_info;
private static LayoutInflater inflater=null;
String token;
ArrayList<ImageView> imageViews;
ArrayList<Bitmap> imageBitMaps;
DownloadImageTask downloadImageTask;
int downloadsCounter = 0;
public SearchSongAdapter(Context context, ArrayList<ArrayList<String>> track_info, String token)
{
imageViews = new ArrayList<ImageView>();
imageBitMaps = new ArrayList<Bitmap>();
inflater = (LayoutInflater)context.
getSystemService(Context.LAYOUT_INFLATER_SERVICE);
this.track_info = track_info;
this.token = token;
//start the downloads
if(track_info.size() > 0) {
downloadImageTask = new DownloadImageTask();
downloadImageTask.execute("https://api.spotify.com/v1/tracks/" + track_info.get(0).get(1).replace("spotify:track:", ""), String.valueOf(downloadsCounter));
}
}
#Override
public int getCount() {
return this.track_info.size();
}
#Override
public Object getItem(int position) {
return track_info.get(position);
}
#Override
public long getItemId(int position) {
return position;
}
public class Holder
{
TextView songNameTextView, artistNameTextView;
ImageView trackIconImageView;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View rowView;
Holder holder = new Holder();
rowView = inflater.inflate(R.layout.song_list_items, null);
holder.songNameTextView = (TextView) rowView.findViewById(R.id.songName);
holder.artistNameTextView = (TextView) rowView.findViewById(R.id.artistNameTextView);
holder.trackIconImageView = (ImageView) rowView.findViewById(R.id.trackIconImageView);
holder.songNameTextView.setText(track_info.get(position).get(0));
holder.artistNameTextView.setText(track_info.get(position).get(2));
imageViews.add(position, holder.trackIconImageView);
if(position < imageBitMaps.size()) {
holder.trackIconImageView.setImageBitmap(imageBitMaps.get(position));
}
return rowView;
}
private class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
int position;
#Override
protected void onPreExecute() {
super.onPreExecute();
}
protected Bitmap doInBackground(String... urls) {
HttpResponse response = null;
HttpClient httpClient = new DefaultHttpClient();
String albumpicture;
Bitmap mIcon11 = null;
position = Integer.valueOf(urls[1]);
HttpGet httpPost = new HttpGet(urls[0]);
List<NameValuePair> params = new ArrayList<NameValuePair>();
params.add(new BasicNameValuePair("Accept", "application/json"));
params.add(new BasicNameValuePair("Authorization Bearer ", token));
try {
response = httpClient.execute(httpPost);
// writing response to log
} catch (IOException e) {
e.printStackTrace();
}
try {
try {
JSONObject jsonObject = new JSONObject(EntityUtils.toString(response.getEntity()));
albumpicture = jsonObject.getJSONObject("album").getJSONArray("images").getJSONObject(0).getString("url");
InputStream in = new java.net.URL(albumpicture).openStream();
mIcon11 = BitmapFactory.decodeStream(in);
mIcon11 = getResizedBitmap(mIcon11, 50, 50);
} catch (JSONException e) {
e.printStackTrace();
}
} catch (IOException e) {
e.printStackTrace();
}
return mIcon11;
}
#Override
protected void onPostExecute(Bitmap bitmap) {
super.onPostExecute(bitmap);
imageViews.get(position).setImageBitmap(bitmap);
imageBitMaps.add(position, bitmap);
if(position < track_info.size() - 1) {
downloadImageTask = new DownloadImageTask();
downloadImageTask.execute("https://api.spotify.com/v1/tracks/" + track_info.get(downloadsCounter).get(1).replace("spotify:track:", ""), String.valueOf(downloadsCounter));
}
downloadsCounter++;
}
}
DownloadImageTask is where I download the image and I first call it in the constructor.
Summary:
The first imageView loads and populates, but the others do not populate unless I scroll away from there (scroll down) and then back up.
#Rockyfish,
you can reduce your hustle about loading the Images and managing the network call all by your self.
your loading image logic can be replaced by one line of code like this.
Picasso.with(getApplicationContext()).load(image_url).into(holder.trackIconImageView);
where,
getApplicationContext() ===> is context which can be replaced with context you you are assigning to the `adapter`
image_url =================> is the url to the imgae,
the process of loading the ImgaeView from a image kept at some url is done by Picasso as you know he is a great painter so let him do the work.
to add the Picasso library adding following code to the dependencies block in the build.gradle file like this
compile 'com.squareup.picasso:picasso:2.5.2'
and you would be able to use picasso
We have awesome open source libraries to handle the image download and caching stuff - Picasso Square.
We should always try to use existing and proven solutions rather than trying to reinvent the wheel.

List View Images change position automatically when I tap?

I am working on an application in which I have a listview, which is getting populated through an ArrayAdapter. All the things are working fine except an issue which has now become quite irritating.
My list view has a custom layout infalted that contains image and then text. The problem is with image part. When I tap on the list after it is populated the images in the list swap there position. Say, for example image associated to 1st cell goes to 3rd and vice versa and so on. It happens only with Images. Text remains at its position. I don't know what the issue is. Please help me out of this severe problem.
Following is my Adapter code:
public class PListAdapter extends ArrayAdapter<Product> {
Context context;
ArrayList<Product> products;
LayoutInflater vi;
ProgressBar mSpinner;
private ImageView imageView;
public void setItems(ArrayList<Product> items) {
this.products = items;
}
public ProductListAdapter(Context context, ArrayList<Product> productList) {
super(context, 0, productList);
// TODO Auto-generated constructor stub
this.context = context;
this.products = productList;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
View v = convertView;
final Product p = products.get(position);
if (p != null) {
if (v == null) {
vi = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(R.layout.sample_singlerow, null);
}
imageView = (ImageView) v.findViewById(R.id.product_image);
TextView title = (TextView) v.findViewById(R.id.product_title);
TextView summary = (TextView) v.findViewById(R.id.product_summary);
TextView price = (TextView) v.findViewById(R.id.product_price);
TextView type = (TextView) v.findViewById(R.id.product_type);
ImageView pImage = (ImageView) v.findViewById(R.id.persons);
if (imageView != null) {
if (p.getImage() == null) {
if (p.getImageURL() != null) {
new AsyncImageLoader(imageView, p.getImageURL());
}
}
}
if (title != null) {
Log.i("Title: ", p.getName());
title.setText(p.getName());
}
if (summary != null) {
Log.i("Summary: ", p.getDescription());
summary.setText(p.getDescription().substring(0, 110) + "...");
}
if (price != null) {
Log.i("Price: ", p.getPrice());
price.setText(p.getPrice());
}
if (type != null) {
Log.i("Type: ", p.getType());
type.setText(p.getType() + " Person");
}
if (pImage != null) {
try {
if (p.getType().equals("1")) {
pImage.setImageResource(R.drawable.one_person);
} else if (p.getType().equals("2")) {
pImage.setImageResource(R.drawable.two_person);
}
} catch (NotFoundException e) {
// TODO Auto-generated catch block
pImage.setImageDrawable(null);
e.printStackTrace();
}
}
}
return v;
}
Edit:
public class AsyncImageLoader {
private final WeakReference imageViewReference;
public AsyncImageLoader(ImageView imageView,String imageUrl) {
imageViewReference = new WeakReference<ImageView>(imageView);
String[] url={imageUrl};
new BitmapDownloaderTask().execute(url);
}
// static int counter = 0;
// int imageNum = 0;
/**
* This Interface in used by {#link AsyncImageLoader} to return a response
* by after loading image
*/
public interface ImageCallback {
public Drawable temp = null;
/**
* Load the Image in imageDrable, Image is loaded form imageUrl
*
* #param imageDrawable
* Image in drawable format
* #param imageUrl
* URL of image to be load
*/
public void imageLoaded(Drawable imageDrawable, String imageUrl);
}
private String LOG_TAG;
class BitmapDownloaderTask extends AsyncTask<String, Void, Bitmap> {
private String url;
#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 downloadBitmap(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 && !(bitmap==null)) {
imageView.setImageBitmap(bitmap);
}
}
}
}
Bitmap downloadBitmap(String url) {
final int IO_BUFFER_SIZE = 4 * 1024;
// AndroidHttpClient is not allowed to be used from the main thread
final HttpClient client = AndroidHttpClient.newInstance("Android");
final HttpGet getRequest = new HttpGet(url);
try {
HttpResponse response = client.execute(getRequest);
final int statusCode = response.getStatusLine().getStatusCode();
if (statusCode != HttpStatus.SC_OK) {
Log.w("ImageDownloader", "Error " + statusCode +
" while retrieving bitmap from " + url);
return null;
}
final HttpEntity entity = response.getEntity();
if (entity != null) {
InputStream inputStream = null;
try {
inputStream = entity.getContent();
// return BitmapFactory.decodeStream(inputStream);
// Bug on slow connections, fixed in future release.
return BitmapFactory.decodeStream(new FlushedInputStream(inputStream));
} finally {
if (inputStream != null) {
inputStream.close();
}
entity.consumeContent();
}
}
} catch (IOException e) {
getRequest.abort();
Log.w(LOG_TAG, "I/O error while retrieving bitmap from " + url, e);
} catch (IllegalStateException e) {
getRequest.abort();
Log.w(LOG_TAG, "Incorrect URL: " + url);
} catch (Exception e) {
getRequest.abort();
Log.w(LOG_TAG, "Error while retrieving bitmap from " + url, e);
} finally {
if ((client instanceof AndroidHttpClient)) {
((AndroidHttpClient) client).close();
}
}
return null;
}
/*
* An InputStream that skips the exact number of bytes provided, unless it reaches EOF.
*/
static class FlushedInputStream extends FilterInputStream {
public FlushedInputStream(InputStream inputStream) {
super(inputStream);
}
#Override
public long skip(long n) throws IOException {
long totalBytesSkipped = 0L;
while (totalBytesSkipped < n) {
long bytesSkipped = in.skip(n - totalBytesSkipped);
if (bytesSkipped == 0L) {
int b = read();
if (b < 0) {
break; // we reached EOF
} else {
bytesSkipped = 1; // we read one byte
}
}
totalBytesSkipped += bytesSkipped;
}
return totalBytesSkipped;
}
}
}
Please let me know what is the issue. Anxiously waiting for your response.
As I can see, you have some troubles with Views reusage in Adapter and asynchronous loading.
To optimize performance and memory, instead of inflating views repeatedly, Android tries to "cache" list items in ListView's recycler - that means that the same View (list item) will be used several times, each time for different data item.
If so - let's check what will happen if you'll scroll the existing list: some view will be infated, filled with data and will start to download image for ImageView. In separate thread.
And now what if this View will be reused for another data item, before previous Image was successfully loaded? Currently, a new AsyncTask will be started for this image. And here comes a racing condition, noone knows in which order the result will be returned from the AsyncTask.
So I would recommend you either to store AsyncTask with a View (in Tag, for example), or to make some hashmap.
The main purpose - to determine when bitmap loading is complete - was this image used for another bitmap request or not, if it was - skip image setting, as it's outdated.
This approach will prevent imageViews from displaying wrong image for another item.
Hope it helps, good luck
you need to add bydefault image if the image url is null, Just add else check and add any place holder

image display as gridview

i want to display images from mysql server(testing in localhost) using imageurl,i have images in a filder on my server,in an android client app as gridview along with text.how do i use imageurl in my code?
mymainmenu.java
public class MainMenu extends Activity {
GridView gridView;
static final String[] MOBILE_OS = new String[] {
"Android", "iOS","Windows", "Blackberry" };
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.mainmenu_list);
gridView = (GridView) findViewById(R.id.gridView1);
gridView.setAdapter(new ImageAdapter(this, MOBILE_OS));
gridView.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
Toast.makeText(
getApplicationContext(),
((TextView) v.findViewById(R.id.grid_item_label))
.getText(), Toast.LENGTH_SHORT).show();
}
});
}
}
my imageadapter.java:
public class ImageAdapter extends BaseAdapter {
private Context context;
private final String[] mobileValues;
public ImageAdapter(Context context, String[] mobileValues) {
this.context = context;
this.mobileValues = mobileValues;
}
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View gridView;
if (convertView == null) {
gridView = new View(context);
// get layout from list.xml
gridView = inflater.inflate(R.layout.list, null);
// set value into textview
TextView textView = (TextView) gridView
.findViewById(R.id.grid_item_label);
textView.setText(mobileValues[position]);
// set image based on selected text
ImageView imageView = (ImageView) gridView
.findViewById(R.id.grid_item_image);
String mobile = mobileValues[position];
if (mobile.equals("Windows")) {
imageView.setImageResource(R.drawable.imggrid);
} else if (mobile.equals("iOS")) {
imageView.setImageResource(R.drawable.imggrid);
} else if (mobile.equals("Blackberry")) {
imageView.setImageResource(R.drawable.imggrid);
} else {
imageView.setImageResource(R.drawable.imggrid);
}
} else {
gridView = (View) convertView;
}
return gridView;
}
#Override
public int getCount() {
return mobileValues.length;
}
#Override
public Object getItem(int position) {
return null;
}
#Override
public long getItemId(int position) {
return 0;
}
}
I dnt know how to use the following in my code:
try {
URL url = new URL(imageFileURL);
URLConnection conn = url.openConnection();
HttpURLConnection httpConn = (HttpURLConnection)conn;
httpConn.setRequestMethod("GET");
httpConn.connect();
if (httpConn.getResponseCode() == HttpURLConnection.HTTP_OK) {
InputStream inputStream = httpConn.getInputStream();
Bitmap bitmap = BitmapFactory.decodeStream(inputStream);
inputStream.close();
img.setImageBitmap(bitmap);
}
} catch (MalformedURLException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
Put the image downloading code in a AsyncTask. Here is the explanation.
Execute one instance of asynctask in your getView method, i.e to fetch one image everytime.
private class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
ImageView mImageView;
public void setImageView(ImageView img) {
mImageView = img;
}
protected Bitmap doInBackground(String... urls) {
return loadImageFromNetwork(urls[0]);
}
protected void onPostExecute(Bitmap result) {
mImageView.setImageBitmap(result);
}
}
Call task.setImageView(yourImageViewinGrid) before executing your AsyncTask to let it know where to set the image after downloading.
To get the image, you have to do something like :
URL new_url = new URL("your url");
Bitmap image_bitmap = BitmapFactory.decodeStream(newurl.openConnection() .getInputStream()); ImageView image_view = new ImageView(this);
image_view.setImageBitmap(image_bitmap);
Anyway, it's better to download the image as background task. What I actually do is to create a custom view with one private inner class that extend AsyncTask to download the image for you.
I dnt know how to use the following in my code:
that code will download the image for you, you can place in separate thread either AsyncTask or Thread and set the downloaded image in the imageview... simple as that. There are so many example on the web you can google it out
EIDTED
code to download the image
public class AsyncFetchImage extends AsyncTask<String, Void, Bitmap>{
private WeakReference<ImageView> imageReference;
// private WeakReference<Dialog> dialogReferance;
public AsyncFetchImage(ImageView imageview) {
imageReference = new WeakReference<ImageView>(imageview);
// dialogReferance = new WeakReference<Dialog>(dialog);
}
#Override
protected Bitmap doInBackground(String... s) {
return downloadImage(s[0]);
}
private Bitmap downloadImage(String url) {
final AndroidHttpClient client = AndroidHttpClient.newInstance("Nixit");
final HttpGet getRequest = new HttpGet(url);
try {
HttpResponse response = client.execute(getRequest);
final int statusCode = response.getStatusLine().getStatusCode();
if(statusCode != HttpStatus.SC_OK){
Log.w("ImageDownloader", "Error " + statusCode + " while retrieving bitmap from " + url);
return null;
}
final HttpEntity entity = response.getEntity();
if(entity != null){
InputStream is = null;
try{
is = entity.getContent();
final Bitmap bit = BitmapFactory.decodeStream(is);
return bit;
}finally{
if(is != null)
is.close();
entity.consumeContent();
}
}
} catch (IOException e) {
e.printStackTrace();
return null;
} finally{
if(client != null){
client.close();
}
}
Log.i("Image Fetch","Image Fetch Complete");
return null;
}
#Override
protected void onPostExecute(Bitmap result) {
if(isCancelled()){
result = null;
}
if(imageReference != null){
ImageView imageView = imageReference.get();
// Dialog di = dialogReferance.get();
if (imageView != null) {
imageView.setImageBitmap(result);
// di.show();
}
}
}
}
How to use:-
imageView = (ImageView)dialog.findViewById(R.id.imageView1);
AsyncFetchImage fetchImage = new AsyncFetchImage(imageView);
fetchImage.execute(url);
You can use this in getview method of adapter
Hope that help

Categories

Resources