Posts

Convert json array to html table

Image
1. Suppose you have a json array, or data in a List Map which is displayed in a ListView. e.g. fruits.json file in assets folder To read it and set the json array to a string variable: a) Add a method to read assets file: public String _readJsonFromAsset(final String _filename) { String json = null; try { InputStream is = this.getAssets().open(_filename); int size = is.available(); byte[] buffer = new byte[size]; is.read(buffer); is.close(); json = new String(buffer, StandardCharsets.UTF_8); } catch (IOException ex) { ex.printStackTrace(); return null; } return json; } For above method, in Sketchware, you can create a more block readJsonFromAsset of type String and with a String variable filename . Then put codes below. String json = null; try { InputStream is = this.getAssets().open(_filename); int size = is.available(); byte[] buffer = new byte[size]; is.read(buffer); is.close();...
1 comment
Read more

Simple ExoPlayer app in Sketchware

Image
1. To add ExoPlayer in Sketchware pro project, in Library manager --> Local Library, download following dependency: com.google.android.exoplayer:exoplayer:2.19.1 Do not skip sub-dependencies. 2. Select all downloaded dependencies except kotlin-stdlib-common-v1.6.21 and kotlin-stdlib-v1.6.21 3. Switch On AppCompat and design and Material library. 4. In permission manager, add INTERNET permissions . 5. In main.xml add three TextViews with links to videos. 6. Add an Intent component intent . 7. Create a new page, player.xml . 8. In TextView onClick events, use Intent to move to PlayerActivity . The video URL is saved with key "url". 9. In player.xml , add a LinearLayout, and convert it to com.google.android.exoplayer2.ui.PlayerView Set height to match_parent Change ID to playerView Add custom attributes: app:use_controller value true app:show_buffering value  when_playing 10. In PlayerActivity, add event import and add following imports: import com.google.android.exopl...
Post a Comment
Read more

Save ListView as Pdf file

Image
1. On the page containing the ListView listview1 , Button savePdf , and an EditText edittext1 (This is for entering the file name). 2. Create a String variable filename . 3. In Activity, add Import event and add following imports: import java.nio.charset.StandardCharsets; import android.content.ContentValues; import android.content.Context; import android.net.Uri; import android.os.Build; import android.os.Environment; import android.provider.MediaStore; import android.widget.Toast; import android.graphics.pdf.PdfDocument; import java.io.IOException; import java.io.OutputStream; 4. Create a more block savePdfToDownloads [PdfDocument document][String filename] Here PdfDocument is a custom parameter. To add it, More Block -- Custom Parameter -- parameter: m.PdfDocument , variable: document . Put following codes in this more block: Uri pdfUri = null; OutputStream outputStream = null; try { ContentValues contentValues = new ContentValues(); contentVa...
Post a Comment
Read more

Tween animation examples

1. View Animations in android dependent on  android.view.animation can be used to animate Views in android. 2. The animation can be applied to Views (ImageView, TextView, etc.). 3. XML files for the animation are placed in res/anim/ folder. 4. The root tags for the XML file include: <alpha> (fade in/out) <scale> (zoom) <translate> (move) <rotate> (rotate) <set> (combine multiple animations) 5. Below are examples of each of them: a) res/anim/fade_in.xml <?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="1000" /> b) res/anim/fade_out.xml <?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:fromAlpha="1.0" android:toAlpha="0.0...
Post a Comment
Read more

Pdf Viewer for a Url using pdf.js

Image
This post shows how to download a pdf file in app cache and display it in WebView using Pdf.js in Sketchware project. 1. Create a new project in Sketchware pro. In  main.xml,  in a Linear Horizontal, add an EditText  edittext1  and a Button load . For edittext1 set lines to 1. Below that add a WebView  pdfWebView . 2. Switch On AppCompat and design. 3. Download  pdf.js  from following link: https://github.com/mozilla/pdf.js/releases/download/v5.4.296/pdfjs-5.4.296-dist.zip or https://mozilla.github.io/pdf.js/getting_started/#download 4. Extract the contents of the downloaded zip file. 5. In Sketchware pro project, in  Asset Manager , add a sample pdf file and rename it as  sample.pdf . Also, create a new folder  pdfjs . 6. In  pdfjs folder  import all the contents extracted from the downloaded zip file. 7. In  onCreate  event, get WebView settings and enable JavaScript, and file access. Load sample.pdf in the Web...
Post a Comment
Read more

AnimatedDotsView Example

Image
1. In java/kotlin manager, create a java class file AnimatedDotsView.java . Put following codes in it. package com.my.newproject14; //Change to your own package name import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.LinearGradient; import android.graphics.Paint; import android.graphics.Shader; import android.os.Build; import android.util.AttributeSet; import android.view.View; import androidx.annotation.Nullable; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.Random; public class AnimatedDotsView extends View { //com.my.newproject14.AnimatedDotsView // Particle/ Dot model private static class Particle { float x, y; float vx, vy; float radius; float alpha; // 0..1 float life; // total life (ms) float age; // current age (ms) boolean isAlive() { return alpha > 0 ...
Post a Comment
Read more

Month and Year picker dialog in android project in Sketchware

Image
1. In main.xml , add a TextView textview1 , and a CalendarView calendarview2 . When textview1 is clicked, the app will display a month and year picker dialog. When the month and year are selected from the dialog, it will display the selected month and year in textview1, and calendarview2. 2. Add a custom view month_picker.xml . In this add a Spinner spinner1 , and a GridView gridview1 . The Spinner will display years for selection, and the GridView will display the months for selection. 3. Add a Calendar component cal . 4. Switch on AppCompat and design. 5. In onCreate , display the current month and year from Calendar cal in textview1. 6. Add two custom variables of type int with names year and month . 7. In calendarview2 onDateChanged event, update the date in Calendar component cal. 8. Create a more block setMonth with two int variables year and month . To add int variables, write parameter as m.int and variable as year or month. Set the year and month of Calendar component usi...
Post a Comment
Read more

Pdf Viewer using Pdf.js in Sketchware pro

Image
This post shows how to pick a pdf file and display it in WebView using Pdf.js in Sketchware project. 1. Create a new project in Sketchware pro. In main.xml add a TextView textview1 with text ' OPEN PDF ' and a WebView pdfWebView . 2. Switch On AppCompat and design. 3. Download pdf.js from following link: https://github.com/mozilla/pdf.js/releases/download/v5.4.296/pdfjs-5.4.296-dist.zip or https://mozilla.github.io/pdf.js/getting_started/#download 4. Extract the contents of the downloaded zip file. 5. In Sketchware pro project, in Asset Manager , add a sample pdf file and rename it as sample.pdf . Also, create a new folder pdfjs . 6. In pdfjs folder import all the contents extracted from the downloaded zip file. 7. Add a File picker component fp with mime type application/pdf . 8. In onCreate event, get WebView settings and enable JavaScript, and file access. Load sample.pdf in the WebView. WebSettings settings = binding.pdfWebView.getSettings(); settings.setJava...
Post a Comment
Read more

ViewPager2 with ListView example in Sketchware pro

Image
1. Create a new project in Sketchware. (Same codes for Android studio here  https://apktutor.in/2025/10/02/viewpager2-example-with-fragment-containing-a-listview/ ) 2. In main.xml add a TabLayout and a ViewPager viewpager1. 3. Convert ViewPager to  androidx.viewpager2.widget.ViewPager2 . 4. Switch On AppCompat and design. 5. Add three Custom Views fragment1, fragment2, and fragment3. In fragment1.xml add a TextView. In fragment2.xml add a MaterialButton materialbutton1. In fragment3.xml add a ListView listview1. 6. Add a Custom View for ListView items list_item_fruits.xml with two TextViews textview1 and textview2. 7. In Java/Kotlin manager, add a new Java file Fragment1.java . Add following codes in it. package com.my.newproject18; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.fragment.app.Fragment; public c...
Post a Comment
Read more