Posts

Showing posts with the label Sketchware

Share an image from an ImageView

To share an image from an ImageView in your Sketchware Android project, in VIEW area add a Button button1, which will act as a share button. In the event of on button1 click, use an add source directly block and put following code in it: Bitmap bm = ((android.graphics.drawable.BitmapDrawable) imageview1.getDrawable()).getBitmap(); try { java.io.File file = new java.io.File(getExternalCacheDir() + "/image.jpg"); java.io.OutputStream out = new java.io.FileOutputStream(file); bm.compress(Bitmap.CompressFormat.JPEG, 100, out); out.flush(); out.close(); } catch (Exception e) { showMessage(e.toString()); } Intent iten = new Intent(android.content.Intent.ACTION_SEND); iten.setType("*/*"); iten.putExtra(Intent.EXTRA_STREAM, Uri.fromFile(new java.io.File(getExternalCacheDir() + "/image.jpg"))); startActivity(Intent.createChooser(iten, "Send image")); Now save and run the project. You should be able to share the image from imageview1.

Loading​ image from gallery to ImageView in Sketchware

Image
To load an image from gallery to an ImageView in Sketchware app, follow the steps given below. 1. In VIEW area of Sketchware project add a Button button1 , and an ImageView imageview1 . 2. Set an image as default image of imageview1 . 3. Create a new FilePicker picker component for picking images. 4. Now create a new String List list . 5. In the event  on button1 Click  , use the block FilePicker picker pick files. This will open the gallery when button1 is clicked, and allow users to pick any image. 6. In EVENT area add a new event FilePicker onFilesPicked under Component section. 7. In the event  FilePicker onFilesPicked  use the blocks: ImageView imageview1 set image from file path .... and get at 0 of List String : filePath as shown in image below, to set the selected image as image of imageview1 . 8. Save and Run the project. Now when the user clicks button1 , he can browse through gallery and select an image. The sel...

Custom Toast message using CustomView in Sketchware

Image
To create a custom Toast message in Sketchware, follow the steps given below. 1. In your Sketchware android project, in VIEW area, create a new CustomView with name custom1. In this CustomView add a LinearH linear1 and a TextView textview1. Customize the textview1 and linear1 as per your requirement. 2. In LOGIC area, add a new More Block with name customToast(String _text) as shown in image below. 3. Next define this customToast Block. In event customToast MoreBlock use add source directly block, and in the block, write codes as described below. First define a new LayoutInflater and use it to create a View from the CustomView. LayoutInflater inflater = getLayoutInflater(); View toastLayout = inflater.inflate(R.layout.custom1, null); Initialize textview1 and linear1 used in CustomView. TextView textview1 = (TextView) toastLayout.findViewById(R.id.textview1); LinearLayout linear1 = (LinearLayout) toastLayout.findViewById(R.id.linear1); Set the text of tex...

Get list of app icons and app names of all installed apps in Sketchware

Image
We can create a list of app names, app icons, app versions and app package names from information received using PackageInfo class. Follow the steps below to create a list of all installed apps, with app name, app icons, package name, version name and version code. 1. In VIEW area of your sketchware project, in main.xml add a ListView. 2. Add a new CustomView custm.xml and in this add an ImageView and four TextViews. 3. For the ImageView​ set width and height as 60dp and scale_type as FIT_XY. 4. In main.xml, for ListView select custm as customView. 5. In LOGIC area, add four List String (list11, list12, list13, and list14), add a List Map (list1), and an Intent component i. These four will act as list of app name, package name, version name, and version code. 6. In  onCreate  event, add an add source directly block. Inside the block add following code. List<android.content.pm.PackageInfo> listn = getApplicationContext().getPackageMa...

Check if an app is installed, and get it's version in Sketchware

Image
We can check if an app is installed or not by using it's package name in simple codes in Sketchware. Check if an app is installed or not We can get information about any installed app from it's package name, by using PackageManager and PackageInfo methods. PackageInfo provides Overall information about the contents of a package. This corresponds to all the information collected from AndroidManifest.xml. In onCreate event in LOGIC of your app, use an add source directly block and add following code: boolean isAppInstalled = appInstalledOrNot(" com.besome.sketch "); if(isAppInstalled) { showMessage(" Sketchware app is installed "); } else { showMessage(" Sketchware is not installed ");} Create a More Block  extra . In the more block  extra , use an  add source directly  block and put following codes: } private boolean appInstalledOrNot(String uri) { android.content.pm.PackageManager pm = getPackageManager(); try { pm.getPackageI...

Control device media volume using Seekbar in Sketchware App

Image
The Seekbar can be set to control media volume of device, when any media is playing, with the use of simple codes in add source directly block in Sketchware. In your Sketchware project, in   VIEW area add a TextView ( textview1 ) and a SeekBar ( seekbar1 ). Set the progress of Seekbar to 12. In LOGIC area, in onCreate event add following code in end using add source directly block: audioManager = (AudioManager) getSystemService(Context. AUDIO_SERVICE); seekbar1.setMax(audioManager. getStreamMaxVolume( AudioManager.STREAM_MUSIC)); Create a More block and put following code in it using an add source directly block. } AudioManager audioManager; private void nothing() { In Seekbar onProgressChanged event add following code using add source directly block: textview1.setText("Music Volume : " + _progressValue); audioManager.setStreamVolume( AudioManager.STREAM_MUSIC, _progressValue, 0); That's all. Save and run the project. You sh...

How to create an image from a View and save it in Sketchware

Image
Using codes in add source directly block in Sketchware, we can create bitmap images from any View (like EditText, TextView, LinearLayout, WebView, etc.) in android app. The bitmap images can then be saved to externalcache or to external storage if the permissions to WRITE EXTERNAL STORAGE is added. To Create an app which can create images from any View and share it, follow the steps given below. 1. Start a new Sketchware project. In VIEW area add an LinearLayout ( linear1 ) containing things to be converted to an image, and a Button ( button1 ) for converting linear1 to image.. If you want to preview the image add an ImageView also. 2. In LOGIC area of project, create a More Block  saveView[View:view]. Here use an add source directly block and add following code: Bitmap returnedBitmap = Bitmap.createBitmap(_view.getWidth(), _view.getHeight(),Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(returnedBitmap); android.graphics.drawable.Drawable bgDrawable =_view.get...

How to change color of Seekbar, Checkbox, and Switch in Sketchware?

Image
The color of various widgets can be changed programmatically with simple codes. Provided below are a few codes which can be used in Sketchware to change the color of Seekbar, Checkbox and Switch. Codes for Seekbar To change color of Seekbar progress and Seekbar thumb use the codes provided below in add source directly block in onCreate event. seekbar1.getProgressDrawable().setColorFilter(Color.parseColor("#FF00FF"), PorterDuff.Mode.SRC_IN); seekbar1.getThumb().setColorFilter(Color.parseColor("#FF00FF"), PorterDuff.Mode.SRC_IN); Note that in the code above seekbar1 is the name or id of the Seekbar inserted in VIEW area. The Seekbar thumb can be made invisible by using 00 for AA in code #AARRGGBB in color code. So code for no thumb may look like: seekbar1.getThumb().setColorFilter(Color.parseColor("#00FF00FF"), PorterDuff.Mode.SRC_IN); We can also use an image as Seekbar progress and Seekbar thumb, by using following code: seekbar1....

Code for implementing Notifications in Sketchware

Image
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); Notifi...

Code for moving or dragging an image in sketchware android project

Image
Now with the introduction of add source directly block in Sketchware, several such actions are possible which were not possible earlier. One such action is dragging an image by touching it. It is very simple to move an image with movement of finger. First insert an ImageView in VIEW area, inside any Layout. Name it as img . Upload image using image manager and set the image in ImageView. After that in LOGIC area in onCreate event, use operator block add source directly , and add the following code: img.setOnTouchListener(new OnTouchListener() { PointF DownPT = new PointF(); PointF StartPT = new PointF(); @Override public boolean onTouch(View v, MotionEvent event) { int eid = event.getAction(); switch (eid) { case MotionEvent.ACTION_MOVE : PointF mv = new PointF( event.getX() - DownPT.x, event.getY() - DownPT.y); img.setX((int)(StartPT.x+mv.x)); img.setY((int)(StartPT.y+mv.y)); StartPT = new PointF( img.getX(), img.getY() ); break ; case MotionEvent.ACTION_DOWN : DownP...

Few codes to modify scrollbar in Sketchware

In Sketchware very limited modifications can be made to the scrollbar. Provided below are a few codes which work in Sketchware. 1. Make the scrollbar invisible The scrollbar of Scrollview, ListView​, or Spinner can be made invisible by using following code in onCreate event by using add source directly block. For vertical ScrollView: vscroll1.setVerticalScrollBarEnabled(false); For horizontal ScrollView: hscroll1.setHorizontalScrollBarEnabled(false); For ListView: listview1.setVerticalScrollBarEnabled(false); For Spinner: spinner1.setVerticalScrollBarEnabled(false); For WebView: webview1.setVerticalScrollBarEnabled(false); webview1.setHorizontalScrollBarEnabled(false); Note that in this code vscroll1, hscroll1, listview1, webview1 and spinner1 are id of the Layout or widget inserted in VIEW area. This has to be changed according to the id of the Layout or widget whose scrollbar is to be removed. 2. Change position of scrollbar The scrollbar can be positioned ...

How to change status bar color in Sketchware?

Image
Earlier code injection method was required for changing status bar color in sketchware. But now in newer versions of sketchware it can easily be done using add source directly block. To change the status bar color in sketchware project, insert add source directly block in onCreate event in LOGIC of the project, and then write the following code. Window w = this.getWindow(); w.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); w.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); w.setStatusBarColor(Color.parseColor("#000000")); Change the hex color code in last line of the code as per the requirement. It will change color of status bar to the color code provided in the code above. This code has to be used on each screen of the app. Note that this code works in Android versions 5 and above. When the app is used in lower versions, it may crash the app. Therefore, we should use if..else.. to apply this code in compatible ver...

How to create a dictionary app in Sketchware?

Image
An android app for a dictionary can be created in sketchware using File:shared preferences component. Follow the steps below to create a dictionary app. 1. Start a new project in Sketchware. 2. In VIEW area of project, insert a Linear (H) with Edittext , and a Linear (V) with a ListView and two Textviews . 3. In LOGIC area add a new File (shared preference) component. 4. Go to onCreate event and more blocks named Awords , Bwords , Cwords, etc. 5. Also add a string list and a number variable . 6. In Awords, sequentially add words starting with letter A to file with an integer as key; then add meaning of each word to file with the word itself as key. Similarly add words and meanings to file for defining Bwords, Cwords, etc. 7. In onCreate event, add all words to file by using more blocks.  Also add all words to the list and ListView . Use blocks as shown in the image below. Important update : It is recommended not to use the if...else...