The recently added Custom View in Sketchware can be used to create custom ListView. The steps you need to follow in order to create a custom ListView are given below.
1. In VIEW area of your sketchware project, add a ListView.
2. Add a new CustomView.
3. Now in properties of ListView, select the new view you added as customView.
4. Now in the VIEW area of CustomView, add a Linear (H) and a TextView.
5. In LOGIC area of your app, add a new list Map.
6. In onCreate event in your project, add items to the Map list using a single key. After adding items to list, setListCustomViewData of ListView to List Map (See image below).
7. In LOGIC area of your app add a new event ListView: onBindCustomView.
8. In event ListView: onBindCustomView, set the text of TextView in CustomView to the data from list Map.
9. If you want to implement some action on clicking any particular item in CustomView, use the When view... clicked block available at the place where new variables are added.
10. Save and run the project to see the Custom ListView.
The video below shows how multiple lists can be used in a single Custom ListView.
We know that it is not possible to add permissions in Sketchware, and since saving any file requires permissions to WRITE EXTERNAL STORAGE, it cannot be done in Sketchware.
But I have found a way to create text (.txt) files in Sketchware from contents of Edittext or Textview, and then share the file using intent. The file can also be saved directly to external storage by using ES File Explorer.
Follow the steps below to create and send text files from your Sketchware App.
1. Insert two Edittext widgets, say edittext1 and edittext2, in VIEW area of your sketchware project. One is for title and other for text.
2. Insert a Button and change it's text to 'Send'.
3. In LOGIC area of your project, in onButtonClick event, use add source directly block, and write the following code:
try { java.io.File myFile = new java.io.File(getExternalCacheDir() + "/" + edittext1.getText() + ".txt"); myFile.createNewFile(); java.io.FileOutputStream fOut = new java.io.FileOutputStream(myFile); java.io.OutputStreamWriter myOutWriter = new java.io.OutputStreamWriter(fOut); myOutWriter.append(edittext2.getText()); myOutWriter.close(); fOut.close(); Intent email = new Intent(Intent.ACTION_SEND); email.setType("*/*"); email.putExtra(Intent.EXTRA_STREAM, Uri.fromFile(new java.io.File(getExternalCacheDir() + "/" + edittext1.getText() + ".txt"))); startActivity(Intent.createChooser(email, "Send: Text File")); Toast.makeText(getBaseContext(), "File Created with name" + edittext1.getText() + ".txt", Toast.LENGTH_SHORT).show(); } catch (Exception e) { Toast.makeText(getBaseContext(), e.getMessage(), Toast.LENGTH_SHORT).show(); }
Note that in this code we get text from edittext1 and set it as file name, and we set text from edittext2 as file contents.
The code above creates a text file in external cache (which doesn't need permissions to write), and then shares the created text file using intent.
4. Save and run the project. You will be able to share the contents of edittext2 field as text file. And if you have ES file explorer, you can save the text file directly to sdcard.
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.
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.setProgressDrawable(getResources().getDrawable(R.drawable.submit)); seekbar1.setThumb(getResources().getDrawable(R.drawable.i_black)); Note that in this code 'submit' and 'i_black' are name of images being used. The images have to be added using image manager, before using this code.
Codes for Checkbox To change color of Checkbox button use the codes provided below in add source directly block in onCreate event.
checkbox1.getButtonDrawable().setColorFilter(Color.parseColor("#FF00FF"), PorterDuff.Mode.SRC_IN); Note that here checkbox1 is id of the Checkbox widget inserted in VIEW area (xml).
Codes for Switch To change color of Switch use the codes provided below in add source directly block in onCreate event.
In the new versions of Sketchware we can insert java code directly, which makes several new actions possible in Sketchware including notifications.
If you know the code, it is very easy to implement notifications in your android project. The code to be used is provided below.
In your Sketchware project, add an image (say imageiconxyz) which will be displayed as notification image.
Then choose the event on which you want to show notification (on button click, on image click, on Activity Create, etc.).
Suppose you want to display notification when a button is clicked. Then onButtonClick event use block add source directly and write the following code:
Notification.Builder mBuilder = new Notification.Builder(MainActivity.this); mBuilder.setSmallIcon(R.drawable.imageiconxyz); mBuilder.setContentTitle("title"); mBuilder.setContentText("text"); mBuilder.setDefaults( Notification.DEFAULT_SOUND | Notification.DEFAULT_VIBRATE); NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE); Intent notificationIntent = new Intent(getApplicationContext(), MainActivity.class); PendingIntent pendingIntent = PendingIntent.getActivity(getApplicationContext(), 0, notificationIntent, Intent.FLAG_ACTIVITY_NEW_TASK); mBuilder.setContentIntent(pendingIntent).setAutoCancel(true); notificationManager.notify(1, mBuilder.build()); The first underlined text 'MainActivity' is the name of the page on which you are using the code. Change it as per the name of the page or activity.
The second underlined text 'imageiconxyz' is name of the image which will act as notification icon. Change it as per the name of the image you have added.
The third underlined text 'title' is the title of the notification. Change it as per your requirement.
The fourth underlined text 'text' is the text shown as notification. Change it as per your requirement.
The last underlined text 'MainActivity.class' is the name of the activity or page which opens when the notification is clicked. Change it if you wish to open any other screen.
You can also set Custom View in Sketchware as notification by making little modifications to the code above. Suppose name of your Custom View is 'cview.xml'. Then add the following code just before the code provided above, to display it as notification:
RemoteViews contentView = new RemoteViews(getPackageName(), R.layout.cview);
Now in the code provided earlier, replace mBuilder.setContentTitle("title"); mBuilder.setContentText("text"); with mBuilder.setContent(contentView);
This will display the contents of Custom View as notification.
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 : DownPT.x = event.getX(); DownPT.y = event.getY(); StartPT = new PointF( img.getX(), img.getY() ); break; case MotionEvent.ACTION_UP : break; default : break; } return true; } });
Now save and run the project. You will be able to move the image with your finger.
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.setHorizantalScrollBarEnabled(false);
For ListView: listview1.setVerticalScrollBarEnabled(false);
For Spinner: spinner1.setVerticalScrollBarEnabled(false);
Note that in this code vscroll1, hscroll1, listview1, 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 inside or outside overlay or inset using one of the codes provided below:
vscroll1.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); vscroll1.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY); vscroll1.setScrollBarStyle(View.SCROLLBARS_INSIDE_INSET); vscroll1.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_INSET); The id used has to be as per the id of Layout or widget.
