Load Bitmaps/images in ListView Adapter - android

I'm trying to add images in a ListView which has an ArrayAdapter. Fyi, the toList() is a conversion from iterator to a list of the given DBObject.
I override the View getView() and set a textview and an image.
private static class EventAdapter extends ArrayAdapter<DBObject> {
public EventAdapter(Context context, int resource, Iterable<DBObject> events) {
super(context, resource, toList(events));
}
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
LayoutInflater vi = LayoutInflater.from(getContext());
v = vi.inflate(R.layout.adapter_event_list, null);
DBObject event = getItem(position);
if (event != null) {
//Get the logo if any
if( ((DBObject)event.get("events")).containsField("logo") ){
String logoURL = ((DBObject)((DBObject)event.get("events")).get("logo")).get("0").toString();
ImageView eventLogo = (ImageView) v.findViewById(R.id.eventLogoList);
new setLogo().execute(logoURL, eventLogo);
}
TextView title= (TextView) v.findViewById(R.id.eventTitleList);
title.setText( ((DBObject)event.get("events")).get("title").toString() );
}
return v;
}
protected static <T> List<T> toList( Iterable<T> objects ) {
final ArrayList<T> list = new ArrayList<T>();
for( T t : objects ) list.add(t);
return list;
}
//setLogo() method here. See below
}
The text in the textview is fine. However the images are getting messed up. They seem to load in wrong places in the list. The route of the code is: 1)Get from the DB (async) 2)populate the ListView 3) while populating load each image(second async).
Here is the setLogo() AsyncTask which is inside the EventAdapter above:
private class setLogo extends AsyncTask<Object,Void,Bitmap>{
ImageView eventLogo = null;
#Override
protected Bitmap doInBackground(Object...params) {
try{
Bitmap eventImage = downloadBitmap((String) params[0]);
eventLogo = (ImageView) params[1];
return eventImage;
}
catch(Exception e){
e.printStackTrace();
return null;
}
}
#Override
protected void onPostExecute(Bitmap eventImage) {
if(eventImage!=null && eventLogo!=null){
eventLogo.setImageBitmap(eventImage);
}
}
}
I did so (using an Async) which I believe is the correct way to load images from urls. I saw this post on multithreading and from which I borrowed the downloadBitmap() method.
As explained above the images are loaded in wrong places of the ListView. What can be a robust way to load them?
Also the idea to pass the v.findViewById(R.id.eventLogoList) inside the AsyncTask is that the program will distinguish each adapter's ImageView but it seems it doesn't.
Update
After following the problem that is causing this mix I found this SO question.
I altered my code in order to check if the if is causing the problem.
//Get the logo if any
if( ((DBObject)event.get("events")).containsField("logo") ){
String logoURL = ((DBObject)((DBObject)event.get("events")).get("logo")).get("0").toString();
ImageView eventLogo = (ImageView) row.findViewById(R.id.eventLogoList);
//new setLogo().execute(logoURL, eventLogo);
TextView title= (TextView) row.findViewById(R.id.eventTitleList);
title.setText( "Shit happens" );
}
Let's say I have 40 items. The Shit happens is set on the fields that a logo field exists. If I scroll down/up the order changes and the text gets messed up. It is because the stack created inside the loop is small than the maximum of the list..I guess... I am still struggling.
PS: I found this easy library to load images asynchronously instead of DYI stuff.
Update 2
I added an else with a static url. Because of the time it take to the image to load they are still misplaced.

I would really go for a good library like Picasso.
It will handle all the hard part for you and it's very well written.
http://square.github.io/picasso/

Related

Android - How to know when getView is called to inflate list

I have a List Adapter which inflates a list. On the method getView() i make an AscyncTask to get an image from internet. However, i figured out that the method getView() is called for numerous reasons, not only to inflate the list.
My question is: how to know when the method is called to inflate the list? I don't want to make a AsyncTask every time the method is called.
Here is my code:
public class ListItem extends ArrayAdapter<Carro> {
private final Activity context;
private final List<Carro> carros;
public ListItem(Activity context, List<Carro> carros) {
super(context, R.layout.list_item, carros);
this.context = context;
this.carros = carros;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = context.getLayoutInflater();
View rowView = inflater.inflate(R.layout.list_item, null, true);
TextView modelo = (TextView) rowView.findViewById(R.id.modelo);
modelo.setText(carros.get(position).getModelo());
GetFoto getFoto = new GetFoto(rowView);
getFoto.execute(position);
return rowView;
}
private class GetFoto extends AsyncTask<Integer, Void, Void> {
Drawable fotoDraw;
View rowView;
int position;
public GetFoto(View view) {
this.rowView = view;
}
#Override
protected Void doInBackground(Integer... params) {
position = params[0];
HTTPHandler handler = new HTTPHandler();
fotoDraw = handler.makeServiceCallImage(carros.get(position).getFoto());
return null;
}
#Override
protected void onPostExecute(Void aVoid) {
ImageView imagem = (ImageView) rowView.findViewById(R.id.imagem);
imagem.setImageDrawable(fotoDraw);
}
}
}
The method getView() will be called every time the view appears on the screen during the scrolling process. The number of getView() method calls can be greater than the number of elements if the ListView height is set to wrap_content.
Use some libraries like Picasso or Glide for downloading images. These libraries will cache the downloaded images that prevents unnecessary requests.
It will look like this:
Glide.with(context)
.load(imageUrl)
.into(imageView);
Or you can read this article https://developer.android.com/topic/performance/graphics/cache-bitmap.html
I recommend using RecyclerView instead of ListView. It recycling the views which prevents multiple inflation
Like Alex Nik said: use picasso or glide for picture loads.
And stop using ListViews, they are kind of deprecated, yet still supported. Use RecyclerView, it is better and easier to use.

ListView displaying image on rows that shouldn't have one

I have a listView that is implemented with a custom adapter I created, which includes an imageView. Throughout the list each item may or may not have an image attached(It's not necessary).
To load the image into the imageView I use Picasso library, in the getView method.
When it comes to rows that do have an image associated, my code works fine.
The problem is when the list is being displayed, rows that should not have an image are displaying one.
Here is my getView() method:
public View getView(int position, #Nullable View convertView, #NonNull ViewGroup parent) {
ReportHolder holder = null;
if(convertView==null){
LayoutInflater inflater=((Activity)context).getLayoutInflater();
convertView = inflater.inflate(layoutResourceId,null);
holder = new ReportHolder();
holder.imageReportView=(ImageView)convertView.findViewById(R.id.reportImage);
holder.reportLocation=(TextView) convertView.findViewById(R.id.report_location);
holder.reportDescription=(TextView) convertView.findViewById(R.id.report_description);
holder.reportStatus=(TextView) convertView.findViewById(R.id.report_status);
convertView.setTag(holder);
}
else
holder=(ReportHolder)convertView.getTag();
ReportData data = reportDataList.get(position);
holder.reportLocation.setText(data.address);
holder.reportDescription.setText(data.description);
holder.reportStatus.setText(data.status);
Picasso picasso = Picasso.with(this.context);
if(data.url!=null)
picasso.load("https://fourth-landing-159416.appspot.com/gcs/"+data.url+"_thumbnail").into(holder.imageReportView);
return convertView;
}
I know I'm fetching my information well because no information between rows repeats itself except the pictures. So what am I missing here?
FMI My adapter is created in a nested ASyncTask, because I´m required to fetch the information through an HTTP connection before I can insert it in the adapter:
#Override
protected void onPostExecute(final String result) {
mFeedTask = null;
mFeed.removeFooterView(mProgressView);
if(result!=null){
if(result.contains("HTTP error code: 403")){
Toast.makeText(mContext,"Token invalid. Please login again.", Toast.LENGTH_SHORT).show();
}
else if(result.equals("[]"))
Toast.makeText(mContext,"Nothing more to show.", Toast.LENGTH_SHORT).show();
else{
try {
Gson gson = new Gson();
JSONArray reports = new JSONArray(result);
LinkedList<ReportData> tmpList = new LinkedList<ReportData>();
for(int i=0; i < reports.length(); i++){
ReportData data = gson.fromJson(reports.getString(i), ReportData.class);
tmpList.add(data);
}
reportDataList.addAll(tmpList);
if(reportDataList.size()==tmpList.size()){
// First, we set the empty adapter and set up the item click listeners
adapter = new CustomAdapter(mContext,R.layout.custom_feed_row,reportDataList);
mFeed.setAdapter(adapter);
}
else {
updateTriggered=false;
adapter.notifyDataSetChanged();
}
} catch (JSONException e) {
e.printStackTrace();
}
}
}
}
And as I have a relatively large amount of information to transfer I have to call this task multiple times. On the first time called the adapter is created and from then on notifyDataSetChanged is called to update it.
Much Help Appreciated!
I thank you in advance!
Cheers
Because listview recycling same views, so you should remove the image if this row shouldn't contain image
Do something like this in your getView:
if(data.url!=null)
picasso.load("https://fourth-landing-159416.appspot.com/gcs/"+data.url+"_thumbnail").into(holder.imageReportView);
else {
holder.imageReportView.setImageDrawable(null);;
}

Android | ListView Using Layoutinflater

Im Writing An Application that reads XML file and Displays it as a ListView
cause each row has its own Image and Text i am using LayoutInflater, i can display the Texts but cant display Images! this is the code i use for ImageAdapter:
public class ImageAdaptertwo extends ArrayAdapter<String> {
private final Context context;
private final ArrayList<String> values;
private final ArrayList<String> values2;
public ImageAdaptertwo(Context context, ArrayList<String> values,ArrayList<String> values2) {
super(context, R.layout.trimester1_listview, values);
this.context = context;
this.values = values;
this.values2 = values2;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
String s = values.get(position);
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View rowView = inflater.inflate(R.layout.trimester1_main, parent, false);
TextView textView = (TextView) rowView.findViewById(R.id.label2);
ImageView imageView = (ImageView) rowView.findViewById(R.id.icon2);
textView.setText(values2.get(position));
// Change icon based on name
//String s = values.get(position);
System.out.println(s);
if (s.equals(" havingsuccessful-pregnancyS.png")) {
imageView.setImageResource(R.drawable.n1);
} else if (s.equals("urfoodguideduringpregnancyS.png")) {
imageView.setImageResource(R.drawable.n2);
} else if (s.equals("lovingurpregnantbodyS.png")) {
imageView.setImageResource(R.drawable.n3);
} else if (s.equals("gettinggoodbreastafterS.png")) {
imageView.setImageResource(R.drawable.n4);
} else if (s.equals("FoodGuidePyramidS.png")) {
imageView.setImageResource(R.drawable.n5);
} else if (s.equals("pregnancyS.png")) {
imageView.setImageResource(R.drawable.n6);
} else if (s.equals("nutritionfoS.png")) {
imageView.setImageResource(R.drawable.n7);
} else if (s.equals("Your-Growing-ChildS.png")) {
imageView.setImageResource(R.drawable.n8);
} else if (s.equals("Fatigue-in-first-trimesterS.png")) {
imageView.setImageResource(R.drawable.n9);
} else if (s.equals("T1S.png")) {
imageView.setImageResource(R.drawable.n10);
}
return rowView;
}
}
values and values2 are the ArrayList which are Coming from XML Parser! Actually no they are ok because i print the content of them and see them in LogCat!
in my Activit i use this for Adapting ImageAdapter
setListAdapter(new ImageAdaptertwo(this, imagelink,texts));
The result is a listview with texts but no Images!
can anybody tell me how i can fix this and display XML contents on ListView?
Solved the problem by changing if Statements to Switch Case . now for each row i have specific number
Well basically a problem in your if - else then. String comparisons are not happening as you expect. Make sure you check any code involving equals,equalsignorecase twice in JAVA. String comparisons are unnecessarily complicated. Also instead of if-else you can use switch and make your life just a little bit easier.
To get images from online you have to get the images on a background thread and then display on the main thread.
See this for help : http://android-developers.blogspot.in/2009/05/painless-threading.html
Similar question: unable to display url image (bitmap)
Solved the problem by changing if Statements to Switch Case . now for each row i have specific image

Infinite Scrolling Gallery View with text description

I have infinite gallery based on this example :
http://blog.blundell-apps.com/infinite-scrolling-gallery/ ,
It runs nicely, now I want to have the Gallery still scroll through the images and under each image there should be a text caption.
I searched net with no result, would you please help me in coding that, just beginner in development.
==================================================================================
NEW Update :
upload photo explane what i need exactly which i get it with normal gallery (applied text to each image and able to customize text too as shown down image ,and each image has diffrenet text than others , but still not succeed to do it with infinite gallery :
PLEASE ANY HELP AND ADVICE .
THANKS ALOT.
I went through Blundell's tutorial and thanks to him I know how to make an Infinitelyscrolling gallery :)
To answer the question, about how to add a text caption below each of the images , I made same small changes to Blundell's nice tut and used some of his suggestions in the above answer and I think I got a nice way of doing the task.
The code below doesnt inflate or use gallery_item.xml at all, so it will increase the performance significantly compared to the way when you are inflating it every time.
Trimmed down code of classes from Blundell's tutorial ( because in the question, you are using only resources and not sdcard).
public class InfiniteScrollingGalleryActivity extends Activity {
public class GalleryItem{
int imageId;
String caption;
public int getImageId() {
return imageId; }
public String getCaption() {
return caption;
}
public GalleryItem(int i,String s) {
imageId=i;
caption=s; }
}
int[] resourceImages = {R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher,
R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher};
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
GalleryItem[] item = new GalleryItem[6];
//initialising all items, change member variables according to needs
for(int i=0;i<6;i++){
item[i] = new GalleryItem(resourceImages[i], "pic no" +(i+1)); }
setContentView(R.layout.activity_main);
InfiniteGallery galleryOne = (InfiniteGallery) findViewById(R.id.galleryOne);
galleryOne.setResourceGallery(item);
} }
Here I have added the GalleryItem class array and passed it.
Also added the below code in InfiniteGalley class.
public void setResourceGallery(GalleryItem[] item) {
setAdapter(new InfiniteGalleryResourceAdapter(getContext(), item));
setSelection((getCount() / 2));
}
below code's getView() is where the good things happen :
public class InfiniteGalleryResourceAdapter extends BaseAdapter {
/** The context your gallery is running in (usually the activity) */
private Context mContext;
GalleryItem[] myItems;
public InfiniteGalleryResourceAdapter(Context context, GalleryItem[] item) {
this.mContext = context;
myItems=item;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
// convertView is always null in android.widget.Gallery
TextView t = new TextView(mContext);
try {
int itemPos = (position % myItems.length);
t.setText(myItems[itemPos].getCaption());
Drawable d = mContext.getResources().getDrawable(myItems[itemPos].getImageId());
((BitmapDrawable) d).setAntiAlias(true); // Make sure we set anti-aliasing otherwise we get jaggies (non-smooth lines)
//d.setBounds(0,0,60,60); //use this to change dimens of drawable,if needed
t.setCompoundDrawablesWithIntrinsicBounds(null, d, null, null);
} catch (OutOfMemoryError e) {
// a 'just in case' scenario
Log.e("InfiniteGalleryResourceAdapter", "Out of memory creating imageview. Using empty view.", e);
}
return t;
}
#Override
public int getCount() {
return Integer.MAX_VALUE;
}
#Override
public Object getItem(int position) {
return position;
}
#Override
public long getItemId(int position) {
return position;
}
/** The width of each child image */
private static final int G_ITEM_WIDTH = 120;
/** The height of each child image */
private static final int G_ITEM_HEIGHT = 80;
private int imageWidth;
private int imageHeight;
}
In getView(), I am just creating a textView and assigning the drawable to it using the handy t.setCompoundDrawablesWithIntrinsicBounds(null, d, null, null); . So it excludes the need of inflating layouts which is a heavy operation.
Below is the output image:
In the adapter you can see the method: getView, you can see this method returns an ImageView, so now you want the getView method to return an imageview and textview...
U can do this in a few ways, here how you can do it with a LayoutInflater
View v = getLayoutInflater().inflate(R.layout.gallery_item, null);
((ImageView) v.findViewById(R.id.img)).setImageResource(imageIds[position]);
((TextView) v.findViewById(R.id.caption)).setText(captions[position]);
So in your res/layout folder you should have an 'gallery_item' layout that contains an ImageView (img) and a TextView (caption)
i.e.
gallery_item.xml
<LinearLayout>
<ImageView ... />
<TextView ... />
</LinearLayout>
Hope this was helpfull!
EDIT
so as the above example shows you would need two arrays, one of imageIds and one of textCaptions. To keep your Adapter nice and clean it's screaming for you to make an object.
public class GalleryItem {
int imageId;
String caption
// Constructor
// getters and setters
}
You could then pass an Array or List of your GalleryItems to the Adapter (replacing the setAdapter method). i.e:
GalleryItem[] items = new GalleryItem[];
Then in your getView method as outlined above you would extract each object:
GalleryItem item = items[position];
View v = getLayoutInflater().inflate(R.layout.gallery_item, null);
((ImageView) v.findViewById(R.id.img)).setImageResource(item.getImageId());
((TextView) v.findViewById(R.id.caption)).setText(item.getCaption());
Hope thats clear

Android: JSONArray & JSONObject to ListView strange readings

Tried using the following:
Populate Listview from JSON
To make a listview which uses a JsonArray containing Json Objects. For some reason, the
'public View getView(int position, View convertView, ViewGroup parent)'
code is fired more times than there are contents in the jsonarray.
I made a control test to check up on this and I found that even with just 1 Jsonobject within the jsonarray, I came up with 32 times the getView code was activated.
I am rather confused as to why this is happening, as my friends have managed to make similar codes to mine, but without the huge number of activations I am suffering from. Am I being rather slow, and this is because the individual Jsonobject has, not only the image and text in them, but about 15 other items within it? Or is ther another cause?
I would appreciate any aid towards this, I am posting the adapter code below:
public class ArticleAdapter extends BaseAdapter{
private JSONArray items;
private Context cont;
public ArticleAdapter(Context context, JSONArray array)
{
super();
this.items = array;
this.cont = context;
}
#Override
public int getCount() {
return items.length();
}
#Override
public Object getItem(int position) {
return null;
}
#Override
public long getItemId(int position) {
return 0;
}#Override
public View getView(int position, View convertView, ViewGroup parent)
{
View v = convertView;
WebIView sath;
TextView sati;
Log.i("Seiji", "Checking! " + position);
try
{
if(!items.isNull(position))
{
JSONObject item = items.getJSONObject(position);
if (v == null) {
v = LayoutInflater.from(cont).inflate(R.layout.saved_articles_listitem, null);
}
sath = (WebIView) v.findViewById(R.id.sathumbnail);
sati = (TextView) v.findViewById(R.id.satitle);
if(item.has("image") && sath != null)
{
JSONObject thisImage = item.getJSONObject("image");
sath.reset();
sath.setImageUrl(thisImage.getString("thumbnail"));
sath.loadImage();
}
if(sati != null)
{
sati.setText(item.getString("title"));
}
}else{
return null;
}
}
catch(Exception e)
{
Log.e("num", "Saved Art Error! " + e.toString());
}
return v;
}
}
the code which activates this class is the following:
ListView savedArtList = (ListView) sav.findViewById(R.id.savelist);
ArticleAdapter savedadapter = new ArticleAdapter(cont, flip);
ArtList.setAdapter(savedadapter);
EDIT:
Thanks to some very helpful advice I was able to figure out what was going wrong. The Listview was resizing itself every time a new row was added because I had set the views height to be 'wrap_content'. I hadnt realised that this would cause problems, but once I had set it to 'fill_parent' (or a set value in other cases), the issue disappeared and I didnt have this problem any more.
Thank you againfor the helpful advice!
getView will be called many times - per visible cell when the list view is being laid out, per visible cell when the list view is being drawn + more. This is normal behaviour and getView should be efficient. Its possible your images and/or text are making the height of each cell change as they're loaded in, meaning other cells may become visible / go off screen etc.

Categories

Resources