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.

Comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Hi, thank you for the code that you provided above, it works like a dream. I now have the option to share the view over any application that allows this.
    I do have one question though. By pressing button, how can i save this image on another page in my app for future use?

    ReplyDelete
    Replies
    1. Good question I'm also looking for that answer

      Delete
    2. storeImage saves the image in External cache. Thus it can be used in any page by using it's Uri.
      Example:
      Uri uri = Uri.parse(getExternalCacheDir() + "/image.jpg");
      imageview1.setImageURI(uri);

      Delete
  4. (Request) how to make screenshot button)

    ReplyDelete
  5. How can i only save it to gallery??

    ReplyDelete
  6. Is there a way where we can edit the file name? And change the file directory after it's been put into the cache file

    ReplyDelete
  7. hey the bitmap image quality is too bad. can we make an high graphics image with this ? any help.

    ReplyDelete
  8. How to make it work on image from image manager then export to a specific directory?

    ReplyDelete
  9. Hi,
    How can rename the new file , if the file name is already exist.

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. Is there a way to save the source of an ImageView to file as well?

    ReplyDelete
  12. Publish your apps for free
    Sigmaapp.blogspot.com
    Don't be late and visit
    Also view my apps

    ReplyDelete
  13. Write permission denied. How can I add the r/w ext. storage permission to the manifest?

    ReplyDelete
  14. Hi, can this code work on PDF file on webview and how to open or load PDF file and save it. Thanks

    ReplyDelete
  15. Pls where do I see the downloaded image??

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete

Post a Comment

Popular posts from this blog

Simple car racing android game in Sketchware

Creating a Drawing View in Sketchware

Enable Fullscreen for Youtube videos in WebView

How to enable upload from webview in Sketchware?

List of Calendar Format symbols valid in Sketchware