How to implement grid view in sketchware

How to implement Images in GridView with sketchware

So today we are going to create an app in Sketchware app which will display the images picked using FilePicker component (for picking */images) 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 a such app, follow the given steps below:-

(1) Create a new project in Sketchware.

(2) In the VIEW area add a Button button1 and a LinearView linear1 .

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

(4) Create a number variable num , a List Map map, and a List String list .

(5) In the event button1 OnClick , use the block
FilePicker picker pick files.
This will open the gallery when button1 is clicked, and allow users to pick images from their storage

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

(7) In the event FilePicker onFilesPicked use the blocks(
Blocks
• setNumber "num" variable created above == 0
• then use the repeat block and set the repeat amount to the length of list (insert the filePath block in the onFilesPicked in the length of list block and put in the repeat amount)
• then add the AddItemToListMap Block in the repeat block
arrangements
Set key to item, set value to get at num(variable) of list filePath above in the onFilesPicked block to listmap(map)
• then increase num(variable) by 1
)
to get the path of selected images to map.
Then use these codes to display the selected images in gridview1 .

CODE
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 to put in codes to declare a GridView gridview1 , and define a BaseAdapter called
ImageAdapter for the GridView.

CODE
}
GridView gridview1;
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return map.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.

CODE
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.

CODE
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){
map.remove(p3);
gridview1.setAdapter(new ImageAdapter(getBaseContext()));
((BaseAdapter)gridview1.getAdapter()).notifyDataSetChanged();
}
});
dialog2.show();
}
});

(11) Save and Run the project.
There you have it your GridView app is ready and working.

Comments below