Posts

Creating block to get FirebaseDb data to Map

Image
1. This post shows how to create a block to get FirebaseDb data to Map variable. 2. In Sketchware pro, in Settings, go to Block Manager. 3. Add new pallete 'New Firebase' and select color. 4. Inside pallete, add new block. 5. Configure the block properties as shown below. Name Firebase to Map Type if block (c) Type name Firebase to Map Color #9C27B0 Spec FirebaseDb %s.inputOnly getDataTo %m.varMap Code %1$s.addValueEventListener(new ValueEventListener() { @Override public void onDataChange(DataSnapshot _dataSnapshot) { %2$s = _dataSnapshot.getValue(new GenericTypeIndicator<HashMap<String, Object>>(){}); %3$s } @Override public void onCancelled(DatabaseError _databaseError) { } }); 6. Save it. 7. Refresh and use the block.

Simple Firebase Login Page in Sketchware Pro

Image
1. This post will show a login page using firebase in Sketchware android project. 2. Create a new project in Sketchware. 3. Switch on AppCompat and design. 4. Switch on Firebase by importing google_services.json from your Firebase console project settings. 5. In your Firebase project, in Authentication, enable Email as Sign-in-method. 6. In main.xml , add TextView text_title , EditText edit_email , edit_password , edit_username , TextView forgot_pwd , Button login , and TextViews change_mode , and text_verify . See image below. 7. In components add, FirebaseAuth fauth , FirebaseDb users:users , Intent i , and Dialog dialog . 8. Add a new page posts.xml . Enable drawer for this page. In drawer add textview_username ,  textview_email , and textview_logout . 9. In MainActivity , add two boolean variables login_mode , and emailVerified , add two String variables username , and user_id , and add a Map variable map . 10. Add a more block setLoginMode (boolean loginMode). Put following ...

DrawingView with share image in Sketchware Pro

Image
1. This example shows how to create a DrawingView in Sketchware. 2. Create a new project in Sketchware. 3. Switch On AppCompat and design . 4. In View manager, deselect toolbar for main.xml. 5. In java/Kotlin manager: a. Add a file DrawingView.java and put following codes in it. package com.sanju.drawingview; import android.view.View; import android.graphics.Bitmap; import android.graphics.Paint; import android.graphics.Path; import android.graphics.Canvas; import android.content.Context; import android.util.AttributeSet; import android.graphics.Color; import android.view.MotionEvent; import android.graphics.PorterDuff; import java.util.ArrayList; public class DrawingView extends View { private Bitmap mBitmap; private Canvas mCanvas; private Paint mBitmapPaint; private Paint mPaint; private Paint circlePaint; private Path circlePath; private Path mPath; private float mX, mY; private static final float TOUCH_TOLERANCE = 4; private ArrayLi...

Highlight.js in Sketchware

Image
1. This example shows how to use highlight.js library to display highlighted code in WebView. 2. In main.xml, add two Spinners spinner1 and spinner2 , add an EditText edittext1 , and a Button button1 . 3. In permission manager, add INTERNET permissions. 4. Add an Intent component intent . 5. Add two List String code_languages and css_links . 6. In onCreate , * Add all languages to code_languages using following code and display it in spinner1. String[] languages = { "Html", "CSS", "C", "Cpp", "Rust", "Go", "Zig", "Java", "Kotlin", "JSON", "Scala", "Groovy", "JavaScript", "TypeScript", "Python", "Ruby", "PHP", "Perl", "Swift", "Dart", "Julia", "MATLAB", "Haskell", "OCaml", "Elixir", "Erlang", ...

Download google drive link in Sketchware

Image
This post shows how to download files from Google Drive in Sketchware to Downloads folder. 1. Create a new project in Sketchware pro. 2. In google drive , make access of your files public . 3. In  main.xml  add two EditText edittext_drivelink , edittext_filename ; two TextViews  text_id , text_link , and three Buttons  button_id, button_download, button_clear . 4. In Permission manager, add INTERNET permissions. 5. Create a more block of type String , name extractId [String url].  Put following codes in it. if (_url == null) return ""; String regex = "(?<=/d/|id=|folders/)[a-zA-Z0-9_-]{10,}"; Pattern pattern = Pattern.compile(regex); Matcher matcher = pattern.matcher(_url); return matcher.find() ? matcher.group() : ""; 6. Create a more block startDownload [String url][String filename]  and put following codes in it. DownloadManager.Request request = new DownloadManager.Request(Uri.parse(_url)); request.setDestinationInExternalPubl...

Gemini API in WebView

Image
1. Create a new Sketchware project. 2. In main.xml , add a WebView webview1 . 3. In permission manager, add INTERNET permission. 4. In assets folder, add a file index.html and put following codes in it. Important: In code apiKey: "YOUR_API_KEY_HERE" Replace YOUR_API_KEY_HERE with your own API key <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gemini AI Demo</title> <!-- Load Highlight.js theme --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"> <link rel="stylesheet" href="style.css"> <style> /* Additional styling for syntax highlighting */ .hljs { background: #2d2d2d; color: #f8f8f2; ...

GenAI example in Sketchware

Image
1. Visit https://aistudio.google.com/ -- Login or Register -- Click on Get API Key. 2. Click on create API Key and create a new API key. 3. Copy the API Key. 4. In main.xml in Sketchware, add EditText edittext1 , Button button1 , TextView textview1 . 5. Create a String variable API_KEY . 6. In onCreate , set value of API_KEY to the API key copied from aistudio.google.com. 7. Add imports event and import following. import okhttp3.Call; import okhttp3.Callback; import okhttp3.MediaType; import okhttp3.OkHttpClient; import okhttp3.Request; import okhttp3.RequestBody; import okhttp3.Response; import okhttp3.ResponseBody; import java.util.concurrent.TimeUnit; 8. Create a more block of type String (returns String) with name  buildJsonText [String query_text]  and put following codes in it. try { JSONObject content = new JSONObject(); content.put("text", _query_text); JSONArray parts = new JSONArray(); parts.put(content); JSONObject contentObj = new JSONObject(); con...

Download url to app files directory example

Image
1. This post is about downloading a file from its url to getFilesDir() of the app. Similar code can be used to download to getCacheDir() with little modification. 2. In permission manager add INTERNET permission. 3. Create a java class file LinkHelper.java and put following codes in it. (Change package name to package name of your app). package com.my.newproject5; import android.content.Context; import android.net.Uri; import android.os.Handler; import android.os.ParcelFileDescriptor; import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.URL; import java.util.ArrayList; import java.util.HashMap; public class LinkHelper { // INTERFACES public interface DownloadCallback { void onProgress(int percent); // 0 → 100 void onSuccess(File file); void onError(String message); } // ASYNC FILE DOWNLOAD WITH PROGRESS LISTENER public static void downloadToAppDataAsyn...

Creating a View Class with ball moving animation

Image
1. Add a Sound file bounce_sound.mp3 . 2. Add a new java class file BouncingBallView.java . Put following codes in it. package com.my.animation; import android.view.View; import android.content.Context; import android.media.SoundPool; import android.media.AudioAttributes; import android.graphics.Paint; import android.graphics.Paint.Style; import android.graphics.Color; import android.graphics.Canvas; public class BouncingBallView extends View { private Paint mypaint; private SoundPool soundPool; private int soundId; private boolean isLoaded = false; int directionX = 1; // 1 = moving right, -1 = moving left int directionY = 1; // 1 = moving down, -1 = moving up int speed = 4; int radius = 30; int distanceX = radius; int distanceY = radius; int timeX = 0; int timeY = 0; int viewWidth = 0; int viewHeight = 0; public BouncingBallView(Context context) { super(context); init(context); } ...

Crop image example in Sketchware

Image
1. Create a new project in Sketchware. 2. In  main.xml * Add a Button btn_pick * Below this, add an ImageView imageview1 . * Below this add a Linear Horizontal linear_buttons . Inside linear_buttons, add three Buttons: btn_rotate , btn_crop , btn_download . 3. Switch ON AppCompat and design. 4. In Java/Kotlin Manager add a new java file BitmapCacheUtils.java and put following codes in it. package com.my.newproject10; import android.content.ContentValues; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.net.Uri; import android.os.Build; import android.os.Environment; import android.provider.MediaStore; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.text.SimpleDateFormat; import java.util.Date; import java.util.Locale; public class BitmapCacheUtils { private static fina...