Convert Multiple images to a PDF file

This post shows a simple project which converts multiple images into a PDF document in Sketchware.


1. Create a new project in Sketchware.

2. In View area of main.xml, add
Button button_open
Button button_save
EditText edittext1
ListView listview1

3. Create a Custom View itemview.xml. In this view add
ImageView imageview1

4. For listview1 select itemview as CustomView.

5. Add a FilePicker fp for picking images ("image/*").

6. Add a number variable n, and a String variable save_path, a String variable path1, a List String list, and List Map imagelist.

7. In button_open onClick event use FilePicker pick files block.
8. In FilePicker onFilesPicked event, add selected paths to imagelist using key 'pic', and display imagelist in listview1 using blocks shown in image below.
9. In ListView onBindCustomView event, set image of imageview1 to file path from imagelist.

10. In button_save onClick event, create new PDF document, add images from imagelist as pages to PDF document, and save the PDF document to download folder. See image below.



i. Create a PDF document
try {
android.graphics.pdf.PdfDocument document = new android.graphics.pdf.PdfDocument();

int max = 0;
int[] allwidth = new int[imagelist.size()];

ii. Use a repeat block to get maximum width in list of images, and to get an array of width of all images.
The code used in the repeat block here is:
Bitmap mBitmap = FileUtil.decodeSampleBitmapFromPath(path1, 1024, 1024);

int width = mBitmap.getWidth();
allwidth[(int)n] = width;
if (width > max){
max = width;
}

iii. Use a repeat block for creating PDF pages for each image in imagelist.

In repeat block, use codes to convert file path from imagelist to Bitmap image, then draw the bitmap image on the canvas of the PDF page.
Bitmap mBitmap = FileUtil.decodeSampleBitmapFromPath(imagelist.get((int)n).get("pic").toString(), 1024, 1024);

android.graphics.pdf.PdfDocument.PageInfo pageInfo = new android.graphics.pdf.PdfDocument.PageInfo.Builder(max, mBitmap.getHeight(), (int)n + 1).create();

android.graphics.pdf.PdfDocument.Page page = document.startPage(pageInfo);

Canvas canvas = page.getCanvas();
canvas.drawColor(Color.WHITE);
canvas.drawBitmap(mBitmap, (max - allwidth[(int)n])/2 , 0, null);

document.finishPage(page);

iv. Set String save_path to the Download directory with filename as entered in edittext1.

v. Use write string... to file path ... block. This will add permissions to write external storage in Sketchware project.

vi. Save the pdf document to save_path using codes below.
java.io.FileOutputStream fout = new java.io.FileOutputStream(new java.io.File(save_path));

document.writeTo(fout);
document.close();
fout.close();
showMessage("File Saved");
} catch ( Exception e){
showMessage(e.toString());
}

11. That's all. Save and run the project.

Note:
1. The width of page here is set to the width of the image. If you need common width for all pages, find the maximum width from width of all images and use it as width of pdf page.

2. If there are too many images, running this task on main UI may freeze the app and may crash the app. In that case it will be better to do this task on a background thread.



Comments

  1. Hello. Good tips. App works well but crash when I load some images. Why ?

    ReplyDelete
  2. App crash when loading images from sd card

    ReplyDelete
  3. How to permit cleartext in webview
    It says ERR.CLEARTEXT.NOT.PERMITTED

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  4. 🙏sanjeev Sir, how to insert this file in the listview
    file link- https://bit.ly/2CJS7vw

    🙏please explain this topic🙏

    ReplyDelete
  5. how you did this blog with blogger bro? it is visible just by searching

    ReplyDelete
  6. 🙏 Thank you very much for the previous tutorial. 🙏
    🙏please🙏 Monsieur how the next page opens after swiping up in this video.

    Video URL - https://drive.google.com/file/d/10VHyzXMdp0izvvxxwsSUzmkDZ3oN1Z4z/preview

    pages url- http://demo.redtvlive.com/oxoo/v114/api/get_movies?api_secret_key=wv0e0d0jsl78pwgo63h7fhd9&&page=1
    page 2- http://demo.redtvlive.com/oxoo/v114/api/get_movies?api_secret_key=wv0e0d0jsl78pwgo63h7fhd9&&page=2
    page 3- http://demo.redtvlive.com/oxoo/v114/api/get_movies?api_secret_key=wv0e0d0jsl78pwgo63h7fhd9&&page=3

    Sir will create this JSON file in grid view. 🙏please🙏

    ReplyDelete
  7. INGLES
    Very good days. I HAVE SKETCHWARE 3.10 INSTALLED WHEN I ENABLE THE LIBRARIES I DO NOT WANT TO CREATE THE APK IT DOESN'T GIVE ME ERROR IT JUST GOES BACK TO THE HOME SCREEN. SEARCH ON GOOGLE AND I CANNOT FIND THE ANSWER. THANK YOU VERY MUCH

    ESPAÑOL
    Muy Buenos Días. Tengo INSTALADO SKETCHWARE 3.10 CUANDO HABILITO LAS LIBRERÍAS NO QUIERE CREAR LA APK NO ME DA ERROR SIMPLEMENTE SE VUELVE A LA PANTALLA DE INICIO. BUSQUE EN GOOGLE Y NO ENCUENTRO LA RESPUESTA. MUCHAS GRACIAS

    ReplyDelete
  8. Bro in step 8 I couldn't find the "length of" block

    ReplyDelete
  9. Java.lang.lligalArgument.execpted Page width must pe positive I have this error plz plz solve this

    ReplyDelete
  10. Next Time pls put project file also

    ReplyDelete
  11. Can I create Android app like the JPG to PDF files...

    ReplyDelete
  12. Sir Please, how to add a background task to this? Plz plz plz 🙏🏻🙏🏻🙏🏻🙏🏻🙏🙏🙏🙏

    ReplyDelete
  13. I am impressed with your work and skills visit also Crop Image Online Free .

    ReplyDelete
  14. When I take a picture, with the camera, how can I put this into the listview?

    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