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…

Play a video from its url

If you have a video in firebase database and you want to play it in a VideoView in Sketchware, follow the steps given below.

1. Create a new Activity PlayVideoActivity.

2. In View settings remove status bar and toolbar, and set screen orientation to both portrait and landscape.

3. Create a String variable url.

4. In onCreate, set url to the video url
For example:

5. In onCreate event:
// Define a FrameLayout.
FrameLayout layout = new FrameLayout(this);

FrameLayout.LayoutParams layoutparams=new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT, Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);

// Define VideoView and MediaController.
final VideoView vidview = new VideoView(this);
FrameLayout.LayoutParams vvlp = 
new FrameLayout.Layout…

BarChartView in Sketchware

In Sketchware project, if you have a List Map containing a key with numerical values, it can be displayed in a graph form using the BarChartView code created by me. Follow the steps given below to understand how to use it.

1. Create a new page graph.xml to display the bar chart.

2. On the page containing the List Map, add a button to move to In the event of Button onClick, save List Map in Intent put Extra key "list" by converting it to Json String and then move to

3. In graph.xml add a LinearV linear1.

4. In add a ListMap listmap.

5. In onCreate event use blocks to get json string in Intent extra key "list", and convert it to listmap. Then use codes to display this ListMap in BarChartView.

The code used in add source directly block is
BarChartView chart = new BarChartView(this, listmap, "totalConfirmed", "loc");
Here 'loc' is the key in listmap whose value…

Display loading page over WebView while loading

To display a page with a text and image over the WebView while it is loading, follow the steps given below.

1. Create a new project in Sketchware.

2. In main.xml, add a LinearV linear1.
* Inside linear1 add a WebView webview1. Set height of webview1 to wrap_content.
* Below webview1 add another LinearV linear2.
* For linear1 set padding to 0.
* Inside linear2 add ImageView imageview1, and a TextView textview1.
* For linear2 set gravity to center_horizontal, center_vertical, and alpha to 0.5.
* For webview1 change height to match_parent.

3. Switch On AppCompat and Design.

4. In, create a more block extra. In this more block declare a RelativeLayout rl and a SwipeRefreshLayout srl, using following codes.

RelativeLayout rl;
androidx.swiperefreshlayout.widget.SwipeRefreshLayout srl;


5. In onCreate event use following codes and blocks.
a. In an add source directly block put following codes:
rl = new RelativeLayout(this);
RelativeLayout.LayoutParams lparams = new RelativeLa…

Using downloadable fonts in Sketchware

This post demonstrates how to use the Downloadable Fonts feature introduced in Android O in Sketchware. Downloadable Fonts is a feature that allows apps to request a certain font from a provider instead of bundling it or downloading it themselves. This means, there is no need to bundle the font as an asset.

1. Create a new project in Sketchware.

2. Switch on AppCompat and design.

3. In main.xml add a spinner spinner1, and three TextViews textview1, textview2 and textview3.

4. Add a Shared preferences component spref:spref.

5. Add a String list font_list, and three String variables query, cert_string1, cert_string2.

6. In onCreate,

a. Add items to font_list using following code:
Copy code
font_list.addAll( Arrays.asList(new String[]{ "ABeeZee", "Abel", "Abhaya Libre", "Abril Fatface", "Aclonica", "Acme", "Actor", "Adamina", "Advent Pro", "Aguafina Script", "Akronim", "Aladi…

SwipeRefreshLayout to refresh WebView

Suppose you have an app which contains a WebView webview1 inside a LinearV linear1. In onCreate it loads a website and onBackPressed it goes to previous page.

To implement SwipeRefreshLayout in this app to reload the WebView, follow the steps given below.

1. Swith on AppCompat and design.

2. Create a more block extra and put codes to declare a SwipeRefreshLayout srl.
Copy code
} androidx.swiperefreshlayout.widget.SwipeRefreshLayout srl; {

3. In onCreate event, before loading url in WebView;
* define a new SwipeRefreshLayout srl,
* remove all views from linear1,
* add SwipeRefreshLayout to linear1,
* add WebView to SwipeRefreshLayout,
* setOnRefreshListener for the SwipeRefreshLayout,
* In onRefresh event of OnRefreshListener, load WebView getUrl in WebView using blocks.

Copy code
srl = new androidx.swiperefreshlayout.widget.SwipeRefreshLayout(this); linear1.removeAllViews(); linear1.addView(srl); srl.addView(webview1); srl.setOnRefreshListener( new androidx.swiperefreshlayout.widget.S…

Zoom images in Sketchware

To zoom images in Sketchware, we can create a new class ZoomableImageView and display the image in it. Follow the steps given below.

1. In the xml page add a LinearV linear1, with width and height as match_parent, and padding 0.

2. Add your image using image manager. For example image plants.

3. Create a new more block extra and put following codes in it.

Copy code
} public class ZoomableImageView extends ImageView { Matrix matrix = new Matrix(); static final int NONE = 0; static final int DRAG = 1; static final int ZOOM = 2; static final int CLICK = 3; int mode = NONE; PointF last = new PointF(); PointF start = new PointF(); float minScale = 1f; float maxScale = 4f; float[] m; float redundantXSpace, redundantYSpace; float width, height; float saveScale = 1f; float right, bottom, origWidth, origHeight, bmWidth, bmHeight; ScaleGestureDetector mScaleDetector; Context context; public ZoomableImageView(Context con…

Get all pdf files in device

To get a list of all pdf files in device, follow the steps given below.

1. Create a new Sketchware project.

2. In main.xml add a ListView listview1 and a ProgressBar progressbar1 inside a LinearV linear1.

3. Create a CustomView mycustom.xml. Select it as CustomView for listview1.

4. In mycustom.xml add a TextView textview1.

5. In the event onCreate, call the AsyncTask GetAllTask using following code:
(new GetAllTask()).execute();
6. Create two number variables n and r, and two String variables folder and folderName.

7. Create two List String folderList and fileList, and a List Map all_pdfs.

8. Create three more blocks:
i. extra
ii. getFileList in [filePath]
iii. searchFolders

9. In the More Block extra, use codes and blocks as shown below.

Here we perform following actions:
i. Define a new class AsyncTask GetAllTask.

private class GetAllTask extends AsyncTask<Void, Void, Void> {
protected void onPreExecute() {

ii. In onPreExecute, make progressbar1 VISIBLE.

iii. Use foll…

Encrypt and decrypt text

Here is a simple example of encryption and decryption in Sketchware. Follow the steps below.

1. Create a new project in Sketchware.

2. In main.xml add a LinearV linear1 inside a ScrollV vscroll1. Inside this add an EditText edittext1, add two Buttons button1 and button2, and two TextViews textview1 and textview2.

3. Create a More Block extra, here use an add source directly block and put following codes.


javax.crypto.KeyGenerator keyGenerator;
javax.crypto.SecretKey secretKey;
byte[] secretKeyen;
String strSecretKey;
byte[] IV = new byte[16];
byte[] cipherText;

public static byte[] encrypt(byte[] plaintext, javax.crypto.SecretKey key, byte[] IV) throws Exception{
javax.crypto.Cipher cipher = javax.crypto.Cipher.getInstance("AES");
javax.crypto.spec.SecretKeySpec keySpec = new javax.crypto.spec.SecretKeySpec(key.getEncoded(), "AES");
javax.crypto.spec.IvParameterSpec ivSpec = new javax.crypto.spec.IvParameterSpec(IV);
cipher.init(javax.crypto.Cipher.ENCRYPT_MODE, keySpec, iv…

Drag and drop in Sketchware

Here is an example of implementation of a simple drag and drop operation in Sketchware. Follow the steps given below.

1. Create a new project in Sketchware.
2. In main.xml, add a LinearH linear1 with width and height match_parent. Inside linear1 and a LinearV linear2 and a LinearH linear3.
For linear3 set background colour as grey.
Inside linear2 add three ImageViews with width and height 50, and scale type FIT_CENTER.
2. Add three Images and set them as images of ImageViews in linear2.
3. Add a Vibrator component vib.
4. Create two More Blocks: i. setLongClickListener to ImageView:imageview ii. drag_listener Note that setLongClickListener block contains an ImageView variable imageview.
5. Define more block setLongClickListener by using following codes: _imageview.setOnLongClickListener(new View.OnLongClickListener() { public boolean onLongClick(View v) { ClipData.Item item = new ClipData.Item(v.getTag().toString()); ClipData dragData = new ClipData(v.getTag().toString(), new String[]{ Cl…