Programming : Step 2

Crap App

The first app you will make is crap.  Honestly it really is crap, but if you have programmed before (and I expect you have) you will know that the first program in any programming language is always crap.  Usually you are given the code to make a simple 'Hello World' program that demonstrates how to use the programming environment (for us that is Eclipse) and then how to check for errors and run the program. 

We will do just that and make a crap app that will run in the emulator.  Prepare to be very interested.  Unfortunately this crap app will be the program you return to again and again just to remind yourself how the basics are done.  In order to make an app you need a number of files in your program that you edit and so even a crap app might seem a little confusing at first.  Once you make enough apps lots of the information here will have sunk in and you will stop referring back.

Our crap app will simply display some text in our app.  We will see the app's name when we run it at the top and just below it we will see a line of text which will say 'GLASSJAW MAKES CRAP' or whatever text you want to appear.

To make an app we need a nice new clean Android project with the default files and their default settings.  Lets try that now.

1. Start Eclipse.  Select File > New > Android Project
2. Enter a project name.  A good name is one with lots of dots and descriptive.  When you eventually place your apps on the marketplace you will need unique names so use something that is unique.  I have been using matthew.harkin.uk.crapapp - here the end part refers to what app I have made.
3. You also need a title that will appear on the titlebar of the app while running.  I am going to use Crap App.
4. You also need a package name, I will use the project name again to make it easy to remember so I enter matthew.harkin.uk.crapapp again.
5. You need to provide an activity name.  This will become the class name in your program code and should be simple yet descriptive.  It is usually a capital letter followed by other lowercase letters with no numbers.  I will use Startup.
6. You now need to click on the version of Android your app is for.  The lower the version the more compatible it will be with devices, the higher the version the less compatible with older devices.  At the time of producing this I am using 2.3 so I click on the version that says 2.3 (you will also see the number 10 to the right).
7. Where it says mini SDK I enter the number 10 and select Finish.

The Android project will be created.

The project contains a number of folders with files.  These folders are grouped to contain different elements of the project.  In the RES folder resources are held.  There are other folders including LAYOUT which are files that describe how the app's human user interface will look like.  It is here that we will look first.  In order to make an app it is best to design the user interface and then add in some programming later.  We will infact do no actual programming in this app because we can place text and define what it says here.

Locate the file main.xml, which is the default name for the default user interface. Opening this file will provide an example of what the main user interface looks like in graphical view.  We can switch between graphical view and code view easily.

As you can see the file contains something called XML which if you have not used before will become quickly familiar with.  It looks a bit like HTML web page tags, but in this case defines tags where Android user interface elements will appear and what they will be like.  Below is a sample of the file with some explanation as to what they mean.

INSERT GUIDE

By default the main.xml file contains a TextView tag that contains a @string reference.  This @string refers to another file called strings.xml located in the RES folder as well, so locate that file and open it to.  Again you will see that there is a graphical type of view and a code view that allows you to see the XML.  Below is a sample of the file with some explanation as to what they mean.

INSERT GUIDE

Now lets remove the TextView from the main.xml file.  To do this you can click on it in the graphical view and then press the DELETE key or highlight and press DELETE in the code view.  The reason why we have done this is to allow you some practice at placing TextView elements yourself.

Make sure you are in the graphical view and look down the list of elements until you find TextView.  Now click and drag a TextView element on to the sample screen.  This will be placed in the exact location the other TextView was located.  You can even switch to code view in order to see the written XML.  Save what you have done so far (always remember to save regularly) and move back to the strings.xml file.

This file contains data.  The data can be of a number of different types.  In this app we will see the type string and color.

1. Click > Add > String and then enter the name myText and the message GLASSJAW MAKES CRAP.  This will be some data called myText that we will use with your TextView in the mani.xml file.  Obviously if you change the message here, you will have a different message when you run your app.
2. Click > Add > Color and then enter the name redColour and the message #900.  This means you want a data type that is a colour value and the #900 represents the colour red using the simple RGB system.  #090 is green, #009 is blue and mixtures like #932 is another colour.
3. Click > Add > Color and then enter the name blueColour and the message #009.
4. Click > Add > Color and then enter the name greenColour and the message #090.

We will use both of these elements of data in your app, so we see the message but with a colour other than the default used by the app for both the text and the background of the text.

Now save and go back to the main.xml file.  Here we will use the graphical view initially to see how to use it to alter the properties of screen/user interface elements.  Once we do this we will look at the XML code to see how it is also written.  Make sure your are in the graphical view.

1. Click on the TextView element to highlight it.
2. Right Click the TextView element and select > Properties.
3. Locate the property Text and select it.  Use the window that appears to click String > myText.  This means we want our message to contain the text we defined in the string.xml file which was GLASSJAW MAKES CRAP.
4. Locate the property TextColor and select it.  Use the window that appears to click Color > redColour.  This means we want our message to be red.
5. Locate the property Background and select it.  Use the window that appears to click Color > blueColour.  This means we want our message to have a blue background.

It's hard to believe but we are almost done.  The next thing to do is to use the other colour element called greenColour and use it for the background if another element on the screen called a LinearLayout.  To select this layout, look down the right side window that contains a list of all of the elements that make up the screen.  Click on > LinearLayout and now look at the bottom middle of the window.  There are a number of tabs, one says Properties.  Click on > Properties tab and you will see a list of the properties for the LinearLayout.  Click down the list until you find Background, and in the box type blueColour.  This is another way to alter the properties of screen elements, you could have used this method for the TextView also.

If you want you can click on the code view and see the XML for main.xml and string.xml.  Below is the example.  Just reading it should be easy enough to see how the XML is written to allow text and colours to operate.

INSERT GUIDE

Save everything again.  We have just completed the crap app.

In order to run an app, we just right click on the project folder name (in my case it is matthew.harkin.uk.crapapp) and then select > Run.  This will start up the emulator you created previously and after a while (be patient) the app will run in the phone emulator.  As you can see it is a red/green/blue piece of crap.

So what have we learned making this crap app? 

• We have seen the concept of the user interface built using XML. 
• We have realised that we can store data in a file called strings.xml and use it to link with screen elements in main.xml. 
• We have also seen that we can alter the properties of screen elements easily.
• We have learned how to make string data and how to make simple RGB colour data, although we can make more complex colours later on.
• We have learned how to run an app in the emulator.

Next time we will make an app that makes use of an EditText area and some simple maths.