Coding 6: Lists


Coding 6

This lesson will help you earn points in the rubric lines for the Demo Video.

In this lesson, you will learn...

  • How to organize data into lists
  • How to use lists in an app

Key Terms

  • Lists - a way to organize multiple pieces of data in App Inventor and Thunkable
  • Index -  a number that tells you where a piece of data is in a list 
  • Array - common name for lists in programming languages other than App Inventor and Thunkable

Lists and Arrays

As you build your app, you might need a way to organize data and information. Luckily, in computer science, there are ways of organizing data so that you can easily find it and use it.

Can you think of any examples of how you organize information and objects in your life? Here are some examples of things you might do to organize things:

  • Putting a friend’s phone numbers in a contact list
  • Writing your homework down in a planner
  • Creating a grocery list before you go shopping
  • Put clothes in a closet

In App Inventor and Thunkable, you can use something called a list to organize data in your programs. Lists can hold multiple pieces of data and they’re easy to get data from. You may have made a to-do list or a grocery list before, and lists in programming are very similar.

List name: Groceries

  • Apples
  • Bananas
  • Oranges

Lists are really useful for holding a lot of information. Each thing in a list has an index, which is a number that tells you its position in the list. The first item in a list will have an index of 1, the second item in a list will have an index of 2 and so on. Here’s an example:

List name: Groceries

  • Apples (Index = 1)
  • Bananas (Index = 2)
  • Oranges (Index = 3)

Note: In many programming languages, lists are called arrays. and indexes start at 0, not at 1. Make sure to check the rules when learning a new programming language!


How to use Lists in App Inventor and Thunkable

In App Inventor and Thunkable, you can go to blocks and select “lists”. List look like this:

App Inventor


Here is how you could make a list of fruits.

App Inventor


Your app understands this information like this:

List Name: Fruits

  • Apples (Index = 1)
  • Bananas (Index = 2)
  • Oranges (Index = 3)

You can get one thing from a list instead of using the whole list. If you wanted to just put the string “bananas” into a textbox instead of the entire list, you would need to tell your app to look at index 2 in this list. Here’s how you would put “bananas” into a label using App Inventor, from the list shown above:

App Inventor


You can also add, remove, and replace things in lists. Let’s say you forgot to add “kiwis” and “grapes” to your fruit list. You could add them like this:

App Inventor


Now your app will see your list like this:

List Name: Fruits

  • Apples (Index = 1)
  • Bananas (Index = 2)
  • Oranges (Index = 3)
  • Kiwis (Index = 4)
  • Grapes (Index = 5)

You should use lists anytime you have multiple pieces of information that you want to include under the same variable name. For example, if you wanted to display the top ten high scores for a game, you could make ten variables with names like HighScore1, HighScore2, HighScore3 and so on until you get to HighScore10.

The easier way to do this would be to make a list called HighScores that contains the ten high scores and then display them by using their indexes. Using a list would also allow you to replace and add more high scores more easily and would save you a lot of time.


Activity: Magic 8 Ball

We created an app that is just like a magic 8 ball. You can ask it a question, press ask, and it will give you an answer.

However right now, this app can only respond with “yes”, “no” and “not sure”. You need to finish this app so that the magic 8 ball can also respond with “probably”, “maybe” and “I don’t know”. Download the code to get started!


Are you ready to take your magic 8 ball to the next level? Follow this tutorial to learn how to make your magic 8 ball answer a questions when you shake your phone!

Note: In her tutorial, Jennifer makes use of two screens, which works a little bit different than our code. See which solution you like better!



In this lesson you learned about lists as a way to store and retrieve information.  Next, you’ll need to use lists, variables and functions to complete the second coding challenge!

  • How did you change the magic 8 ball app so that it was able to respond with more answers?
  • How could you include lists in your app?

Additional Resources: ListView and ListPicker Examples

There are two very important user interface components you can use with lists in App Inventor called ListView and List Picker.


This is a visible component that allows placing a list of text elements in your Screen to display.

You can add elements from to a ListView from a List.

App Inventor


Here is what your app will look like with this code

Your user can select things in your list and you can program your app to do different things. Here is some code that we set up to create a list where the user can remove the items from it.  We created our list as a variable so that we can remove items from it easily.

App Inventor


Here is our app in action! Test it for yourself!

ListPicker  (only available in App Inventor)

The ListPicker is a button that, when clicked on, displays a list of items for the user to choose from.

Here’s how you can add items using a list!

Here is what our app looks like:


Just like ListView, you can also let your user select an item and do something with it. Here is some code we wrote. We used a label to display what our user what picks.

Here’s our app in action. Test it for yourself!