Google Play In-app Billing in Ai2LiveComplete

Ai2LiveComplete includes monetization components that allows you to quickly add monetization into your Android apps. These components allow you to add in Banner ads, full screen Interstitial ads or even full screen rich video ads.


The latest monetization component that was added into Ai2LiveComplete is the Google Play In-app Billing component. This component allows you to sell virtual content such as game levels or potions, premium services and features, subscriptions, and more. Watch the video below and if interested in Ai2LiveComplete follow the link below the video:

Interested in Ai2LiveComplete? Please check features and link to demo site  HERE.  Alternatively, if you have problem accessing the doc, you can check document, HERE


Posted by on April 10, 2015 in AiLiveComplete


Absolute App Inventor 2 book

If you like our blog posting, then you may be interested in our Absolute App Inventor 2 book.


Google Books HERE     Amazon Books HERE.    Apple Books HERE    Nook Books HERE.

Learn to develop Android Mobile Apps. Absolute App Inventor 2 book will take you beyond basic tutorials and will cover concepts that will help you to become a better Android App Inventor.


  • If you are new to programming or App Inventor, then this book will show you how to properly start-off designing and developing mobile apps and will then gradually take you through understanding more advanced concepts.
  • If you have already used App Inventor, use this book to learn about optimization, DRY principle, design patterns and concepts that will teach you how to design & develop apps that will run more efficiently and to learn about concepts that have not been covered in other App Inventor books.

The book covers good programming designs using DRY (Don’t Repeat Yourself) Principle by using App Inventor Procedures. The book also covers how to use proper abstraction and produce much cleaner code through use of App Inventor Advanced “Any Component”.

All these concepts will be covered in a fully fledged such as SpaceWars gaming app and MyFAVs contact management apps. They will show you step-by-step design flow and bottom-top implementation using numerous figures with detailed step-by-step sequenced instruction.

Interested in Ai2LiveComplete? Please check features and link to demo site  HERE.  Alternatively, if you have problem accessing the doc, you can check document, HERE


Posted by on February 16, 2015 in Uncategorized


Release – Offline version of MIT AI2 – Sept 07, 2015

Offline version of MIT AI2 was just released and can be found HERE

This is the replica version of MIT App Inventor. However, it can be run offline.

This release is based on MIT latest version on September 7th, 2015.

Mobile App Development

Leave a comment

Posted by on September 11, 2015 in Uncategorized


Tips&Tricks – If-Then-Else condition Part II

In my blog post HERE, I showed how you can use data structures along with App Inventor procedure to loop through a set of conditions to check if a user entered value falls within a data-range. The approaches that were discussed will drastically reduce the number if if-then-else statements and will also make maintenance much simpler.

Part II will show you how to check for single values rather than a range of values.

For example, consider the situation where you need to bring-up different web-pages based on user response. For this, the simple approach, as shown below, would be to include a set of if-then-else blocks:


Above approach would require additional “else-if” blocks for adding in more criteria. An alternative to above, would be to use LIST along with PROCEDURE block as shown-below:


Now consider situation where you have to add in more criteria; e.g. provider4, provider5, and so on. Using above approach, you’ll only have to update comparisonCriteria block and there will be no change in any other blocks.

Other approaches includes using two synchronized lists, reading data from file using File component, downloading initial set of data from cloud and so on.


Leave a comment

Posted by on July 24, 2015 in Uncategorized


Android Photo Booth app II

This tutorial demonstrates how to develop an Android Photo Booth app. You’ll build an app that let’s you take pictures, assign pictures to canvas and share picture via email. When pictures are taken, then will display in one of 4 canvases. When all canvases have assigned pictures, it will rotate back to first canvas.

What You’ll Build

  • You’ll build a photo booth app allowing you to:
  • Take pictures using camera
  • Save pictures onto canvas
  • Display 4 pictures on 4 different canvases
  • Select a canvas picture
  • Share a canvas picture.

The completed app will look like the figure below:


Before starting

Make sure your computer and your phone are set up to use App Inventor. Start a new project in the Designer window, and name it “PhotoBooth”. When in Editor, click Connect to Phone, and make sure the phone has started the App Inventor app.

Placing the Initial Components

In Designer Editor, click on the Layout category to view all the App Inventor layout components. Once expanded, select HorizontalArrangement layout and drop onto designer viewer. From the properties panel set the Width of this layout to “Fill parent”.

Next, from “User Interface” drawer, select and drop three buttons into this layout and setting their properties as follows:

The completed arrangement should look like figure below:


Select and drop another HorizontalArrangment component below HorizontalArrangement1. Select components as shown below and set their properties as indicated:


This arrangement should look like figure below:


Select and drop another HorizontalArrangment component below HorizontalArrangement2. Select components as shown below and set their properties as indicated:


This arrangement should look like figure below:


Select and drop a TextBox component below HorizontalArrangment3. Select and drop Button below this TextBox and set their properties as below:


This arrangement should look like figure below:


Finally, we will need 3 non-visible components as shown below.

  • Camera –  Media drawer – used to take picture – Sensor
  • Notifier – User Interface drawer – to display informative information
  • Sharing -Social drawer – to share image via email


Adding Behaviors to Components

You have added Button, Canvas, TextBox and non-visible components. Its now time to define how the components behave.

Adding the Click event to btnHelp Button component

This button is used to display help information using Notifier component. Once this button is tapped, we will display usage-information. Since our help-text is long, we use a “join” block (Text drawer) to join our help-text. Note that “join” has a mutator icon, meaning that its shape can expand or shrink.


Taking picture and saving picture into Canvas component

User will be able to click on btnTakePicture button or the btnCamera button to start invoking the internal camera app of the device. There are 4 canvas components on the screen layout and they are named Canvas1 through Canvas4. Each time a picture is taken, we will set the background of one of the canvas components onto the new picture. The 1st picture will be set as background of Canvas1 and 2nd picture will be set as background of Canvas2 and etc. This will continue through for all four canvas components and will then rotate back to 1st canvas. To keep track of which canvas should be used, we use a global variable which will be incremented for every time a picture is taken.

Initializing global variable: From the Built-in Variables drawer, select “initialize global name to” block. Change its name to canvasNum. Next, from Math drawer select “0” number block and plug into socket of the new variable block.


Starting the camera: When either btnTakePicture or btnCamera buttons are clicked, we will use their associated Click event handler to capture the event and start the camera using Camera1.TakePicture block:


Saving picture as canvas background: After a picture is taken AND accepted, the Camera.AfterPicture will be triggered. In this event, the global variable canvasNum will be incremented by 1. This will allow us to rotate the canvas and save, as background, to Canvas1 through Canvas4. When canvasNum is over 4, we rotate it back to 1 so that we can save the picture back to Canvas1 background. To keep the code modularized, we use a procedure that can accept an argument (the full image path of the just-taken picture).

Using the Built-in Procedures drawer, select “Procedure” block and add into blocks-editor viewer. The procedure is a mutator block. Figure below shows how to use mutator and updates that are needed for the procedure.


The blocks in the procedure will need to inspect value of our global index, canvasNum. If this value is 1, then we set the passed in image (path) as background of Canvas1, if canvasNum is 2, we set it as background of Canvas2, and so on. For purpose of this tutorial, we will use if-then-else block. The completed code will look like figure below:


The setPictureToCanvas procedure will need to be invoked after a picture is taken (Camera1.AfterPicture). In this handler, we increment our global variable “canvasNum” by 1.


Next, we inspect if the resulting value is greater than 4. If so, we set it back to 1.


The Camera.AfterPicture event handler passes a parameter called “image” which is the full path of the picture that was just taken. Knowing this, we invoke our “setPictureToCanvas” procedure passing this “image” parameter to it. The full block-code for Camera1.AfterPicture is shown in figure below:


At this time, every time a picture is taken, it will display in Canvas1, then Canvas2, then Canvas3, then Canvas4 and back to will reset back to Canvas1.

Sharing pictures:  At this time, we want to allow user to share a picture by selecting it (via tapping on a canvas) and then sharing it by tapping on the “Share Picture” button. To capture the canvas touch events, we use Canvas.Touched event handler. This event handler is triggered every time the canvas is touched. Canvas also includes a block property called Canvas.BackgroundImage which returns the full image-path of the image that is assigned to its background. At this time we retrieve the image-path and display it in our TextBox (txtPictureToShare):


The completed block-code for handling the touch events on all 4 canvas are shown in figure below. Note that the code for all 4 canvas are same with exception of canvas name:


The final functionality to implement is to share the picture via Sharing component. When btnSharePicture is clicked, we need to validate if a valid picture was selected. A valid picture would mean that its full-path starts-with “file:///”. For this, we use the “contains” block in the Built-in Text drawer. If the path includes “file:///”, then we use “Sharing.ShareFileWithMessage” block and pass it the full image path and message-body. If the path is invalid (doesn’t include “file:///”), we display an alert message using “Notifier.ShowAlert” block.


1 Comment

Posted by on April 30, 2015 in Uncategorized


Google Play In-app Billing

What is Google In-app Billing?

From Android Developer: In-app Billing is a Google Play service that lets you sell digital content from inside your applications. You can use the service to sell a wide range of content, including downloadable content such as media files or photos, virtual content such as game levels or potions, premium services and features, and more. You can use In-app Billing to sell products as:

  • Standard in-app products (one-time billing), or
  • Subscriptions (recurring, automated billing)

This feature may soon be coming into AiLiveComplete! Some uses of this In-app billing would be:

  • Unlocking game-levels when user buys a Product
  • Selling digital subscriptions (monthly / recurring)
  • Selling game items like coins, treasures, additional lives, etc
  • Instead of having LITE and PRO version, having only one-version that can be unlocked from LITE to PRO when user buys the PRO product

Here is the output of a sample app that was created using AiLiveComplete:



And here are some of the property blocks


Here are some of the event handler blocks



Posted by on March 24, 2015 in Uncategorized


Reading / Parsing CSV File

App Inventor includes a Storage File component that can be used for reading and writing. One use of this component can be for reading CSV (Comma Separated File) as key value pairs.

Assume you have a a file called myDataFile.csv with contents that includes authors (key) and books (values) like below. Note that in below example, the value can be varible-size tokenized string (string with multiple values):

Hossein,Absolute App Inventor 2|Amazon|Google Play Book|Apple Book Store
Dave Wolber,App Inventor|Google

The code below shows how we can use a TEXT field to get a user-entered key and then search the data-file and return the search data into another TEXT filed. The code below will loop through the tokenized string value and print each token.



Posted by on February 20, 2015 in Uncategorized


Get every new post delivered to your Inbox.

Join 403 other followers

%d bloggers like this: