App Inventor provides Any component drawer in Blocks editor allowing us to get/set 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.

For small apps, it may not mean much but when you have bigger apps with hundreds of blocks in place and you do not want to repeat the same thing multiple times, you will see how nice this feature is.

If you can’t wait to see an example source right away, download the source file WildLifeShowDynamic and try it for yourself.

We will modify our WildLifeShow tutorial. By modification I don’t mean adding of anything new to the app, rather we will use Any component drawer’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 Any component drawer.

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. We have three lists because we have three buttons. 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. If you are not familiar with lists, now is the time to get into list tutorial.

We have a procedure called SetAndStart which takes an argument called ButtonIndex. ButtonIndex 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 Any component drawer and set the component socket of Image.Picture to Image1 component. Note that Image1 component is found under Screen1 drawer because when we designed, we placed the Image1 on Screen1. 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 Any component drawer, and in that case we get the second item as it’s the name of the sound file we want to play.

Fascinating, isn’t it?

Download the source file WildLifeShowDynamic and try it out.

Also take a look at the Advanced Sprites tutorial for better understanding.