How to create an image from a View and save it in Sketchware

Using codes in add source directly block in Sketchware, we can create bitmap images from any View (like EditText, TextView, LinearLayout, WebView, etc.) in android app. The bitmap images can then be saved to externalcache or to external storage if the permissions to WRITE EXTERNAL STORAGE is added.

To Create an app which can create images from any View and share it, follow the steps given below.

1. Start a new Sketchware project. In VIEW area add an LinearLayout (linear1) containing things to be converted to an image, and a Button (button1) for converting linear1 to image.. If you want to preview the image add an ImageView also.

2. In LOGIC area of project, create a More Block saveView[View:view].

Here use an add source directly block and add following code:
Bitmap returnedBitmap = Bitmap.createBitmap(_view.getWidth(), _view.getHeight(),Bitmap.Config.ARGB_8888);

Canvas canvas = new Canvas(returnedBitmap);
android.graphics.drawable.Drawable bgDrawable =_view.getBackground();
if (bgDrawable!=null) {
bgDrawable.draw(canvas);
} else {
canvas.drawColor(Color.WHITE);
}
_view.draw(canvas);

java.io.File pictureFile = new java.io.File(Environment.getExternalStorageDirectory() + "/Download/myimage.png");
if (pictureFile == null) {
showMessage("Error creating media file, check storage permissions: ");
return; }
try {
java.io.FileOutputStream fos = new java.io.FileOutputStream(pictureFile); returnedBitmap.compress(Bitmap.CompressFormat.PNG, 100, fos);
fos.close();
showMessage("Image Saved in /Download/ folder");
} catch (java.io.FileNotFoundException e) {
showMessage("File not found: " + e.getMessage()); } catch (java.io.IOException e) {
showMessage("Error accessing file: " + e.getMessage());

}

This code defines a class saveView(View), which converts a View to Bitmap image and saves it to Download folder in External storage directory.

3. Now in event onButtonClick, use blocks as shown below.

This will add WRITE EXTERNAL STORAGE permissions to the app, and save linear1 in as image in /Download/ folder.

4. Save and run the project. Now when you click button1, it will save linear1 as image in external storage.