Android Development for Everyday People - Diving In Part I

We start here at the very beginning. For our first application, we shall be creating the 3 Number Average program as an Android application.

I intend to show you the thought process I follow when creating an application. I learned the NICE technique while learning Visual Basic 6 a lifetime ago and I haven’t deviated too much from it.

NICE means Name, Interface, Controls and Events. Name refers to the name of the application you want to create. Interface refers to what your application looks like. Controls are the elements of the user interface while Events are responses to the interaction of the user with the user interface.

Getting Started

The first step in the creation of anything is to give it a name. The act of naming embodies properties that are desired in the named object. As an African, the act of naming is taken seriously as Africans believe that the name a child bears affects his life.

As a programmer, I will state that by getting the name right, you force your mind to converge around a single spot. Contrary to the philosophy of being open minded, a creative person cannot be open minded when creating. The act of creation is simple. You either focus or you fail. A name helps you to focus.

Our first application is called the Three Number Average. From the name, you should already be able to guess what it does. It is a simple mobile application for calculating the average of three numbers.

It sounds simple enough. But if you remember what I mentioned about IPO (Input, Process and Output), the first consideration we must have is our input. Input is how we will be taking in the 3 numbers. Our process is the computation of our average while the output is how our user will see the result of the computation.

Once we have an idea of the IPO process, we can draw our user interface. Our user interface is shown below:

If you look at the user interface above, the Compute Average block will be a button while for input we will use textboxes. The others will be labels. These are our controls. The C in the NICE acronym.

Even without being computer savy, I expect that you know that a button should be pressed. Pressing a button in our case will make the program execute an action. When a button is pressed, the program should grab the number values from the textboxes and display them in the label.

Even though this is a simple program, I would like to put 2 conditions that should be met before our program can run. This is the art of defensive programming. We don’t want our users to be able to do anything that can crash our program. These conditions 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

Keeping these two conditions in mind, let’s get started.

Project Creation

We start by creating a new project. Go the menu of App Inventor and select new project. Enter the name of the project as shown below:

After this, the project screen opens. This is your project screen an all you are going to do will be done here.

Using this screen, we can create any application we intend to create. I truly love the prototyping qualities in App Inventor because it lets you quickly create the vision of what you want to create. You don’t have to set up anything. Just dive in and start creating.

Adding Controls

Having named our application, the next thing we need to do is create the user interface. The first step in this task is to set the properties for our screen.

Set you AlignHorizontal property from Left to Center. This will make all the components you place on the screen to be aligned around the center.

Next we place 3 HorizontalArrangement components on the screen. They can be found in the Layout drawer of the Palette. Our application screen will now look like this:

Now to each Horizontal Arrangement, we add a label and a textbox. If you figure how to do this, your application screen will now look like this:

Next we add our button and 2 labels. Our user interface will now look like this:

Setting Properties

For our screen we want to change our Screen Orientation from Unspecified to Portrait and Title from Screen1 to Three Number Average. In App Inventor, your screen icon is what the user will see when the application is installed on his phone. If you don’t set an icon, App Inventor will use its default icon.

For the labels, set the Text property to match what we have in the interface that we have designed. For label 5 clear out the Text property. Once you change the Text property of label 5 to empty, it shrinks to a dash. Don’t worry about that for now.

As shown below, the Text property is what is displayed on the label.

For the textboxes, first change the Hint property to Please enter a number. This is what the user will see when the application is running on his phone. You can customise it to be specific for each textbox. Thus your Hint for the first textbox could be Please enter the first number. To make your application take only numbers as input, you need to check the NumberOnly property. The properties for the first textbox are shown below:

For our button, we set its Text property to Compute Average. Our user interface is complete and looks like this:

As you can see, our 5^th label is barely visible because we set its text to empty. If you have made it this far, I want to congratulate you as you have done 75% of the required work. The rest is to create the events you need and you are all done. Before we do that however, I want to teach you about testing your application.

Application Testing

If you go to the App Inventor website, you will be given all you need to setup your phone for App Testing. If you have a phone and follow the instructions, you should be all setup to run the app on your phone.

However if you don’t have a phone or in my case if you have to teach a class of students, you must run everything on your machine. I struggled with this problem until I finally solved it by using BlueStacks.

BlueStacks is a desktop application that allows you to run Android applications on your local machine. 

Download and installation is easy so I won’t cover that here. Once your installation is completed, launch BlueStacks. If you are offline, you will get the screen shown below:

The labelled part called APK is where you click to load your APK file for a project. So how do you create an APK file?

Creating an APK File

The process of creating an APK file is simple and easy in App Inventor. All you do is go to the menu and click App (save APK to my computer). This is shown below:

Once you do this, App Inventor will package your application and save it in the downloads folder of your machine.

Running the APK File

When you want to run an APK, click the APK tab in BlueStacks and navigate to the application you want to run. Select it and BlueStacks and click the Open button will take care of the rest. You can see this below:

Once the application is installed, you will get notification from BlueStacks that the application has finished installing.

Click on the All Apps button in BlueStacks and you will see the ThreeNumberAverage installed on your machine. My screen is shown below with the ThreeNumberAverage pointed out in red.

Click on it and application to launch it. Our application is shown below.

So our application is done and running on our BlueStacks. Since you have the APK, you can install it on your own phone. Do your own research on how to do this. Proceed at your own risk.

Conclusion

Congratulations on making it to the end of this week’s topic for Android Development for Everyday People. We are by no means done with this deep dive but I wanted to give you time to catch your breath as this week’s post was long and involves you having to do some research.

At this stage you should have version of the ThreeNumberAverage running on your BlueStacks. If you have a phone, you can run it on your phone. It does nothing because we haven’t added events to our application.

As a homework, go through this post again and work through your own application idea. Choose something simple and get it to work.

Join me next week for the concluding part of this section of Android Development for Everyday People.