Sketchware Help

The example in this post uses Firebase Query to search for a specific username, entered by user in an EditText, in a list of all users. 1. The data to be searched is shown in image below. We will search the value of key "username". 2. In View area of your project, add an EditText edittext1 , a Button button1 , and a ListView listview1 . 3. Create a Custom View user.xml . In this page, add an ImageView imageview1 and a TextView textview1 to display the details retrieved. The ImageView here has width and height 40 and scale type CENTER_CROP. The linear containing them has Gravity center_vertical. 4. For listview1 select user.xml as CustomView. 5. Create a FirebaseDb component ( user ) specifying the data location ( users ) to be searched. 6. Add a String variable query , and a List Map result_users . 7. In onCreate event use FirebaseDb stop listening. 8. In button1 onClick , set String query to text in  edittext1 . Then ...

To select a color in an image and replace it with a new color, follow the steps given below. 1. In main.xml, add two Buttons button_pick and button_replace , add an ImageView imageview1 , add two LinearLayout linear_getcolor and linear_setcolor , add an EditText edittext1 , and add a ProgressBar progressbar1 . 2. Create a FilePicker imagepicker : image/* for picking image. 3. Create a String variable path and five number variables width , height , w , h , and n . 4. In onCreate , use blocks to make ProgressBar Gone, and setOnTouchListener for imageview1 . The code used is imageview1.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { int eid = event.getAction(); switch (eid) { case MotionEvent.ACTION_MOVE: int x = (int)event.getX(); int y = (int)event.getY(); if (bitmap != null){ if (x<width && x>0 && y<height && y>0){ colorint = bitmap.getPixel(x, y); linear_getc...

To verify the email address of a user registered in your firebase app in Sketchware, follow the steps given below. 1. In main.xml , add three EditText fields, edit_email , edit_username , and edit_password , and add two Buttons register and login . 2. Add a FirebaseAuth component fauth , a FirebaseDb component user:users , and an Intent component i . 3. Add a Map Variable map , a String variable username , and a Boolean variable emailVerified . 4. Create a new page verify_email.xml . 5. In MainActivity.java , in onCreate event, if user is logged in and email is verified move to ChatActivity or the home page of your app and Finish Activity. And if user is logged in and email in not verified move to VerifyEmailActivity . See image below. The code use in add source directly block: emailVerified = fauth.getCurrentUser().isEmailVerified(); 6. In the event register button onClick , if length of text in all EditText fields is more than 0, set String username to edit_...

To convert a LinearLayout along with its contents, into a pdf document, follow the steps given below. 1. Create a new project in Sketchware. 2. In View area add a LinearV linear1 . Inside linear1 , add contents for the pdf document page. For linear1 , set background colour to WHITE or something else. 3. Create a String variable path . 4. Create a more block extra . In more block extra use following codes and blocks: // Create OptionsMenu. } private static final int PDF = 1; @Override public boolean onCreateOptionsMenu(Menu menu) { menu.add(Menu.NONE, PDF, 0, "toPdf").setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS); return true; } // Add code for menu item selection. @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case PDF: // Create pdf document and add linear1 as a page to it. try { android.graphics.pdf.PdfDocument document = new android.graphics.pdf.PdfDocument(); android.graphics.pdf.PdfDocume...

To upload and display video thumbnail in a firebase based chat in Sketchware, follow the steps given below. 1. On the chat page add a file picker to pick files (mime type */*). 2. Add an ImageView imageview1 for picking files. 3. In imageview1 onClick event use file picker to pick files. 4. Create a String variable path . 5. In file picker onFilesPicked event, set String path to the path of the file selected. 6. In the event of button1 onClick (send button), if String path is not empty, upload the file to Firebase storage. 7. Add a String variable thumb_String . 8. In the event Firebase storage onUpload success , if the file selected is a video, create thumbnail from the path , convert it to base64 String, and send the url of the video (using key "attachment") and the thumbnail in String form (using key "thumbnail")  to firebaseDb. The code used here is: Bitmap bitmap =ThumbnailUtils.createVideoThumbnail(path, android.provider.MediaS...

If you have a video in firebase database and you want to play it in a VideoView in Sketchware, follow the steps given below. 1. Create a new Activity PlayVideoActivity . 2. In View settings remove status bar and toolbar, and set screen orientation to both portrait and landscape. 3. Create a String variable url . 4. In onCreate , set url to the video url. 5. In onCreate event: // Define a FrameLayout. FrameLayout layout = new FrameLayout(this); FrameLayout.LayoutParams layoutparams=new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT, Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL); layout.setLayoutParams(layoutparams); // Define VideoView and MediaController. final VideoView vidview = new VideoView(this); FrameLayout.LayoutParams vvlp =  new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.WRAP_CONTENT); vidview.setLayoutParams(vvlp); final MediaController mediaC...

In Sketchware project, if you have a List Map containing a key with numerical values, it can be displayed in a graph form using the BarChartView code created by me. Follow the steps given below to understand how to use it. 1. Create a new page graph.xml to display the bar chart. 2. On the page containing the List Map, add a button to move to GraphActivity.java . In the event of Button onClick , save List Map in Intent put Extra key "list" by converting it to Json String and then move to GraphActivity.java . 3. In  graph.xml  add a LinearV  linear1 . 4. In  GraphActivity.java  add a ListMap  listmap . 5. In  onCreate  event use blocks to get json string in Intent extra key "list", and convert it to listmap . Then use codes to display this ListMap in BarChartView. The code used in add source directly block is BarChartView chart = new BarChartView(this, listmap, "totalConfirmed", "loc"); linear1.addView(chart); Here 'l...

To display a page with a text and image over the WebView while it is loading, follow the steps given below. 1. Create a new project in Sketchware. 2. In main.xml , add a LinearV linear1 . * Inside linear1 add a WebView webview1 . Set height of webview1 to wrap_content . * Below webview1 add another LinearV linear2 . * For linear1 set padding to 0. * Inside linear2 add ImageView imageview1 , and a TextView textview1 . * For linear2 set gravity to center_horizontal , center_vertical , and alpha to 0.5. * For webview1 change height to match_parent . 3. Switch On AppCompat and Design . 4. In MainActivity.java , create a more block extra . In this more block declare a RelativeLayout rl and a SwipeRefreshLayout srl, using following codes. } RelativeLayout rl; androidx.swiperefreshlayout.widget.SwipeRefreshLayout srl; { 5. In onCreate event use following codes and blocks. a. In an add source directly block put following codes: rl = new RelativeLayout(th...