Posts

Enable Fullscreen for Youtube videos in WebView

Image
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 = android.content.pm.ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE;
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

Image
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));
linear2.addView(vidview);

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

SearchView for String list in Sketchware

Image
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.
}
android.support.v7.widget.SearchView searchview;
ArrayAdapter<String> adapter;
@Override
public boolean onCreateOptionsMenu( Menu menu) {
menu.add(0,0,0,"search").setActionView(searchview).setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
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

Image
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

Image
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…

A Flash Light App in Sketchware

Image
To create a Torch Flashlight application for Android with Sketchware follow the steps given below.

1. Create a new project in Sketchware. In VIEW area add an ImageView imageview1. Set it's width and height to 100, and scale type to FIT_XY.

2. Using Image Manager add two images ic_flash_on_black and ic_flash_off_black.

3. Set ic_flash_off_black as the image of imageview1.

4. In Library manager switch on AppCompat and Design.
5. Add a Camera component.
6. Add two Boolean variables: flashLightStatus and hasCameraFlash.
7. Add two More Blocks: flashLightOn and flashLightOff.

8. In onCreate event, use add source directly block and put following code: hasCameraFlash = getPackageManager(). hasSystemFeature(PackageManager.FEATURE_CAMERA_FLASH);
9. In More Block flashLightOn, use add source directly block and put following code: android.hardware.camera2.CameraManager cameraManager = (android.hardware.camera2.CameraManager) getSystemService(Context.CAMERA_SERVICE); try { String cameraId = came…

Display url source code or online text file in android TextView

Image
To display an online text file or source code of any web url, in a TextView, we have to do following:
Create a URL object from the String representation.Use openStream() method to open a connection to this URL and and get the InputStream for reading from that connection.Create a new BufferedReader, using a new InputStreamReader with the URL input stream.Read the text, using readLine() method of BufferedReader. But this cannot be done directly in an android project because android apps do not allow networking operation on its main UI thread.
Therefore we need to use AsyncTask class, which allows us to perform background operations and publish results on the UI thread.
To create such an online text file reader app in sketchware, follow the steps given below:
1. Create a new project in Sketchware. In VIEW area add a LinearV inside a ScrollV. In this add an EditText edittext1 (for writing URL), a Button button1, and a TextView textview1 (for displaying result).
2. Add a WebView loadUrl bl…

Speech Recognition: Speech to text in Sketchware

Image
We can implement Speech recognition using codes in add source directly block in Sketchware. Follow the steps below to implement Speech recognition in Sketchware.

1. Create a new android project in Sketchware.

2. In VIEW area add a Button button1 and an EditText edittext1 (or a TextView).

3. Add a new FilePicker component fp.

4. Add a new More Block extra.

5. To define this block extra, use an add source directly block and put following code in it:
}
public static final int REQ_CODE_SPEECH_INPUT = 1;
{

6. In the event button1 onClick, use an add source directly block and put following code:
Intent intent = new Intent(android.speech.RecognizerIntent.ACTION_RECOGNIZE_SPEECH); intent.putExtra(android.speech.RecognizerIntent.EXTRA_LANGUAGE_MODEL, android.speech.RecognizerIntent.LANGUAGE_MODEL_FREE_FORM); intent.putExtra(android.speech.RecognizerIntent.EXTRA_LANGUAGE, Locale.getDefault()); intent.putExtra(android.speech.RecognizerIntent.EXTRA_PROMPT, "Speak Now");
try { startActivityF…

Create a simple quiz app using Json in Sketchware

Image
To create a simple quiz app using Json String in Sketchware, follow the steps given below.

1. Create a json array containing all the questions and options. Each object in the array should contain a question with key 'ques', four options for the question with keys 'a', 'b', 'c' and 'd', and the correct answer with key 'ans'.

[
{
"ques" : "The larynx in adults lies in front of hypopharynx opposite the...",
"a" : "second to fifth cervical vertebrae",
"b" : "fifth to seventh cervical vertebrae",
"c" : "third to sixth cervical vertebrae",
"d" : "first two cervical vertebrae",
"ans" : "c"
},

{
"ques" : "Which of the following is the largest cartilage of larynx?",
"a" : "thyroid cartilage",
"b" : "cricoid cartilage",
"c" : "arytenoid cartilages",
"d" :…