Posts

Age Calculator App in Sketchware

Image
To create an Age Calculator App using DatePickerDialog in Sketchware follow the steps given below. 1. In VIEW area of your sketchware android project, insert three TextViews textview_dob , textview_age_days , textview_age , and an ImageView  imageview1 . 2. Create a more block  extra . 3. In the more block  extra  use  add source directly  block and put following code. } public static class DatePickerFragment extends androidx.appcompat.app.AppCompatDialogFragment implements DatePickerDialog.OnDateSetListener { @Override public Dialog onCreateDialog(Bundle savedInstanceState) { final Calendar c = Calendar.getInstance(); int year = c.get(Calendar.YEAR); int month = c.get(Calendar.MONTH); int day = c.get(Calendar.DAY_OF_MONTH); return new DatePickerDialog(getActivity(), this, year, month, day); } public void onDateSet(DatePicker view, int year, int month, int day) { int mon = month +1; Calendar now = Calendar.getInstance(); Calendar birthDay = Ca...

TimePickerDialog in Sketchware

Image
To create a TimePickerDialog in Sketchware android project follow the steps given below. 1. In VIEW area of your sketchware android project, insert a LinearH and inside it insert a TextView  textview1 , and a Button  button1 . For textview1 write text as ' 00:00 '. 2. Create a more block extra . 3. In the more block extra use add source directly block and put following code. } public static class TimePickerFragment extends DialogFragment implements TimePickerDialog.OnTimeSetListener { @Override public Dialog onCreateDialog(Bundle savedInstanceState) { final Calendar c = Calendar.getInstance(); int hour = c.get(Calendar.HOUR_OF_DAY); int minute = c.get(Calendar.MINUTE); return new TimePickerDialog(getActivity(), this, hour, minute, android.text.format.DateFormat.is24HourFormat(getActivity())); } public void onTimeSet(TimePicker view, int hourOfDay, int minute) { TextView textview101 = getActivity().findViewById(R.id.textview1); textview101.s...

Automatic text switching using ViewFlipper in Sketchware

Image
In Sketchware, to display a list of sentences one by one by automatically switching to next sentence every few seconds, follow the steps given below. 1. In Sketchware project, in main.xml add a LinearLayout linear1 , with width and height as MATCH_PARENT. Set a beautiful image as background of linear1. 2. Add a CustomView customview.xml. In this add a TextView textview1 , with text size 40, width and height MATCH_PARENT, and gravity center_horizontal, center_vertical. 3. Add a String List string_list . 4. In onCreate , one by one add sentences to this list. 5. After adding items to string_list, use add source directly block and put following code in it. ViewFlipper viewFlipper = new ViewFlipper(this); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); layoutParams.setMargins(20, 20, 20, 20); layoutParams.gravity = Gravity.CENTER; viewFlipper.setLayoutParams(layoutPar...

TextInputLayout in Sketchware

Image
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 a Linear vertical  linear7  and inside this add three EditText fields  edit_email, edit_username, and edit_password . For the three EditText fields set hint as Email, Username and Password respectively. 2. Switch On AppCompat and design . 3. In onCreate event, i. Use codes to remove all Views from linear7 . linear7.removeAllViews(); ii. Define a TextInputLayout textinput1 , and add edit_email to it. com.google.android.material.textfield.TextInputLayout textinput1 = new com.google.android.material.textfield.TextInputLayout(this); textinput1.addView(edit_email); iii. Define a TextInputLayout textinput2 , and...

Retrieve Device Build Information in Sketchware

Image
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 = a...

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(...

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. ...

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 L...

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...

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 s...