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 Buttonbutton_open Buttonbutton_save EditTextedittext1 ListViewlistview1
3. Create a Custom View itemview.xml. In this view add ImageViewimageview1
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 doc…

Firebase Query to search data with value of a key

The example in this post uses Firebase Query to search for a specific username, entered by user in an EditText, in a list of all users.

1. The data to be searched is shown in image below. We will search the value of key "username".

2. In View area of your project, add an EditText edittext1, a Button button1, and a ListView listview1.
3. Create a Custom View user.xml. In this page, add an ImageView imageview1 and a TextView textview1 to display the details retrieved.
The ImageView here has width and height 40 and scale type CENTER_CROP. The linear containing them has Gravity center_vertical.
4. For listview1 select user.xml as CustomView.
5. Create a FirebaseDb component (user) specifying the data location (users) to be searched.
6. Add a String variable query, and a List Map result_users.
7. In onCreate event use FirebaseDb stop listening.
8. In button1 onClick, set String query to text in  edittext1. Then use code to search for query in the FirebaseDb component. The code u…

Replacing a color in image

To select a color in an image and replace it with a new color, follow the steps given below.

1. In main.xml, add two Buttons button_pick and button_replace, add an ImageView imageview1, add two LinearLayout linear_getcolor and linear_setcolor, add an EditText edittext1, and add a ProgressBar progressbar1.

2. Create a FilePicker imagepicker: image/* for picking image.

3. Create a String variable path and five number variables width, height, w, h, and n.

4. In onCreate, use blocks to make ProgressBar Gone, and setOnTouchListener for imageview1.

The code used is
imageview1.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
int eid = event.getAction();
switch (eid) {
case MotionEvent.ACTION_MOVE:
int x = (int)event.getX();
int y = (int)event.getY();
if (bitmap != null){
if (x<width && x>0 && y<height && y>0){
colorint = bitmap.getPixel(x, y);
case MotionEvent…

Firebase Login/Register with email verification

To verify the email address of a user registered in your firebase app in Sketchware, follow the steps given below.

1. In main.xml, add three EditText fields, edit_email, edit_username, and edit_password, and add two Buttons register and login.

2. Add a FirebaseAuth component fauth, a FirebaseDb component user:users, and an Intent component i.

3. Add a Map Variable map, a String variable username, and a Boolean variable emailVerified.

4. Create a new page verify_email.xml.

5. In, in onCreate event,
if user is logged in and email is verified move to ChatActivity or the home page of your app and Finish Activity. And if user is logged in and email in not verified move to VerifyEmailActivity. See image below.
The code use in add source directly block:
emailVerified = fauth.getCurrentUser().isEmailVerified();

6. In the event register button onClick,
if length of text in all EditText fields is more than 0, set String username to edit_username getText, and create new user wi…

Convert a View to pdf in Sketchware

To convert a LinearLayout along with its contents, into a pdf document, follow the steps given below.
1. Create a new project in Sketchware.

2. In View area add a LinearV linear1. Inside linear1, add contents for the pdf document page. For linear1, set background colour to WHITE or something else.

3. Create a String variable path.

4. Create a more block extra. In more block extra use following codes and blocks:

// Create OptionsMenu.

private static final int PDF = 1;
public boolean onCreateOptionsMenu(Menu menu) {
menu.add(Menu.NONE, PDF, 0, "toPdf").setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
return true;

// Add code for menu item selection.
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case PDF:
// Create pdf document and add linear1 as a page to it.
try { document = new; pageInfo = new…

Display video thumbnails in firebase chat

To upload and display video thumbnail in a firebase based chat in Sketchware, follow the steps given below.

1. On the chat page add a file picker to pick files (mime type */*).

2. Add an ImageView imageview1 for picking files.

3. In imageview1 onClick event use file picker to pick files.

4. Create a String variable path.

5. In file picker onFilesPicked event, set String path to the path of the file selected.

6. In the event of button1 onClick (send button), if String path is not empty, upload the file to Firebase storage.

7. Add a String variable thumb_String.

8. In the event Firebase storage onUpload success, if the file selected is a video, create thumbnail from the path, convert it to base64 String, and send the url of the video (using key "attachment") and the thumbnail in String form (using key "thumbnail")
 to firebaseDb.
The code used here is:
Bitmap bitmap =ThumbnailUtils.createVideoThumbnail(path, android.provider.MediaStore.Video.Thumbnails.FULL_SCREEN_KI…