Android Development for Everyday People - Making Lists

Welcome to a new week. This week we will be looking at lists. A list is a collection of items. An example of a list is a restaurant menu. It is a list of foods sold by the restaurant as well as their prices.

The first App Inventor application I created was Nigerian States and Capital. It was part of the requirements for finishing the edx course. Above is the image for the code used to create this project the initial project can be found here. Due to time constraints, I used only 5 out of the 36 states in Nigeria.

This project was also my first App Inventor application to be submitted to the Google Play Store. I expanded it to include 36 states in Nigeria along with the Federal Capital Territory. It is a quiz that test the knowledge of Nigerian states and their capitals. It can be found on the Google Play Store by clicking here.

This week I successfully uploaded AlphabetDraw to the Google Play Store. AlphabetDraw is a simple application designed to teach toddlers the letters of the alphabet. You can find it here.

If you look through all this applications, the concept of lists is used to create them. This week, we will be using my first mobile application as the basis for teaching this topic. So go to this link and download it.

Getting Started

If you can’t see the introductory image clearly, please download it and look through it. In the variables section, we have 4 variables and they are:

1. currentQuestionIndex
2. QuestionList
3. PictureList
4. AnswersList

We have 2 procedures to use in this application. I covered procedures in the last topic so please read through it. I know it was long but a firm grasp of that topic would help you as you go along. Our two procedures are:

1. clearText
2. moveThroughList

If you look at the rest of the code, you should notice that the naming convention I followed easily explains what my objects do. This is a good programming habit to imbibe. You should name objects and components of your application based on what they do.

The Screen1.Initialize block initializes the QuestionLabel to display the first question in the QuestionList.

The NextButton allows the user scroll through the questions in the QuestionList. If the user exceeds 5, the if block resets currentQuestionIndex to 1. This prevents the application from crashing.

The AnswerButton gives feedback to the user if the input values is correct or incorrect. Note the select list item block in the examples. It allows you to select the elements of a list.

List Indexing

Take the list of 5 states in Nigeria as shown below:

1. Abia State
2. Adamawa State
3. Akwa Ibom State
4. Anambra State
5. Bauchi State

List indexing is the assignment of a number to each value in a list. For our list above, the index of the Anambra State value is 4. In App Inventor, list indexing starts from 1. The power of this is that if we know the index of a list, we can get the value at that index.

This concept is used a lot in working with lists so please don’t skip this part. As a test, the index for Bauchi State is?

NICE Methodology

In an earlier lesson, I covered the NICE Methodology. I follow it whenever I am designing applications. NICE means Name, Interface, Controls and Events. For our application, we are lucky that the name has already been chosen.

For our user interface, we will use the design shown below:

The controls for our application are:

1. An image component to display the image of the state
2. A question label to display the question to the user
3. A textbox for the user to enter the answer
4. A submit button to submit the answer entered by the user
5. A feedback label to display if the entered value is correct or wrong
6. A next button to display the next values for the application

The events that will make our application work are the click events for the Submit and Next buttons.

Project Creation

The first thing to do is to create your project at http://ai2.appinventor.mit.edu you already know how to do this so I won’t be showing you this. Call your project Nigerian States and Capitals. Once your project window shows up, create your user interface. To do this, follow my lead.

Go to the user interface drawer and drag out image component unto the screen. This is shown below:

Next we go to the media section of our screen and upload the images of our states. I got the images I used from Wikipedia so get them from there.

The Media section is shown below:

Click on the Upload File button. It will bring up the pop up shown below:

Click on the Choose File button. It will bring up a screen which will allow you navigate to where your image is stored. Select the image. Your screen should be as shown below:

Click on OK to upload the image to the App Inventor setup. Your image is then uploaded. You will see that your media section has changed to reflect this. You can view this below:

Now attach the image you just uploaded to the image component you just uploaded. This is similar to the process of adding an icon to an application which we have already covered. So click inside the Picture property and select the image you have uploaded.

Set the height of the image component to 250 pixels and the width of fill parent. Click on the ScalePictureToFit checkbox and you have successfully set all the properties of the image component. It is important you do this first because the layout.

Drag out the label component under the image component. Click the rename button in the components section and rename it to QuestionLabel. Please there should be no spaces in the name of your components.

Clear out the text property and make it empty. Like in the 3 number average, the label becomes a dash but we know it’s still there.

Next drag out the horizontal arrangement under the Layout drawer. Inside it, place a textbox and call it AnswerText and a button and call the button AnswerButton.

For your AnswerText, set the hint to Enter an answer and the text on the AnswerButton to Submit.

Drag a label and rename it to FeedbackLabel. In the image on this post, I called it RightWrongLabel but at the time I was working on a deadline and didn’t have time to think about my project. Clear the text in the FeedbackLabel. Your label should disappear but you know it is there.

Finally, drag out a button component to the screen, rename it to NextButton. We also change its text value to Next. Now out user interface is complete. Our components drawer should look as shown below:

Event Handling

To get started, we need to first declare our variables. If you look carefully at the code for this program, our first variable currentQuestionIndex is set to 1. You already know how to do this.

Go to the blocks area and create a variable called currentQuestionIndex your workspace should only have one block that looks like this:

For our three remaining variables QuestionList, PictureList and AnswerList, creating them requires using the Lists Drawer.

I will demonstrate how to do this using the QuestionList variable as an example. First we go to the variables drawer and drag out the initialize global block. Change the name to QuestionList. Your block should now look like this:

Go to the List drawer and drag out the make a list block. Attach it to the end of the block above. Your block should now look like this:

Now we need a list of 5 items. So we click the part of the list block that looks like an eye. It should open up like this:

Now drag the item outside into the list block to make it up to 5. You have done this before so I expect your block now looks like this:

Now all we have to do is attach our questions to it. To do this, go to the Text drawer and drag out an empty text block. Attach it 5 times. Your list should now look like this:

Now enter your questions and your block should look like this:

Now our QuestionList variable is complete. Duplicate this block and do the same for AnswerList and PictureList. So AnswerList look like this:

Before we can create out PictureList variable, please upload remaining pictures for the states in Nigeria. Note how they are stored in the Media area and match them to the index they represent. Your PictureList should now look something like this:

Now that we are done with our variables, the hard work is out of the way. Now we need to start the program.

To start the program we need to program the code that would run when the program starts. This will ensure that the first question is displayed when the program is first run. To do this click on Screen1 and drag out the initialize block.

Next click on the QuestionLabel. Drag out the set QuestionLabel Text to block and snap it to the initialize block of Screen1. Your block should look like shown below:

Now we need to refer to the content of the first index of the QuestionList. This is the first question we will ask the user. Our goal is that once the application runs, we display the first question to the user. To do this, go to the Lists drawer and drag out the select list item. Your block will now be as shown below:

Go to the variables drawer and drag out the get block. Drag out 2 of them. In the first block, select the QuestionList and for the second one, select the currentQuestionIndex and attach it to the respective blocks. Our blocks should now look like this:

Our variable currentQuestionIndex is used to move through the list. The goal would be to increase it until we get to 5 then we reset its value to 1.

Now would be a good time to do a build of our application to see how far we have gone. You know how to build an application so there is no need for me to cover it again. Just ensure that your Screen Orientation for Screen1 is set to Portrait.

Once your build finishes, run it on your setup. I will run mine on BlueStacks. My application looks like this:

So we are close to getting to the original application. Now let’s move on and create the rest of this application.

To complete our application, we need to first create our procedures. Then we will use them in the event listeners.

Our first procedure is the clearText procedure. It clears the text in the AnswerText textbox and the FeedbackLabel label. This will allow us to clear them when we move to the next question. Its easy so I will do it for you. The code to do this is shown below:

Our next procedure is called moveThroughList and what it does is to allow us move through our QuestionList and PictureList as the user presses the next button.

The next thing to do is to create the events for our buttons. We start with the NextButton. When the NextButton is clicked by the user, we want to display the image of the next state and the question for that state. This event also resets our currentQuestionIndex when it is greater than 5.

The code to do this is shown below:

The if block can be found in the Control drawer. It is used to test if the value of the currentQuestionIndex is greater than 5. We place it after we have increased the value of the currentQuestionIndex.

Finally we create the event listener for our AnswerButton. When the user types in a value into the AnswerText textbox and presses the AnswerButton comparision is made between the value entered by the user and the correct answer. Based on this comparision, the text in the FeedbackLabel changes.

The code to do this is shown below:

The comparison is made using the block from the Logic drawer. The normal if block is used for the comparison but we click on the sink and bring out the else part of it. This is shown below:

So we are done creating our application. Build it and test it out. Mine works perfectly. If yours didn’t, take a break for a day. Come back tomorrow and redo the tutorial.

Science shows us that learning involves increasing the intelligence so give yourself time to grow.

Conclusion

Congratulation on making it to 4^th part of this course. I commend you for hanging in there. The next topic we will be covering will be databases. I haven’t created the application I intend to use to demonstrate the concept of databases so I will take my time in doing it.

You can check up on our progress by visiting this page. Have a great week and a great month ahead.

Android Development for Everyday People - Diving In Part II

Welcome to a new week. Last week, we created the user interface of the Three Number Average application. By now, I expect that you have installed BlueStacks based on the instructions given on this blog or that you have followed the instructions on the App Inventor website and configured to run your mobile device to run applications.

This week we will be looking how to add events to our mobile application. This will ensure that when we click the Compute Average button, the button computes the average of the 3 numbers and displays the result in our 5^th label.

Last week, we gave two conditions that had to be met in order for our application to work properly. For the sake of review, they are:

1. The textboxes should only allow numbers as input
2. The program should only compute the average when all the 3 textboxes are filled

We have ensured the first condition by ensuring that our textboxes only takes numbers in. To do this we used the NumbersOnly property for a textbox in App Inventor.

To meet the second condition, we will have to check that the values in each textbox is not empty. To do this, we first have to learn about variables, procedures and functions.

Variables, Procedures and Functions

If you were a librarian and you had a book in a library and you were searching for a book in the library, the easiest way would be to check the library reference. All things being equal, a check at the library reference would reveal the location of your book. Once you have the location of the book, you can then go to its location to retrieve it.

From the above example, the book you want to retrieve is a variable. The library reference is a function and you are a procedure. In computer science terms, a variable is a store of value, a procedure carries out an action and a function returns a result.

Once you understand how to think in this manner, you are well on your way to becoming a programmer. Getting this concept is the hardest step in programming. However, once you do, you can learn how to program in any language of your choice.

Enough talk. Let’s get started. Open your browser and visit the App Inventor website (Put link). You will see a list of projects. My projects list is shown below:

Click on the ThreeNumberAverage on your list. If you haven’t created any other project, you should have only 1 project listed. However, if you haven’t created any other project, I must state that I am disappointed. I told you to create the user interface for your own project. The best way to learn is by doing.

Once you click on the project, it loads up in the browser window. My screen is shown below:

To calculate the average of the three numbers, we have to get the values from their respective text boxes. To do this, we will need to access the Text property for each Textbox. This is shown below:

We will need four variables to calculate the average of the three numbers. Remember what I said about naming, our variable names must make sense to us. Remember that programming isn’t just giving instructions, it is communication.

Our variable names are:

1. firstNumber
2. secondNumber
3. thirdNumber
4. average

We need just 1 procedure to display the average in the 5^th label. However we will need 2 functions. Our first function called checkInput will check the textboxes to ensure that all of them have a number. Since it is a function, it will return either true of false. Once it is true, we will calculate the average otherwise, we will clear the textboxes and notify the user of the need to fill all the textboxes.

Programming Events

The events in App Inventor are found in by clicking Blocks in our menu. This is shown below:

Right now our Designer window is active. Clicking on Blocks takes us to our Blocks menu which is shown below:

The Blocks Viewer is empty. This is because we haven’t done any programming. Do note the dustbin at the corner. It is used to discard blocks we are no longer using. On the left, you should see a list of all your components. Look through this list carefully. You will realize that this is the same list we saw in the designer view.

To create a variable, go to Blocks. Scroll up until you see the Built-in menu. It is shown below:

Under Built-in, you see a list of stuff you can do. But where are the functions? In classical computer science, procedures are different from functions. However, App Inventor considers them the same. They only vary in usage.

So it begins. In App Inventor, all our programming is drag and drop. To accomplish this, click on the Variables link. It will bring up a pop out as shown below:

Now drag out the initialize global block to the white space. Your Blocks area should now look like this:

Next go to Math under the Built-in menu and click on it. You should see a pop out as shown below:

Drag out the empty block and snap it to the initialize global name block. Drag out the block with 0 and snap it to the initialize global name block.

You Block area should be as shown below:

Now click inside the area with name and change the name to firstNumber. Your Block area will be as shown below:

Do this for your other variables. Your Block area should be as shown below:

Now we can start. I won’t go over this again. Just use matching colours to follow along and ask me any questions if you need help. I can’t promise an immediate response as I work a full time job but I promise to answer as soon as I am able.

To handle our events, click on Button1, you will see a pop out as shown below:

Drag out the when Button1.click block into your code area. This block is called an event listener. Event listeners respond to an action. The action we want is that when Button1 is clicked, the checkInput function should first check if the text areas are empty. This function acts like a sentinel and protects our program.

Creating the checkInput Function

Our first function works by checking if the contents of the three textboxes have been filled. If they have been filled, we simply need to go ahead to calculate the average. Otherwise, we have to clear the text boxes and display a message to the user.

The code that does this is shown below:

To create this code, you need to use blocks from the Procedures, Control, Logic and Text under the Built-in drawer.

I won’t be showing you how to do this. Did you think this teacher would let you off so easy. Trust me on this. It isn’t hard to do. However, if you have any problems, Google “how to create a procedure in App Inventor”. This course is meant to teach you how to think like a programmer and part of that thought process is the ability to research. If you find it too hard to do, let me hear from you in the comments.

Debugging

Debugging is the act of getting our programs to work as expected. Whenever we create programs, it is rare to have them work exactly as we want them to work. To this end, we need a way to understand what is going on in our program.

In App Inventor, we debug by using the Notifier component. It is found under the user interface drawer in App Inventor. Add it to your Screen. Since it is a non visible component, it will not show on the screen.

Switch to the block area and drag click on your Notifier object. Next drag out the ShowAlert block for the Notifier object.

This is shown below:

Note the pouch near notice. It is where we will place the call to the checkInput function in this pouch.

Click on the Procedures drawer. Now you will see the call checkInput block.

Drag it out and place it on the pouch of the ShowAlert block. You code will be as shown below:

To call this block, click on Button1 and drag out its Click event listener. An event listener waits for an event to occur. Drag it and place the completed Notifier block inside it. Your code should be as shown below:

Build your app in App Inventor and test it on BlueStacks. Your application should look as shown below:

Note that the textboxes have their hints on them thus showing that they are empty. When you click the Compute Average button, you should see a popup saying false. When you fill just 1 of the textboxes, the false still pops up. However, once you fill all 3 textboxes and click on the Compute Average button.

As always, if you need help, fill them in the comments and I will get back to you when I can. But search before you ask. That is what I would do as a programmer.

Creating the calculateAverage Function

This function takes the values entered by the user and returns the average. The average is the sum of the numbers divided by 3.

The algorithm for this function is shown below:

1. Assign the values in the textboxes to their respective variables
2. Add the variables together and divide them by 3
3. Assign the value obtained from 2 above to the sum variable

When you drag out the procedure block from Procedure, to add parameters to it, you need to click on the blue notch on the function body it will bring out the following:

Now drag the input x block into the inputs block. Doing this will add your first parameter. This is shown below:

Do this 3 times to and rename your parameters to firstNumber, secondNumber and thirdNumber. Also rename your procedure to calculateAverage. Your function should look like below:

Now create the part that will compute our average. Drag out the get block from the Variables drawer and select firstNumber. Do this for secondNumber and thirdNumber.

Next go to the Maths drawer and drag out the addition block. Click on its notch. It will give you this diagram.

The code for the entire function is shown below:

Now add a 3 parameter and place your variables inside them. Now your function should look like this:

Next in Maths, find a division block. Place this block into your result and let the above block be on its left and the number 3 on its right. Your final function is shown below:

As always, let me have your questions in the comments area. The 3 was placed by using the number block found in the Math drawer.

Your function is complete.

Creating the displayAverage Procedure

A procedure carries out an action. Our procedure takes the average as a parameter and displays the result in the 5^th label. This procedure is easy so I will just show the code.

Putting it all together

Now that we have completed our functions and procedure, we can create the code for our button. This is shown below:

Build your application. Now you have successfully created your first application using App Inventor.

Adding an Application Icon

To customize your application, you need to add an icon. To do this, go Designer view and click on Screen1.

Browse down to Icon. This is shown below:

When you click inside it, you get a popup as shown below:

Click on the Upload File button to choose an icon of your choice. I will use my company logo. So I will navigate to it and load it up. This is shown below:

Click on the OK button. This will now load our icon. When we now build our app in BlueStacks or our mobile device, our app icon should have changed. Try it out yourself.

Conclusion

Congratulations on making it to the end of the second section of this series. I would be lying to you if I said it wasn’t long. Take heart in the fact that I wrote it.

I took my time with this section because I wanted to be sure that we went together. At the end of this section, I expect that the Three Number Average is running on your setup. Whether you are using BlueStacks or your mobile device.

What a long post. I now assume you know what to do with App Inventor. If you need help, leave a comment or do a Google Search. Have a great weekend.