List Blocks On App Inventor

List is a necessity in almost every app regardless of what programming language you use. This is the easiest way to create and manipulate a set of values/items/elements in an ordered fashion. Please go over the reference before we start. In this tutorial, we will learn how to create a list, add new items to a list, display list items, replace an item in the list, remove an item or remove everything from a list, search for an item, and sort a list.

The snapshot below is from our tutorial app. I recommend you to download the source of this application ListBlocks and try it on an emulator or on a device so you will have better understanding of list manipulation. In the source, I have added plenty of comments for you to easily understand the implementation. You should be able to see those comments once you load the source in your block editor window.

I tried to keep the source as clean as possible without optimizing it too much for beginners to understand. Once you understand the application, trust me, you will be able to rearrange the pieces in more efficient way. Also, for some operations I tried to control it through block editor which actually you can control from designer window like checking if a text box contains only numbers which you can do by enabling the NumbersOnly option in the designer window for a TextBox component, you can specify a ListPicker’s elements through ElementsFromString property in the designer window which I also implemented from block editor window. The purpose of that is to give you alternative ideas which you may need in the future. Also note that 1 and 1.25 are both numbers while list indexes are referred by only whole numbers.

List app snapshot
Note that the comments in yellow in the image above are not part of the application.

1. Create a List

2. Add Items to a List

3. Display List Items

4. Remove List Items

5. Replace an Item

6. Search for an Item

7. Sort a List

8. Shuffle a List


1. Create a List

Creating a list is as simple as this-

Make empty lists

We have just created four empty lists above, named list1, list2, list3, and userList. “create empty list” block can be found in Lists drawer in your blocks editor. Those lists are currently empty as we haven’t added any items yet. Note, you can also use “make a list” block to create an empty list. Just don’t put any item when using “make a list” block for creating empty list like this-

    Empty list

What if you don’t want to create an empty list, rather you want to create a list with items in it? Well, no worries. You can use “make a list” block to do so.

Make a list with items

In the above image, we used “make a list” block to create a list named myList with three items – Apple, Banana, and Guava. If we didn’t put any item in the make a list block, it would create an empty list just like the way we did with create empty list block. Note that, you can put as many items as you want in make a list.

Tips: When you name a variable, try naming it with a purpose. Say you need a list of prices of different fruits, you can name that list variable – fruitsPriceList so that later you don’t have to recall the purpose of that list, specially when you have lots of variables in your block editor. Also by the name of the variable, one should know that variable represents a list.

2. Add Items to a List

Adding an item can be done different ways.


If you look at the image above, we have populated all three lists with different items. First one will have a list of three items which are Orange, Apple, and Banana; the second one is consisted of another three items – 20, 30, and 10. The last one, list3 is consisted of two items which are actually lists. Yes, you can have a list of lists. If you take the first item from list3 which is also a list, you will get a list of three items which contains Orange, Apple, and Banana.

Now, look at the image below-

append to a list

The difference between add items to list and append to list is that for add items to list, you can add both individual items and lists, but for append to list, you can only add another list into a list. add items to list will consider a list as an item but append to list will take the contents from a list and add them as separate items. To make things clear, in the above image, list1 is the destination list where the contents of list2 will be added at the end of list1. That means, list1 will contain whatever items it had before plus the items from list2. Note that list2 will have no change in its contents. If things are not clear, try it for yourself and see how they behave.

Both add items to list and append to list add an item at the end of the list. What if we want to add an item in a certain position? That’s when we need insert list item block. insert list item is used when you want to add an item into a list in a certain position. Let’s say you want to add a new item “Grape” into list1 at position 1. This is how you will do it-

insert into a list

As you have noticed, insert list items takes 3 arguments – the list where the new item will be added, the index or position where the item should be added, and the new item that should be added. Since we wanted our new item “Grape” to be added at the beginning of the list, we specified 1 as the index/position. Now our list1 contains four items – Grape, Orange, Apple, and Banana. Note that Grape is the first item in list1 and everything else got moved down by 1 because of the insert operation. Before we inserted Grape, Orange was in the first position, but now Orange is in the second position.

Tips: Always apply whatever you have recently learned. Don’t try to learn everything first and then apply.

3. Display List Items

How do you display all the items in a list? Believe it or not, that is very easy. In the example below, we used a Label component named FirstListContents to display the contents of list1.

Display list items

for each item and for each number both can be used for iterating/looping through a list. Here we used for each item as we are not concern about the indexes/positions of an item. When we will sort a list, we will be using for each number instead as we’ll need the indexes of different items in the list for manipulation. You can still use for each item for sorting, but you must define some local or global variables to access the indexes.

for each item is pretty simple. You provide a list to loop through and there’s a local variable named “item” given to you that holds the value of an item. Note that you can change the name “item” to anything you like. Remember “item” is a local variable, you cannot use it outside the scope. In for each block, the scope is inside the do section of for each block.

for each scope

To give you an idea, let’s say you want to get the sum of all items in a list. This is how you would do it-

Calculate sum of numbers in a list

We have a list named numberList which contains three items – 20, 30, and 10. We wrote a procedure named CalculateSum that sums up the numbers in our list and then displays the sum. We declared a global variable named sum and initialized it to 0. Initializing means assigning a value the first time when you create a variable. Inside the procedure, we again set the value of sum to 0. You might think the initial value of sum was already 0 when we defined the sum variable outside CalculateSum procedure. Well, you may want to use the same procedure again and again. In that case, it’s safe to reinitialize a global variable unless the previous value of that global variable should be retained. We used for each item block to loop through each item in our numberList and added to the value of sum. The execution of the above procedure would look like this-

sum = 0

sum = sum + value at position 1 of numberList (0 + 20 = 20)
(Now the value of sum is 20)

sum = sum + value at position 2 of numberList (20 + 30 = 50)
(Now the value of sum is 50)

sum = sum + value at position 3 of numberList (50 + 10 = 60)
(Now the value of sum is 60)

The final value of sum will be 60.

Let’s say you want to display a random item from a list. That’s how you would do it-

pick a random item

pick a random item” block gets a random item from a given list.

4. Remove List Items

To remove an item, all you need to know is the index/position of the item you want to remove. If you want to remove number 30 from numberList below, you’ll have to pass 2 as the index as you can see 30 is in position/index 2 in the numberList below.

Remove an item from list

In a real world application, you may have to validate if a certain index/position exists in a list before you actually try to remove an item. If you have already downloaded the application that I mentioned at the top of this tutorial, you should see how I validated a given index before I try to remove an item.

To remove everything from a list, simply set the value of the list variable to a make a list block without any item or just use create empty list block. In the image below, we removed all items from numberList by setting the value of numberList to create empty list block.

Remove everything from a list

5. Replace an Item

To replace a list item, you need to provide with three arguments – the list where you want to replace an item, the index of an existing item in the list, and the new item you want to replace an existing item with.

Replace an item in a list

In the image above, initially we had three items 20, 30, and 10 in numberList. We used replace list item block to replace the item at index 1 which was 20 with a new item 100. Now our numberList contains 100, 30, and 10.

6. Search for an Item

Searching for an item can be a little tricky because sometimes you will need to know if a particular item exists in a list, if it does, then you might be interested in knowing where or in which position that item exists. If you have multiple occurrences of the same item in a list, you may also need to know all the positions where the item exists in the list.

Search for an item in a list

In the above image, you can see we are trying to search for the item 30 in numberList which contains three items 20, 30, and 10. Before we started searching, we used is in list? block to check if that item exists in numberList. Block index in list gives us the first occurrence of 30 in the list if it exists. If the item doesn’t exist, it gives us 0. Since numberList above contains 30 in the second position, index in list will give us 2.

As of now, we only searched for the first occurrence. What if our list contained 30 two times? How can we get all two positions? Well, we have to use for each block and loop through each item in the list, then compare if the item we are searching for is the same as the item currently in the loop; if equal we get and store the index for later use. We do this for all items in the list.

Search for all occurrences in a list

As you can see above, 30 appears twice in the numberList, in the second and in the fourth positions. As usual, we first check if 30 exists by using is in list block. If it does, we use a for each block and compare each item to see if the item is 30. If it is, we store it in a global variable named resultText by appending. In this case, the final value of resultText would be [2] [4] because 30 exists in 2nd and 4th positions.

The above numberList as the name implies, contains only numbers. What if we had alphanumeric/text items? In that case, we would need to use the compare texts block from text drawer. See below.

Search all occurrences of an item is a list

Our search above doesn’t ignore casing. Meaning “apple” is not the same as “Apple“. If you don’t care about casing and you want “apple” to be the same as “APPLE”, or “Apple”, simply convert both sides of comparison to uppercase or lowercase before you compare. Choose one, if you choose upcase then use it for both sides. You can find both upcase and downcase in the Text drawer. In the above example, if you didn’t want to care about casing, you would change the comparison to-

Compare ignoring case

If you have noticed both sides used upcase. All we are doing is that we are converting “Apple” in the left side to “APPLE” and also converting the item in the right side to have also all uppercase letters. So, if the item in the right side was “apple”, it will become “APPLE”.

I used upcase, you can also use downcase as long as you use the same case for both sides in comparison.

7. Sort a List

Sorting of list is explained here.

8. Shuffle a List

Shuffling of lists is explained here.

Download the source ListBlocks and explore.

Download also the source UniqueSpeedyBirds to see how shuffling works.



  1. When I go to create a list, and try to put multiple values into it, it limits it only to two values. How to I make it so I can have more than two values in a list?

    • If you click on the blue square in “make a list” block, you will see you can drag more slots.

  2. How do i get call ‘setup header’ the purple block

  3. hmm, I’ve tried to make a list of variables to try to make a math game as a project for school, but it just doesn’t work. Can you tell me how can I generate a number set for multiples of ex. 2,3,4,5,6 to a certain cap? (like from 1-500?) I would like to try to avoid writing an extremely long list. Thanks

    • Have a for loop starting from 1 until 500. For each iteration, do your math and store the result as an item in a list. You should do it after app loads.

  4. Can you a make lists from, for example, different fruits selected on different screens?

    • Multiple screens manipulation is not the scope of this tutorial. If you are having problem with that, you can actually have a tiny db and populate it with different items from different screens..then pick the contents of the db anywhere in your app.

  5. Hi,

    Does anyone know how to search for all numbers higher than 0 in a list and return the correct values? I cant seem to find the answer?

    • Loop through the list and do a “if”. If greater than 10, store it to another list to display later or append to a Label’s Text to display.

  6. Hello, I was wondering if anyone knows how I can share my data from my first list across multiple screens using a tinydb?

  7. Thanks Sajal for this very well-created primer on lists (I got here thanks to SteveJG pointing me here on the forum). As a rank beginner, it provided fantastic learning and set me off on to bigger things!

    Much appreciated,

  8. Hi Sajal. Thanks for this very informative article about Lists. It certainly clears up some issues i had. Can I email/private message you – i have a detailed query concerning lists and would like some input?


  9. Thankyou very much for your article, it’s amazing to know app inventor can do powerful like array ‘things’ and process it

  10. Hi i have made a search app to search from a standard make a list. But when my inputs in the list rich 694 and above when i try my app returns me: The second argument to foreach is not a list. The second argument is: *nothing*. when i delete one input and its back to 693 my app works perfectly. i am doing something wrong? thanx for your help!!!

    • If you are using ‘for’ block as I showed above, then ‘from’ should be 1, ‘to’ should be the length of the list, and ‘by’ should be also 1.

      • i use “for each (item) in list do” you say to use “for each (number) from” inside or outside “for each (utem) in list do” ?

    • I do not see anything wrong with your blocks. Should be fine. Does it happen if you change the 694th item to anything, like “apple”?

      • whene i give a new input to the list give me the problem. It is posible to sent you the .aia file to look the app?

        • Sent me a link where I can download your aia.

    • You have a lot of empty slots in your list. Remove those. These are causing problems I guess which you can report to AI2 issues. You can try keeping your empty slots and add more items at the end, and you will see it still works.

      • thanx for your time i wil try to add more empty slots ti see if start to work

  11. Please, how do I make the items in my list to be select able and open a new screen.

    • If you have downloaded the ListBlocks project that is provided at the end of the tutorial above, you should see the functionalities you are looking for under Sort function.

  12. Hi everyone

    I have just started to use app inventor and have been following the tutorial on lists.

    If I re-create all of the blocks on one screen will the demo work like on the screen shots? In other words does each function need the blocks on separate screens e.g. create list, add items to list etc…

    I have got to removing items from list and I cant create a block that says (number list) instead it says (number list4)

    Looking at the other blocks on the screen I can see I have used this a few times that’s why it automatically is numbering each one. Therefore does these blocks need to be on separate screens?

    Please help
    Thanking you all in advance.


  13. Just need to know how to:
    1 – click a button, that will each time it is clicked, show the item in a list. In this instance it needs to be iterating through the index of a series of numbers 1-10.

    2 – click another button to reset the list to the initial number, 10.
    3 – it should also preserve the number that is selected.
    4 – finally i should be able to do the same with five other lists.

    Hoping someone can help. Get lists, but don’t see how to do what I have just asked about. Cheers

  14. I want to make a list where i can ‘reserve’ and ‘cancel’ items, adding and removing, but i don’t know how.

    • This tutorial explains both adding and removing. Not sure what you are not understanding. For an inventory system, a list of available items with their quantity in the store and a list of items a customer has. Manipulate customer’s list. If they want to add, add to the customer list and subtract from available list..same goes for removal. Try to understand the tutorial above.

  15. I understand what you’re saying in your instructions. How can you set up a search for any text match in your app. For example, a user enters “Eric” in the search field. It should bring up any matching text, such as, Erickson, Erich, Deric. Do you create an empty list or what?it’s looking for numerous text values in a database, but you don’t know what they are at any given time, so you can’t add them like you do banana, apple, etc.

    • When your text box has focus, activate a timer. When timer/clock fires, check for a match in your existing list using whatever in the text box.

  16. How can you make a search bar in MIT App Inventor where you can search for someone else’s username which was stored when someone registers.

    • You would do that in your server, not in your app. Your app should send whatever a user chooses as their username to your server; your server verifies if that username is available, and send a response back to your app. From there, you handle accordingly.

  17. How do you remove and add single items from a list

Submit a Comment

Your email address will not be published. Required fields are marked *

× 9 = 54

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">