Skip to main content

How to create an animation in Sketchware?

Here I have used the example of battery charging images to show how we can create a simple animation in Sketchware.

Here is a video of the process:


Step 1.
Download Sketchware App.

Step 2.
Start a new project. Drag and drop a linear and an imageview block in the View area.

Step 3.
Use Image manager to add the images you want to use in animation. I have added seven different images of battery charging icon in this project.



Step 4.
Now in the Logic area add a new timer component. I have added a timer component named animate.

Step 5.
Now in the Logic area, click on onCreate event and add a new block. I have added a block named repeats.



Step 6.
In onCreate activity add:
TimerTask​ (animate) after 0 ms

Inside TimerTask add
Imageview...........setImage..........  
repeats    (The new block you added)

Now select the imageview name and the first image you want to display.


Step 7.
Now define the new block you added. In my project it is repeats.
In the repeats defineFunction event use following blocks:

TimerTask​ (animate) after 400 ms
**Imageview...........setImage..........  
**TimerTask​ (animate) after 400 ms
****Imageview...........setImage..........  
****TimerTask​ (animate) after 400 ms
******Imageview...........setImage..........  
******TimerTask​ (animate) after 400 ms
********Imageview...........setImage..........  
********repeats

Use as many TimerTasks and Imageview.. setImage as the number of images you want to add in your animation. And set the images in the sequence you want them to appear in your animation.
Note that it is important to cancel the timer task, either on onStop event (activity no longer visible) or on back pressed. Also, in some instances it may be better to start the timer in onStart event instead of onCreate event.

Step 8.
Save it and run the project. Your new app will show the images you added in the sequence you selected them and keep repeating the process. Thus your animation is ready.

Comments

Popular posts from this blog

Create Music Player app in Sketchware

To create a Music Player app in sketchware, follow the steps given below. 1. Create a new project in Sketchware. 2. In VIEW area on main.xml, add a ListView  listview1  with height wrap_content, and weight 1. Add a SeekBar  seekbar1 , an ImageView  imageview1 , and three TextViews  textview1 ,  textview2 , and  textview3 , as shown in the image below. 3. Create a CustomView  mycustom.xml  and add a TextView  textview1 , and an ImageView  imageview1  in it. For listview1 select mycustom.xml as it's customView. 4. Add a MediaPlayer component  mp , a Shared Preferences component  sp:sp  and a Timer component  timer . 5. Create six More Blocks  MPcreate(pos), MPstart , and  MPpause  for the MediaPlayer and  searchFolders ,  getFileList in [filePath]  and  extra . 6. Add three number variables  n, r  and  songPosition , and five String variables  currentfile ...

Admob rewarded video Ads in Sketchware

To integrate Admob Rewarded Video Ads to a Sketchware project, follow the steps given below. Prerequisites An Android project (Sketchware project) Account in Admob Always place the test ad unit ID before placing your ad unit ID. App ID and ad unit ID can be obtained by registering the app on Admob. But for using test ads no registration is required. Do not click on your own Ads. 1. Create an android project in Sketchware. 2. Add the app to your Admob account. For your app, generate an ad unit ID for Rewarded Video Ads. 3. In Sketchware project, navigate to  Library Manager  and open Admob settings. i. Click on Add manually and add the ad unit ID generated on Admob website, or use test ad unit ID ca-app-pub-3940256099942544/5224354917. ii. If you are not using any banner or interstitial ad units, select the same ad unit ID for both banner and interstitial ads. iii. Add Test Device automatically shown by Sketchware. iv. Save it. v. Switch ON Admob and AppCompat and design. ...

Firebase auth in Sketchware for Login Activity

To create a login activity using Firebase Auth in Sketchware, follow the steps given below. This method uses Firebase authentication service for creating login. 1. In your Firebase account, go to Firebase authentication. 2. In Firebase authentication web set-up, go to SIGN-IN method, and enable Email/password and Anonymous. 3. Go to Project settings in your Firebase project and copy the Web API Key, Project ID, and App ID. 4. Paste the Project ID, App ID, and Web API Key in your project in Sketchware, in the Firebase settings. 5. On the  MainActivity  page add a File Shared preferences component  user:user  and an Intent  i . Also add a Timer  t  and a Firebase Auth  testlogin . 6. Create a new page  login.xml  with Activity called  LoginActivity . 7. In  onCreate  event of MainActivity use blocks as shown in image below. It identifies main page with  File user key page . It also checks if user is logged in to  F...