In order to create OptionsMenu in Sketchware, follow the steps given below.
1. Create a more Block extra in your project.
2. To define this more block extra use an add source directly block and put following code in it.
}
@Override
public boolean onCreateOptionsMenu (Menu menu){
menu.add(0, 0, 0, "Item 1");
menu.add(0, 1, 1, "Item 2");
menu.add(0, 2, 2, "Item 3");
return true;
}
Note that here the first } closes more block. Rest of the code is outside the more block extra. This is to code for onCreateOptionsMenu where three items are added to the menu.
Also note that 0, 1, and 2 are Id of the items added to the menu, and Item 1, Item 2, Item 3 are the title of the items added. Change the titles to whatever you want.
To display the OptionsMenu items as icons on the ActionBar, add the id of the images to the menu items. Suppose ic_settings_white is the icon for item 1. Then the code above will change as below.
3. After this add another add source directly block and put following code in it.
@Override
public boolean onOptionsItemSelected(MenuItem item){
switch (item.getItemId()){
case 0:
showMessage("Item 1 Clicked");
break;
case 1:
showMessage("Item 2 Clicked");
break;
case 2:
showMessage("Item 3 Clicked");
break;
case android.R.id.home:
showMessage("Home Button Clicked");
break;
}
return super.onOptionsItemSelected(item);
This is the code for onOptionsItemSelected. The app will show the messages as written in the code when any item from the OptionsMenu is selected.
Note that showMessage("Text"); works only in Sketchware and it is a short form of Toast messages.
4. Suppose you have three more pages apart from main.xml, namely page1.xml, page2.xml andpage3.xml. In order to open these when items in OptionsMenu are selected, follow the steps below.
a. Add three new More Blocks move1, move2, and move3.
b. Add an Intent component intent.
c. Define the more blocks. Use Intent setScreen blocks to move to different screens. See images below.
d. Now add the more blocks in the code at paragraph 2 above. The code for onOptionsItemSelected should now look as given below.
@Override
public boolean onOptionsItemSelected(MenuItem item){
switch (item.getItemId()){
case 0:
_move1();
break;
case 1:
_move2();
break;
case 2:
_move3();
break;
}
return super.onOptionsItemSelected(item);
5. If you want to enable 'home' button in Action Bar alongwith the OptionsMenu, follow the steps given below.
a. Add an add source directly block at the beginning of onCreate event, then put following code in it.
getActionBar().setDisplayHomeAsUpEnabled(true);
And to change the icon add icon ic_dehaze_white using Image manager and then add following after the code above.
b. Now in more Block extra, in onOptionsItemSelected add the case of selecting home button. The code for onOptionsItemSelected should now look as given below.
@Override
public boolean onOptionsItemSelected(MenuItem item){
switch (item.getItemId()){
case 0:
_move1();
break;
case 1:
_move2();
break;
case 2:
_move3();
break;
case android.R.id.home:
showMessage("Home Button Clicked");
break;
}
return super.onOptionsItemSelected(item);
6. Save and Run the project. Now you can see the home button as well as the OptionsMenu on the ActionBar.
Timer component and number variables can be used to add a Stopwatch to your Android App created in Sketchware. To create a Stopwatch App in Sketchware follow the steps below. 1. Start a new project in Sketchware . Fill app name, package name and app icon. 2. In VIEW area, insert a Textview and a Button widget. In Textview properties set layout_gravity as center_horizontal, text as 00:00:00.00, and text_size as 40sp. In Button properties set layout_gravity as center_horizontal, text as Start/Stop/Reset and text_size as 20sp. 3. In LOGIC area add a new timer component t . 4. In onCreate event, add five number variables , one each for hour, minutes, seconds, and milliseconds, and an extra variable for managing Button Click. Set all these number variables to 0. 5. Suppose the five number variables are named as h , m ,...
How to enable download in an app created with Sketchware? Suppose you have created an app in Sketchware which uses webview to open a site. You can seamlessly explore the site in your app. But the download links in the webview field do not work. But it is possible to make it work by exporting the source code. You can edit the code in either Android studio or Eclipse to add your desired features and then recompile it. I tried to do that but soon realized that setting up environment for development of Android app is not easy for a naive like me. But it can be done by code injection or by using another mobile app called Anacode. Enabling download from webview in Sketchware using add source directly block. 1. In VIEW area of your app insert a WebView (webview1). 2. In LOGIC area, in onCreate event, a. Add write String... to file path ... Block. This will add WRITE_EXTERNAL_STORAGE permission. b. Then add an add source directly block. In this block pu...
To create an EditText with animation features, we can use the EditText in a TextInputLayout which is a Layout interface in android.support.design.widget 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, LinearLayou...
Timer component and number variables can be used to add a Stopwatch to your Android App created in Sketchware. To create a Stopwatch App in Sketchware follow the steps below. 1. Start a new project in Sketchware . Fill app name, package name and app icon. 2. In VIEW area, insert a Textview and a Button widget. In Textview properties set layout_gravity as center_horizontal, text as 00:00:00.00, and text_size as 40sp. In Button properties set layout_gravity as center_horizontal, text as Start/Stop/Reset and text_size as 20sp. 3. In LOGIC area add a new timer component t . 4. In onCreate event, add five number variables , one each for hour, minutes, seconds, and milliseconds, and an extra variable for managing Button Click. Set all these number variables to 0. 5. Suppose the five number variables are named as h , m ,...
AIDE can be used to integrate Admob Ads to a Sketchware project. First export the source code of your sketchware android project and then follow the steps below to learn how to integrate Admob banner ads in AIDE. Prerequisites A Sketchware project AIDE with pro account key purchased Account in Google developer console Account in Admob Before placing admob ads in an app, the app needs to be uploaded to google play store, however test ads can be tried in any app. Always place the test ad ID before placing your ad unit ID. App ID and ad unit ID can be obtained by registering the app on Admob. But for using test ads no registration is required. Do not click on your own Ads. This code works in apps which do not use AppCompat and Design. Export the Sketchware project In Sketchware, under MY PROJECTS, go to project settings of the app to be exported, and click on Export to PC (Android Studio) . The exported file is a zip file. Create a new folder...
We can highlight a particular searched character sequence in a TextView or EditText field or any other text field by using Spannable. To use Spannable class to highlight a searched text in Sketchware Android Project, follow the steps given below. 1. In VIEW area of your project, add an EditText field ( edittext1 ) which will act as input field for search term. Add a TextView ( textview1 ) which will display the number of results found. And add another TextView ( textview2 ) or EditText (edittext2) field which will contain the text in which the word is to be searched. 2. In LOGIC area, in onCreate event set the text to be searched in TextView field. 3. If you want the app to search from any text added by user, use EditText instead textview2 in step no.1 and do not set the text in onCreate. 4. Add a new String variable text . Add three number variables total, len and y . 4. Add a new event edittext1 onTextChanged . 5. In the event edittext1 onTextChange...
This tutorial shows a Sketchware android project example in which a Notification is displayed when a Button is clicked and when the Notification is clicked, it opens a new Activity. 1. Create a new project in Sketchware. In VIEW area add an EditText edittext1 , and a Button button1 . 2. Using Image Manager add an images mail_white . This will be used as the Notification icon. 3. In Library manager switch on AppCompat and Design . 4. Create a new VIEW two.xml / TwoActivity.java . 5. Add a More Block: createChannel . 6. In More Block createChannel , use add source directly block and put following code: if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) { CharSequence name = "Channel name 1"; String description = "Notification channel"; int importance = NotificationManager.IMPORTANCE_DEFAULT; NotificationChannel channel = new NotificationChannel("id 1", name, importance); channel.setDescription(description); NotificationManager n...
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 = (andr...
To create a Stopwatch App in sketchware using Chronometer, follow the steps given below. 1. Create a new project in Sketchware. 2. In VIEW area add a LinearV with width and height as match_parent, and gravity as center_horizontal, center_vertical. • Inside this add a LinearH linear2 with width 240, height 240, padding 20, magin 8, and gravity center_horizontal, center_vertical. • Below linear2, add two Buttons start_button and pause_button . Set their margins as 8 and text as START and PAUSE respectively. 3. Create a more block extra . 4. In the more block extra , use an add source directly blocks and put codes to declare a long variable timeWhenStopped, and a Chronometer stopclock. } private long timeWhenStopped = 0; private Chronometer stopclock; { 5. Add 5 number variables mode , ZERO , RUNNING , STOPPED , PAUSED . 6. In onCreate event, set ZERO to 0, RUNNING to 1, STOPPED to 2, PAUSED to ...
1. Create a new app in Sketchware. 2. Apart from main.xml , add three new pages, list.xml , add.xml , password.xml . 3. In main.xml/MainActivity: i. add two TextViews: textview1 and textview2 . ii. Add following components: Intent i , SpeechToText spttxt , and SharedPreferences sp:sp . iii. In onCreate event, if some password is saved in SharedPreferences, make textview2 GONE, and set textview1 to empty. iv. In textview1 onClick event, if saved password is '-none' use Intent to move to ListActivity, else set SpeechToText start listening. v. In the event SpeechToText: onSpeechResponse , if result equals saved password, or if result equals 'ON' and no password is saved, use Intent to move to ListActivity, else FinishActivity. vi. In the event SpeechToText: onSpeechError , FinishActivity. 4. In Image Manager add images ic_add_white and ic_settings_white. 5. Create a...