Posts

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...

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...

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 ...

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...

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...

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...

Simple Audio recorder app in Sketchware

Image
1.  Switch on AppCompat and Design. 2. In main.xml,  add two Buttons startBtn and stopBtn , and add two TextViews textview_message and textview_file . 3. Add a SpeechToText component (To add record audio permissions). 4. Add a String variable outputFile and add a custom variable of type MediaRecorder with name mediaRecorder . 5. In onCreate , add write string__to file path__ block  (To add read and write external storage permissions). Then put following codes to define outputFile. stopBtn.setEnabled(false); File downloadsDir = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS); String fileName = "recording_" + System.currentTimeMillis() + ".3gp"; File file = new File(downloadsDir, fileName); outputFile = file.getAbsolutePath(); 6. Create a More block startRecording and put following codes in it. try { mediaRecorder = new MediaRecorder(); mediaRecorder.setAudioSource(MediaRecorder.AudioSource.MIC); ...

Select and delete multiple items in a list in Sketchware android project

Image
1. In image manager of project, add delete icon ic_delete_white . 2. In Resource, in menu folder, add an xml file named context_menu.xml . Put following code in this file: <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/delete" android:title="Delete" android:icon="@drawable/ic_delete_white" android:showAsAction="always"/> </menu> 3. Create a new custom variable of type SparseBooleanArray with name selectedItems and define it as new SparseBooleanArray(). 4. Put following codes in onCreate . Change names of variables as in your project. // Enable multiple selection mode with contextual action bar listview1.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE_MODAL); // Handle selection events via MultiChoiceModeListener listview1.setMultiChoiceModeListener(new AbsListView.MultiChoiceModeListener() { @Override public void onItemCheckedStat...

A simple reminder app in Sketchware

Image
This post describes a simple reminder app using AlarmManager in Sketchware. 1. Create a new project in Sketchware. 2. In main.xml , add an EditText edittext1 , a Button button1 to set time for reminder, a TextView textview1 for displaying the date and time, a Button button2 for setting the reminder, and a ListView listview1 for displaying the reminders. 3. In Image manager, add two images ic_notifications_black and ic_delete_black . 4. Create a custom view items.xml . In this add two TextViews textview1 and textview2 , and an ImageView imageview1 . 5. For listview1, select items.xml as custom view. 6. Switch on AppCompat and design. 7. Add two Calendar components cal and cal2 , add a SharedPreferences component sp:sp and a Dialog component dialog . 8. Create three number variables reminder_code , current_time and code . Create a String variable message and a Map variable map . Also create a ListMap maplist . 9. Add a more block createNotificationChannel and add following cod...

Date and time picker in Sketchware

1. Create a new project in Sketchware. 2. Add a Button button1 for picking date and time. 3. Add a TextView textview1 , for displaying the selected date and time. 4. Add a Calendar component cal . 5. Create two more blocks, pickDate and pickTime . 6. In pickDate more block, use an add source directly block and put following code: DatePickerDialog datePicker = new DatePickerDialog( this, new DatePickerDialog.OnDateSetListener() { @Override public void onDateSet(DatePicker view, int year, int month, int dayOfMonth) { cal.set(Calendar.YEAR, year); cal.set(Calendar.MONTH, month); cal.set(Calendar.DAY_OF_MONTH, dayOfMonth); _pickTime(); } }, cal.get(Calendar.YEAR), cal.get(Calendar.MONTH), cal.get(Calendar.DAY_OF_MONTH) ); datePicker.show(); 7. In pickTime more block, use an add source directly block and put following code: TimePickerDialog timePicker = new TimePickerDialog( this, new TimePickerDialog.OnTimeSetListener() { @Override ...