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.