I try to develop an Android App which allows the user to fetch data from flickr and show it in a GridView (with some nice 3D-Animation). After some adventures i got it almost running, but now I'm stuck.
Here's the problem:
I got a UI Thread "LoadPhotosTask" which gets the pictures from flickr, just like the open source application photostream. In the method onProgressUpdate(LoadedPhoto... value) of that subclass I call addPhoto(). Until now everythings fine - I got some nice Bitmap and Flickr.photo data with all the information I need.
#Override
public void onProgressUpdate(LoadedPhoto... value) {
addPhoto(value);
}
On the other hand I have got a GridView. Now I want to fill it with the Photos. It has got an adapter called ImageAdapter (which extends BaseAdapter, see this tutorial). If I use an array inside the ImageAdapter class I can populate the GridView with some sample images. But if I want to populate it at runtime, I don't know what to do.
How do I have to set up the getView method in the ImageAdapter? I was trying to fill the array inside the ImageAdapter class with my values in addPhoto, but it doesn't display anything.
So first of all I was setting up the array with the amount of Photos i wanted to display in the grid like that (code is inside the ImageAdapter class):
// class variable
private ImageView[] mThumbIds;
[...]
public void setupArray(int count) {
this.mThumbIds = new ImageView[count];
}
Then I call this method with the lenght of my photolist:
final Flickr.PhotoList list = params[0];
final int count = list.getCount();
int helper = 0;
imagead.setupArray(count);
Afterwards I call the getView method manually inside the addPhoto method:
private void addPhoto(LoadedPhoto... value) {
ImageView image = (ImageView) mInflater.inflate(
R.layout.grid_item_photo, null);
image.setImageBitmap(value[0].mBitmap);
image.setTag(value[0].mPhoto);
imagead.setmThumbIds(image, value[0].mPosition);
imagead.getView(value[0].mPosition, null, mpicturesGrid);
}
That is the getView method inside ImageAdapter:
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) { // if it's not recycled, initialize some
// attributes
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(EDGE_LENGTH,
EDGE_LENGTH));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(0, 0, 0, 0);
imageView.setVisibility(View.VISIBLE);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageDrawable(mThumbIds[position].getDrawable());
imageView.setTag(mThumbIds[position].getTag());
return imageView;
}
You are missing a key part.
When you use an Adapter you have a method called notifyDataSetChanged().
The logic you are missing there is the following:
When creating the Adapter for the GridView stay with a reference for the list that the adapter will use. Something like:
private ArrayList<Photo> mPhotos;
private BaseAdapter mAdapter;
private GridView mGridView;
onCreate:
/* other things here */
mAdapter = new MyAdapter(mPhotos);
mGridView.setAdapter(mAdapter);
What you addPhoto should do is the following:
mPhotos.add(photo);
mAdapter.notifyDataSetChanged();
That's it.
Related
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/
I am using the sample ImageAdpater provided in the google documentation to populate a gridview with drawables. What I'm trying to do is populate the gridview with an array of drawables in an xml file.
I use TypedArray imgs = getResources().obtainTypedArray(R.array.log_type_icons); to access the array from my main activity, but that doesn't work within the ImageAdapter class.
The array:
<string-array name="log_type_icons">
<item>#drawable/ic_launcher</item>
<item>#drawable/ic_headache</item>
<item>#drawable/ic_man</item>
<item>#drawable/ic_woman</item>
<item>#drawable/ic_kneel</item>
</string-array>
The working ImageAdapter:
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return mThumbIds.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
Log.i("log tag", "gotten resources: " + mThumbIds);
if (convertView == null) { // if it's not recycled, initialize some
// attributes
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
// references to our images
private Integer[] mThumbIds = { R.drawable.ic_headache,
R.drawable.ic_kneel, R.drawable.ic_man, R.drawable.ic_woman,
R.drawable.ic_launcher };
}
I know I could manually add the drawable references to the Integer array, but I reference the xml array from my main activity as well, so it would be ideal to be able to add to the xml and not have to change the code.
Does anyone have any insight into this? Am I doing something wrong or missing Something obvious?
Any help would be appreciated,
Thank you
I ended up solving this problem by using 'getResources().obtainTypedArray(R.array.log_type_icons);' to get the array in my main activity, then passed it to the image adapter instead of using 'getResources()' within the adapter
I think this is the thread which is similar to your question. please check this.
Here they used custom array of drawables. you can try your resource drawable array in place of it
I'm looking for some advice on how to do this.
I want to have an activity where the user select from android gallery, then the image will be added into a grid view on the activity. I have successfully implemented both separately, but when I have to combine them I'm at a loss. Grid View tutorial is here. Problem is that grid view tutorial uses images from res/drawable, so the uri i obtain from gallery doesn't exactly work.
How should I set the image inside the ImageAdapter class? I've been trying to do imageView.setImageBitmap(bitmap) with the uri address of one of the images in my phone, but it didn't work.
I'm thinking of creating an ArrayList of String that contains uri for the images obtained from the gallery. This way i can add, delete, and store the images with ease.
Other questions along with this is that if i get the images displayed, will it refresh if i simply call setAdapter again? would delete work automatically if i delete from the source ArrayList?
Thank you
The following is the code from grid view tut that i edited:
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return imageId.size();
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) { // if it's not recycled, initialize some attributes
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
Uri targetUri = Uri.parse(tests.get(0));
//tests contains the uri of the photo i'm trying to import from my phone gallery in string form
Bitmap bitmap;
bitmap = BitmapFactory.decodeStream(getContentResolver().openInputStream(targetUri));
imageView.setImageBitmap(bitmap);
return imageView;
}
}
Answer to the first part : If your tests contains the Uri of the image that you have selected, simply use imageView.setImageURI(targetUri).
Answer to second part : To refresh a GridView, just call mGridView.invalidateViews() and your whole GridView will be redrawn and thus any changes that have taken place in your source would be reflected here. No need to call setAdapter() again. setAdapter() will be called only once initially, when you are drawing the grid for the first time. After that, just invalidateViews() to refresh it.
I want to create a gridview like android market, I want to populate this with images from a database on internet. it need to work with androidv4.support, since I want to run 2.2 until 4.0.
Someone said, that isnt possible to create a gridview in pre-4.0, is it true?
However It only works when I put use setListAdapter(), but it shows only one image per line, like a listview, when I change to gridview.setAdapter(), it doenst work anymore.
Here is my try:
This is the ListFragment class:
public static class ArrayListFragment extends ListFragment implements OnScrollListener{
ImageAdapter adapter = new ImageAdapter();
#Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
LayoutInflater gridInflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = gridInflater.inflate(R.layout.imagelist, null);
GridView gridView = (GridView) v.findViewById(R.id.list);
ImageDownloader.Mode mode = ImageDownloader.Mode.CORRECT;
// ImageAdapter imageAdapter = new ImageAdapter();
adapter.getImageDownloader().setMode(mode);
setListAdapter(adapter);
// gridView.setAdapter(adapter);
getListView().setOnScrollListener(this);
}
This is ImageAdapter class:
public class ImageAdapter extends BaseAdapter {
private Context mContext;
private final ImageDownloader imageDownloader = new ImageDownloader();
public static int count = 10;
private final String[] URLS = {
"http://lh5.ggpht.com/_mrb7w4gF8Ds/TCpetKSqM1I/AAAAAAAAD2c/Qef6Gsqf12Y/s144-c/_DSC4374%20copy.jpg",
"http://lh5.ggpht.com/_Z6tbBnE-swM/TB0CryLkiLI/AAAAAAAAVSo/n6B78hsDUz4/s144-c/_DSC3454.jpg",
"http://lh3.ggpht.com/_GEnSvSHk4iE/TDSfmyCfn0I/AAAAAAAAF8Y/cqmhEoxbwys/s144-c/_MG_3675.jpg",
"http://lh6.ggpht.com/_Nsxc889y6hY/TBp7jfx-cgI/AAAAAAAAHAg/Rr7jX44r2Gc/s144-c/IMGP9775a.jpg",
"http://lh3.ggpht.com/_lLj6go_T1CQ/TCD8PW09KBI/AAAAAAAAQdc/AqmOJ7eg5ig/s144-c/Juvenile%20Gannet%20despute.jpg",
};
public int getCount() {
return count;
}
public String getItem(int position) {
return URLS[position];
}
public long getItemId(int position) {
return URLS[position].hashCode();
}
public View getView(int position, View convertView, ViewGroup parent) {
View v;
if (convertView == null) {
v = LayoutInflater.from(mContext).inflate(R.layout.image_text_view,null);
v.setLayoutParams(new GridView.LayoutParams(200,200));
ImageView imageview = (ImageView)v.findViewById(R.id.image);
imageview.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageview.setPadding(6, 6, 6, 6);
imageDownloader.download(URLS[position], imageview);
}
else {
v = convertView;
}
return v;
}
public ImageDownloader getImageDownloader() {
return imageDownloader;
}
}
It could help a lot if anyone have a sample. Thanks
This should work fine, you just can't use a gridView in a ListFragment - just use a plain old Fragment instead, if you're going to be manually managing the grid anyway
Also, the point of checking if convertView is null is to do view recycling - the OS only declares enough views to fill the screen and no more, so if you scroll then it can reuse the view instead of having to inflate a new one. Change up your getView() like so to take advantage:
public View getView(int position, View convertView, ViewGroup parent) {
View v;
if (convertView == null) {
v = LayoutInflater.from(mContext).inflate(R.layout.image_text_view,null);
v.setLayoutParams(new GridView.LayoutParams(200,200));
}
else {
v = convertView;
}
ImageView imageview = (ImageView)v.findViewById(R.id.image);
imageview.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageview.setPadding(6, 6, 6, 6);
imageDownloader.download(URLS[position], imageview);
return v;
}
Also, getView isn't a function of BaseAdapter, try switching to ArrayAdapter instead. As a side note, always use #Override when you think you're overriding a base function - that way the compiler will give you an error if you make a mistake
Using a GridView in a Fragment shouldn't be any different than using it in an Activity. One glaring error I see with your code is that you are inflating a layout in onActivityCreated and then promptly ignore it. Instead you should do all of your view initialization in onCreateView which conveniently provides a LayoutInflater for your use.
As for its current behavior, it makes a lot of sense why it's acting how it is. I believe that ListFragment inflates a layout that contains a ListView if the programmer doesn't provide one (which you currently are not). The ImageAdapter you are setting is then used to provide the Views to the ListView.
So move all of your code that is in onActivityCreated to onCreateView and it should work. You shouldn't need to override onActivityCreated at all unless you need to do something with special with the Activity when your Fragment is attached to it.
And as for using GridView pre 4.0 - GridView has been around since API level 1 so I'd bet that it's fine to use it for all Android API levels.
Folks -
I'm trying to implement a Gallery widget that displays an ArrayList of images, and I have started with the Hello, Gallery example on the dev site. This part is all working great.
I need to have the gallery display an empty view (a special view when the ArrayList has no contents), but I cannot seem to get the Gallery to do this. I have done this with ListView and other AdapterViews in the past, but I cannot get it to work with Gallery. What do I need to override/implement in the Adapter, Gallery, or both to get an empty view displayed? This is my adapter code:
public class ImageAdapter extends BaseAdapter {
int mGalleryItemBackground;
private Context mContext;
private ArrayList<Drawable> images;
public ImageAdapter(Context c) {
mContext = c;
TypedArray a = c.obtainStyledAttributes(R.styleable.Gallery1);
mGalleryItemBackground = a.getResourceId(R.styleable.Gallery1_android_galleryItemBackground, 0);
a.recycle();
images = new ArrayList<Drawable>();
}
public void addImage(Drawable d) {
images.add(d);
}
public boolean isEmpty() {
return getCount() == 0;
}
public int getCount() {
return images.size();
}
public Drawable getItem(int position) {
return images.get(position);
}
public long getItemId(int position) {
return position;
}
public View getView(int position, View contentView, ViewGroup parent) {
ImageView i = new ImageView(mContext);
i.setImageDrawable(images.get(position));
i.setLayoutParams(new Gallery.LayoutParams(160, 120));
i.setScaleType(ImageView.ScaleType.FIT_XY);
i.setBackgroundResource(mGalleryItemBackground);
return i;
}
}
When the view is to be displayed with an empty ArrayList, getCount() does get called (returning 0), but the Gallery never checks isEmpty, and when I had defined getEmptyView() in the Gallery, it was never called either. Did I miss another required method in BaseAdapter to properly notify the empty state?
Thanks!
With the assistance of this article, I found the answer:
Correct use of setEmtpyView in AdapterView
The key to the issue was that (once I got the Gallery/AdapterView to properly call the empty status check using the addendum information) AdapterView is designed only to switch the View visibility settings between the content and empty views (swapping View.GONE and View.VISIBLE). Therefore, if you didn't do the legwork of properly creating and laying out both the content and empty views in the parent layout, they will not display properly.
In may case, I had created the empty view programmatically (just a TextView) and used setEmptyView() to attach it to the adapter view. The TextView was never attached to the LinearLayout that represented the Activity, so it didn't show up even after the AdapterView so kindly set it View.VISIBLE.