Download a file from a web link in Sketchware

To download a file from any web url, we have to do following:
Define an AsyncTask which can do the download in background, i.e. in a thread different from the main UI thread. We need this because downloading large files on main thread may consume more memory and may lead the app to crash.Use HttpURLConnection to openConnection() for the url and create an InputStream for downloading the url.Create an OutputStream and write data from InputStream to File path in sdcard.Show download progress using onProgressUpdate method of AsyncTask.In onPreExecute() method of AsyncTask make ProgressBar VISIBLE.In onPostExecute method of AsyncTask, make ProgressBar GONE. To create such an app in Sketchware which can download file from link provided, follow the steps given below.
1. Create a new project in Sketchware. In VIEW area add an EditText edittext1 and a Button button1. Add a LinearH progresslinear, inside this add a circular ProgressBar progressbar1 and a LinearV containing a TextView textview2,…

TextInputLayout in Sketchware

To create an EditText with animation features, we can use the EditText in a TextInputLayout which is a Layout interface in library. In Sketchware we cannot add it in xml file but we can create it programmatically. Follow the instructions given below for a simple example.

1. In VIEW area of your project add two Linear horizontal linear2 and linear3, and a Button button1.

2. Switch On AppCompat and design.

3. Create a more block extra and define the block using an add source directly block. Put following code in it.
EditText edittext1, edittext2;

Here we declare two EditText fields, edittext1 and edittext2.

4. In onCreate event,
i. Use add source directly block and use codes to define edittext1, set it's LayoutParams, set it's hint, and set it's text color.
edittext1 = new EditText(this);
edittext1.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));

Retrieve Device Build Information in Sketchware

To retrieve Build information about the device we can use the android.os.Build class.

1. Create a new project in Sketchware.

2. In VIEW area add a TextView for each parameter to be retrieved. We can retrieve Device, Model, Product, Manufacturer, Brand, API level, Board, Bootloader, Display, Fingerprint, Hardware, Host, and Id.

3. Add following String variables: device, model, product, manufacturer, brand, api_level, board, boot, display, fingerprint, hardware, host, and id.

4. In onCreate event use add source directly block and put following code.
device = android.os.Build.DEVICE;
model = android.os.Build.MODEL;
product = android.os.Build.PRODUCT;
manufacturer = android.os.Build.MANUFACTURER;
brand = android.os.Build.BRAND;
api_level = android.os.Build.VERSION.SDK;
board = android.os.Build.BOARD;
boot = android.os.Build.BOOTLOADER;
display = android.os.Build.DISPLAY;
fingerprint = android.os.Build.FINGERPRINT;
hardware = android.os.Build.HARDWARE;
host = android.os.Build.HOST;
id = android.os.Bui…

Create Music Player app in Sketchware

To create a Music Player app in sketchware, follow the steps given below.

1. Create a new project in Sketchware.

2. In VIEW area on main.xml, add a ListView listview1 with height wrap_content, and weight 1. Add a SeekBar seekbar1, an ImageView imageview1, and three TextViews textview1, textview2, and textview3, as shown in the image below.

3. Create a CustomView mycustom.xml and add a TextView textview1, and an ImageView imageview1 in it. For listview1 select mycustom.xml as it's customView.

4. Add a MediaPlayer component mp, and a Timer component timer.

5. Create three more blocks MPcreate(pos), MPstart, and MPpause.

6. Add two number variables n and songPosition, a String variable currentfile, a List String musics and a List Map allmusic.

7. In onCreate event, use blocks as shown in image below.
Here we perform following actions:
i. Make imageview1 GONE.
ii. Set songPosition to -1.
iii. Get path of all files in default music folder (DIRECTORY_MUSIC) to List String musics.
iv. F…

Enable Fullscreen for Youtube videos in WebView

To enable fullscreen mode for YouTube videos in your sketchware project, follow the steps given below.

1. Create a new project in Sketchware.

2. In VIEW area add a WebView webview1.

3. Create a more block extra.

4. In the more block extra, use an add source directly blocks and put codes to define a new WebChromeClient class with name CustomWebClient.

public class CustomWebClient extends WebChromeClient {
private View mCustomView;
private WebChromeClient.CustomViewCallback mCustomViewCallback;
protected FrameLayout frame;

// Initially mOriginalOrientation is set to Landscape
private int mOriginalOrientation =;
private int mOriginalSystemUiVisibility;

// Constructor for CustomWebClient
public CustomWebClient() {}

public Bitmap getDefaultVideoPoster() {
if (MainActivity.this == null) {
return null; }
return BitmapFactory.decodeResource(MainActivity.this.getApplicationContext().getResources(), 2130837573); }

public void onShowCustomView(V…

VideoView in Sketchware

To add a VideoView to play videos picked from Sdcard follow following steps in Sketchware.

1. Create a new project in Sketchware.

2. In VIEW area add a Button button1 and a LinearLayout linear2.

3. Create a String List list, and a String variable str.

4. Add a FilePicker component fp with mime type video/*.

5. Create a more block extra.

6. In the more block extra, use an add source directly block and put codes to declare a VideoView vidview and an MediaController mediaControls.
VideoView vidview;
MediaController mediaControls;

7. In onCreate event, use add source directly blocks and put following codes:
i. Define the VideoView vidview, set it's LayoutParams, and add it to the linear 2.
vidview = new VideoView(this);
vidview.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));

ii. Define the MediaController, anchor it to the VideoView, and set it as the MediaController of the VideoVie…

SearchView for String list in Sketchware

To implement a SearchView for a simple ListView showing a String list in Sketchware, follow the steps given below.

1. Create a new project in Sketchware.

2. In VIEW area add a ListView listview1.

3. Switch On AppCompat and Design.

4. Create a String List list.

5. Create a more block extra.

6. In the more block extra, use an add source directly block and put codes to declare a SearchView searchview and an ArrayAdapter adapter. After that add the SearchView as an OptionsMenu item.
} searchview;
ArrayAdapter<String> adapter;
public boolean onCreateOptionsMenu( Menu menu) {
return true;

7. In onCreate event, add items to the String List list.
8. After adding items to the list use add source directly blocks and put following codes:
i. Define the ArrayAdapter and set it as adapter of ListView.
adapter = new ArrayAdapter<String>(t…

Create PopupWindow in Sketchware

The CustomView can be used to create a custom PopupWindow in Sketchware, by using simple codes.

Follow the steps below to create a custom PopupWindow.

1. In VIEW area of your project add a new CustomView 'myview.xml'.

2. Design the CustomView the way you want your custom PopupWindow to look like.

In the image above, I have added four TextViews, of which two act as buttons (namely 'textview3' and 'textview4').

3. Choose the event on which you want to show the PopupWindow. It can be onBackPressed or onButtonClick, etc.

4. On the event when dialog is to be shown, use add source directly blocks to create and show the PopupWindow.

In the image above I have added the code to button1 onClick event. The code used is explained below.

a) First create a View from the CustomView layout file (myview.xml) which will be used as PopupWindow.
View popupView = getLayoutInflater().inflate(R.layout.myview, null);

Note that here 'myview' is name of the CustomView xml file.

Create a PDF reader android App in Sketchware

To create a simple pdf reader in Sketchware follow the instructions given below.
1. Create a new project in Sketchware and create a VIEW as shown in image below: linear2: A LinearH for the buttons/tools. linear3: A LinearV for displaying images. Set it's padding to 0. button1: A Button for picking PDF files. edittext1: An EditText for displaying the page number. Set it's input type to numberSigned. textview4: A TextView for displaying total number of pages. textview3: A Button to move to page number entered in edittext1. textview1: A Button to move to previous page. textview2: A Button to move to next page.
2. Remove Toolbar and Status Bar of this View to make it full screen.
3. Add a File Picker component file_picker: application/pdf.
4. Add two number variables page and pageCount, and a String variable pdfFile. Also add a String list.
5. Add two more blocks: extra and display page(i).
6. In onCreate event use add source directly block and put following code. touch = new ZoomableImag…