using gridview with images in android

Question

this is the problematic code:

public class Level1 extends Activity {

int[] logos = {
        R.drawable.arutz8,
        R.drawable.channel1,
        R.drawable.doctor_gav,
        R.drawable.foxgroup3,
        R.drawable.careline,
        R.drawable.golfnew,
        R.drawable.haaretz,
        R.drawable.hafenix,
        /*R.drawable.hando,
        R.drawable.bankleumi,
        R.drawable.jerusalempostred,
        R.drawable.laisha,
        R.drawable.logo,
        R.drawable.logodelta,
        R.drawable.maariv,
        R.drawable.pelephone,
        R.drawable.ravbariah,
        R.drawable.renuar,
        R.drawable.reshet_tv,
        R.drawable.sano,
        R.drawable.shilav,
        R.drawable.sport5,
        R.drawable.srigamish,
        R.drawable.steimatzky,
        R.drawable.superpharm,
        R.drawable.supersal,
        R.drawable.tambur,
        R.drawable.tzometsfarim,
        R.drawable.walla,
        R.drawable.yediot,*/
};

@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.level1);
    ListAdapter adapter = (new ArrayAdapter<Integer>(this, R.layout.level1));

    GridView grid = (GridView) findViewById(R.id.gridview1);
    grid.setAdapter(new ImageAdapter(this));
}


private class ImageAdapter extends BaseAdapter 
{
    private Context context;

    public ImageAdapter(Context c) 
    {
        context = c;
    }

    //---returns the number of images---
    public int getCount() {
        return logos.length;
    }

    //---returns the ID of an item--- 
    public Object getItem(int position) {
        return position;
    }

    public long getItemId(int position) {
        return position;
    }

    //---returns an ImageView view---
    public View getView(int position, View convertView, ViewGroup parent) 
    {
        ImageView imageView;
        if (convertView == null) {
            imageView = new ImageView(context);
            imageView.setLayoutParams(new GridView.LayoutParams(90, 90));
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setPadding(5, 5, 5, 5);
        } else {
            imageView = (ImageView) convertView;
        }
        imageView.setImageResource(logos[position]);
        return imageView;
    }
} 

}

This program works perfectly as long as the size of all images is about 60px per each image. The problem in that size of image is that every image got constricted and its ugli!. I tried to use in bigger images and for some reason only the first five images appears on the screen and when i try to load the rest images, the app crashes. I thought that happens because of the size of the images but than i realized that all the images are in the same big size and still 5 of them were drawn on the screen. Any ideas?

Those are the logs from logCat:

logs

and this is the result when i press on the level 1 button:

result

Answer 1

There is a problem in your public View getView(...) method in your ImageAdapter. When the convertView == null, you never link the convertView to your imageView. So there will be a problem in the else-statement. You can do this in two ways:

• By defining your ImageView in code like you did, in your case this will be the best choice:

   ImageView imageView = (ImageView) convertView; 
   
  \n\n
   if (convertView == null) { convertView = new ImageView(context);  imageView = (ImageView) convertView;  // Set other parameters }  
  \n\n
   // Set resource  
  \n\n
   return convertView;  

• By defining your layout in a xml-layout file an using a layout inflater:

Handler handler; if (convertView == null) { LayoutInflater li = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE); convertView = li.inflate(yourLayoutResourceId, parent, false); handler = new Handler(); handler.itemIV = (ImageView) convertView.findViewById(imageViewLayoutId); convertView.setTag(handler); } else { handler = (Handler) convertView.getTag(); } handler.imageView.setImageResource(...); return convertView; Where yourLayoutResourceId is the id of the created xml-layout file (R.layout.exmaple), and imageViewLayoutId is the id of your imaeView in the layout (R.id.exmapleIV). As last step define an inner class Handler in your ImageAdapter: class Handler { ImageView imageView; }

 Handler handler;  if (convertView == null) { LayoutInflater li = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE); convertView = li.inflate(yourLayoutResourceId, parent, false); handler = new Handler(); handler.itemIV = (ImageView) convertView.findViewById(imageViewLayoutId); convertView.setTag(handler); } else { handler = (Handler) convertView.getTag(); } handler.imageView.setImageResource(...); return convertView; Where yourLayoutResourceId is the id of the created xml-layout file (R.layout.exmaple), and imageViewLayoutId is the id of your imaeView in the layout (R.id.exmapleIV). As last step define an inner class Handler in your ImageAdapter: class Handler { ImageView imageView; } 

Handler handler; if (convertView == null) { LayoutInflater li = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE); convertView = li.inflate(yourLayoutResourceId, parent, false); handler = new Handler(); handler.itemIV = (ImageView) convertView.findViewById(imageViewLayoutId); convertView.setTag(handler); } else { handler = (Handler) convertView.getTag(); } handler.imageView.setImageResource(...); return convertView; Where yourLayoutResourceId is the id of the created xml-layout file (R.layout.exmaple), and imageViewLayoutId is the id of your imaeView in the layout (R.id.exmapleIV). As last step define an inner class Handler in your ImageAdapter: class Handler { ImageView imageView; }

Handler handler; if (convertView == null) { LayoutInflater li = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE); convertView = li.inflate(yourLayoutResourceId, parent, false); handler = new Handler(); handler.itemIV = (ImageView) convertView.findViewById(imageViewLayoutId); convertView.setTag(handler); } else { handler = (Handler) convertView.getTag(); } handler.imageView.setImageResource(...); return convertView; Where yourLayoutResourceId is the id of the created xml-layout file (R.layout.exmaple), and imageViewLayoutId is the id of your imaeView in the layout (R.id.exmapleIV). As last step define an inner class Handler in your ImageAdapter: class Handler { ImageView imageView; }

Good luck! Have nice development.

Kr