Android GridView - How to change a bitmap dynamically?

Question

Hello I have a gridView which I use to show some pictures on (small thumb of diffrent levels). When the user finishes one level, I would like to change the thumb for that level. (Somehow show that it has been completed).

I created two thumbs for each level. One is the original and one that shows that the level is completed.

But how can i change the source of the images?

The code which I use to draw the images looks like this.

The main activity:

/** Called when the activity is first created. */
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.maps);

  GridView gridview = (GridView) findViewById(R.id.gridview);
  gridview.setAdapter(new ImageAdapter(this));

  gridview.setOnItemClickListener(new OnItemClickListener() {
    @Override
      public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
        //Open the map which was clicked on, if there is one
        if(position+1 > 1){
            Toast.makeText(maps.this, "Level " + (position+1) + " is not yet available!", Toast.LENGTH_SHORT).show();
        }else{
            Toast.makeText(maps.this, "Opening Level " + (position+1), Toast.LENGTH_SHORT).show();
            Intent myIntent = new Intent(v.getContext(), Tutorial2D.class);
            startActivity(myIntent);
        }
      }
  });
}

The ImageAdapter Class:

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;
    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;
    }

    //Changing
    imageView.setImageResource(mThumbIds[position]);
    return imageView;
}



// references to our images
private Integer[] mThumbIds = {
        R.drawable.map1, R.drawable.map2, R.drawable.map3,
        R.drawable.map4, R.drawable.map5, R.drawable.map6,
        R.drawable.map7, R.drawable.map8, R.drawable.map9,
        R.drawable.map10, R.drawable.map11, R.drawable.map12,
        R.drawable.map13, R.drawable.map14, R.drawable.map15,
        R.drawable.map16, R.drawable.map17, R.drawable.map18,
        R.drawable.map19
};

}

Answer 1

You could create a new bitmap based off a thumb and draw your extra graphics over it using a canvas. Then you could pass that bitmap to the imageview using imageView.setImageBitmap

[edit]

something like

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;
    }

    if (mLevelfinished) {

        //create thumbnail bitmap
        mThumbBmp = BitmapFactory.decodeResource(mResources, mThumbIds[position]);

        //draw a check over the bitmap
        Canvas c = new Canvas(mThumbBmp);
        c.drawBitmap(mCheckBitmap, destX, destY, null);

        imageView.setImageBitmap(mThumbBmp);
    } else {
        imageView.setImageResource(mThumbIds[position]);
    }

    return imageView;
}

[edit2]

I now see I kinda misunderstood your question.. doh. Instead of creating the level complete thumb dynamically, you already have thumbs for those. In that case, I would create another array that has those completed thumbs and pick the resource from the correct array. And to stick with arrays, maybe store the level completion in one as well:

imageView.setImageResource((mLevelCompleted[position]) ? mThumbCompleteIds[position] : mThumbIds[position]);

Answer 2

I am having the same problem. Here is what I do:

gridview.setAdapter(new ImageAdapter(this));
gridview.setOnItemClickListener(new OnItemClickListener() {
  public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
    Toast.makeText(Punch.this, "" + mThumbIds[position], Toast.LENGTH_SHORT).show();
     mThumbIds[position]=R.drawable.crabx;//crabxImg;

  //here is where I would like to redraw the whole grid but it will not let me. 
  //Because ImageAdapter is not defined within this callback.

  }


})

Answer 3

I am using a dirty trick that might be useful when you know previously what bitmaps will be shown.

I set up another invisible ImageView just aside the visible one, and manipulate

myImageView.setVisibility(n); // (n = 0 = View.VISIBLE) or (n = 8 = View.GONE)

Do not use the constant View.INVISIBLE which values 4, because View.GONE is the right effect. When the visibility is set to View.GONE, the object will not take space in the layout. This is similar to display: none; from CSS.