How to: gridview inside a fragment?

Question

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

Answer 1

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