Showing Images in GridView

Here we create an app in Sketchware which will display the images picked using FilePicker in a GridView. And on clicking the GridView item, it will display a dialog box asking if we want to delete the image. To create such app, follow the steps given below.

1. Create a new project in Sketchware.

2. In VIEW area add a Button button1 and a LinearV linear1.

3. Add a FilePicker component picker with mime type image/*.

4. Create a number variable n, a List Map maplist, and a List String slist.

5. In the event on button1 Click , use the block
FilePicker picker pick files.

This will open the gallery when button1 is clicked, and allow users to pick images.

6. In EVENT area add a new event FilePicker onFilesPicked under Component section.

7. In the event FilePicker onFilesPicked use the blocks as shown in image below, to get the path of selected images to maplist.

Then use codes to display the selected images in gridview1.
gridview1.setAdapter(new ImageAdapter(getBaseContext()));
((BaseAdapter)gridview1.getAdapter()).notifyDataSetChanged();

8. Create a more block extra.

9. In the more block extra, use an add source directly block and put codes to declare a GridView gridview1, and define a BaseAdapter called ImageAdapter for the GridView.
}
GridView gridview1;

public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return maplist.size();
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams((int)(SketchwareUtil.getDip(getApplicationContext(), 150)), (int)SketchwareUtil.getDip(getApplicationContext(), 150)));
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageView.setPadding(4, 4, 4, 4);
int strokeWidth = 5;
int strokeColor = Color.BLACK; android.graphics.drawable.GradientDrawable gD = new android.graphics.drawable.GradientDrawable(); gD.setShape(android.graphics.drawable.GradientDrawable.RECTANGLE);
gD.setStroke(strokeWidth, strokeColor);
imageView.setBackground(gD);
} else {
imageView = (ImageView) convertView;
}
try {
imageView.setImageBitmap(FileUtil.decodeSampleBitmapFromPath(maplist.get((int)position).get("image").toString(), 1024, 1024));
} catch (Exception e){
imageView.setBackgroundColor(Color.GRAY);
}
return imageView;
}

10. In onCreate event, use an add source directly block and put codes to define gridview1 and add it to linear1.
gridview1 = new GridView(this);
gridview1.setLayoutParams(new GridView.LayoutParams(GridView.LayoutParams.MATCH_PARENT, GridView.LayoutParams.MATCH_PARENT));
gridview1.setBackgroundColor(Color.WHITE);
gridview1.setNumColumns(2); gridview1.setColumnWidth(GridView.AUTO_FIT); gridview1.setVerticalSpacing(20); gridview1.setHorizontalSpacing(2); gridview1.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);

linear1.addView(gridview1);

After this use another add source directly block and put codes to set OnItemClickListener for the GridView.
gridview1.setOnItemClickListener(new AdapterView.OnItemClickListener(){
@Override
public void onItemClick(AdapterView<?>, View p2, final int p3, long p4){
final AlertDialog dialog2 = new AlertDialog.Builder(MainActivity.this).create();
dialog2.setTitle("Remove this image?");
dialog2.setButton("YES", new DialogInterface.OnClickListener(){
@Override
public void onClick(DialogInterface p1, int p2){
maplist.remove(p3);
gridview1.setAdapter(new ImageAdapter(getBaseContext()));
((BaseAdapter)gridview1.getAdapter()).notifyDataSetChanged();
}
});
dialog2.show();
}

});

7. Save and Run the project. The GridView app is ready.

Android GridView with image and text example