Coding 6: Lists

Lists

Coding 6

This lesson will help you earn points in the following rubric lines: App Function and Code Complexity.

 

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 
  • Index -  a number that tells you where a piece of data is in a list 
  • Array - a way to organize data in computer science

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, 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

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

Here is how you could make a list of fruits in 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:

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:

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!

Bonus

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!

 

Reflection

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.

ListView

This is a visible component that allows placing a list of text elements in your Screen to display. Warning: This component will not work correctly on Screens that are scrollable.

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

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.

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

ListPicker

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!