Blocks & Tutorials

Advanced Components

App Inventor has been updated and provided us with a new tab in the blocks editor called Advanced allowing us to get/set of different properties and call functions on a component block or a variable that represents a component. This means we can make a reference to a component via a variable/argument and manipulate it dynamically. 

What we will do is modify our WildLifeShow tutorial in the Home page. By modification I don’t mean adding of anything new to the app, rather we will use Advanced tab’s components to do the same thing. By now you should have taken a look at the original WildLifeShow tutorial as mentioned earlier.

Let’s take a quick look at the snapshot below where we used Image and Player component from the Advanced tab.

    As you can see, we declared a variable named ButtonsProperties which is a list of lists. There are three lists in total representing the picture file names and sound file names. The first list contains the properties that we will use when Button1 is tapped/pressed, second list is for second button, and the third list is for third button.

    We have a procedure called SetAndStart which takes an argument called ButtonIndexButtonIndex tells us which button was pressed. Let’s say Button1 was pressed. On Button1.Click event, we just call the SetAndStart and provide 1 as the argument. We are providing 1, because 1 represents the first button and it will be easy for us to determine which list to take from ButtonProperties variable. So now going back to SetAndStart procedure, we simply drag Image.Picture block from Advanced tab and set the component socket of Image.Picture to Image1 component. Note that Image1 component is found under My Blocks, on Image1. Then we get the corresponding list from ButtonProperties specified by ButtonIndex. Afterwards we get the first item from the list we got as first item is the picture file name. For setting the Player1’s source, we drag out Player.Source block from Advanced tab, and in that case we get the second item as it’s the name of the sound file we want to play.

Check Connection

Checking connection is very easy. You can use a Web component and try connecting to a website. is a very good candidate for that since it’s very unusual for google server to be down. Below is a snippet where I have a button and when you click the button, it tries to connect to You can download the source and try changing the google url to something that doesn’t exist and see the result. Say if you set the value of the variable googleUrl to, you will have a 404 error. If the responseCode sent from the server is 200, that means you have connection. For a list of response codes and what they mean, see HTTP status codes.

Procedure With Result

ProcedureWithResult block is very handy when you need to validate or do something again and again. This will save you time as you don’t need to repeat the same procedure multiple times. Also it’s hard to keep track of multiple global variables. This will help you keep your blocks small. This block is certainly the best idea when it comes to validating user inputs.

As you can see above, we have a procedure with result block called GetSquareValue which calculates and returns the square of a number. If you are doing a math app for kids where a user has to guess square of a number, you can validate their answers by calling GetSquareValue procedure with the number as argument.