Programming : Step 3

Crap Sums App

If you have followed my blog in the order it was created you will now know that you can make a crap app in Android easily.  The only real learning curve was how to use the Eclipse environment and how some of the files link together.

This next app is again crap, but I remind you that from crap apps can come okay apps.  Our app will allow the entry of a number into a nice text box.  In order to make anything happen a button will be clicked and the value in the text box will be doubled and show as a message on the screen.

As you can guess this app will need more screen elements that used before, and will involve checking for the button being clicked, and from that using some java code to do maths and change the message on the screen.  The learning curve has now just shot up from flatline to almost getting a pulse - enjoy.

1. Create a new project.  My project is matthew.harkin.uk.sums with title Sums, package matthew.harkin.uk.sums, activity Sumz, version 2,3 mini SDK 10.  Now do all of that for yourself using the names you find suitable.
2. Open main.xml, delete the default TextView and drop in an EditText, a Button and a TextView in that order.  Don't bother about the layout right now, we can address that later.  Right now we are working on the mechanics of the app only.
3. The screen elements have default names.  We will change these default names for practise and because I want different ones.  Using the properties of each of the screen elements, change the EditText name to editNumber, the Button name to buttonGo and the TextView name to textNumber.  You could also easily do this by changing to code view and editing the XML.
4. Open strings.xml and make a new string called myNumber with a message that is blank.
5. Make another string called startNumber with a message that is 10.
6. Go back to mani.xml and ensure that the string property of textNumber is set to myNumber.  This means when the app is first launched the TextView will contain nothing, but we will of course change that when we need to while the app is running.
7. Set the Button buttonGo property onClick to eventHandler.  This will be a new method we will code into our app - yes that's right, we will write some actual code soon.
8. Set the EditText editNumber property Text to startNumber.  This means that we will see the number 10 in the edit text box when the app is run.  This can be the default number.

INSERT GUIDE/CODE FOR MAIN AN STRINGS

Now that was a lot of setting of screen elements and strings.  When making apps we need to spend some time doing this sort of thing so when we actually code the app, we will have places to refer to in the code.  Let's do some programming now.

Locate the file called Sumz.java which is in the SRC folder.  Open Sumz.java and have a look at the default code provided.

INSERT GUIDE

If you are familiar with Java (which I hope you are) you will recognise the definition of a class.  You will see that the class is called Sumz and it is within the package matthew.harkin.uk.sums.  You will see extends Activity which is an Android portion of code that means you are using the Activity class.  Each screen or task you see an Android app produce/use is usually a new activity.  So Sumz is an activity in Android.

Below the package name you will see which Android classes are being use by default.  We will use these and add some of our own as well as we add in more Android concepts.  Since we are using a TextView we see a reference to that here.  We do not see one for the Button or the EditText.  This means that we need to ensure that the program can use them by adding some lines here near the top, just under all of the other android references.  See below.

INSERT GUIDE

Now lets look at the code inside the class Sumz.  We see a method called onCreate.  This method is Android saying when my app is created/started this is what will happen.  Within this we see a line referring to R.layour.main - this is saying use main.xml as the default user interface screen when the app is started.  This is good because we are using main.  If you wanted to use another layout you had created called highscores.xml you would change this to R.layout.highscores - that way the default user interface screen would be different.

In order for our program to work we need to be able to enter something into the EditText area when we run our app, by default this will do so and also provide a nice little on screen keyboard so let's not worry about that part of the app yet.  The part we need to worry about is detecting the button being clicked.  There are a couple of ways we can do that but we will look at the simplest method right now.

We need to add a new method to the Sumz class called eventHandler.  Type the following in at the appropriate location.  If you don't know where, just scroll down this blog and copy the code.   I do believe however that typing code is better because it learns you more by seeing the code as you type.

//This method will detect the button click
public void eventHandler(){

} //end eventHandler method

This is how you define a simple method that does not return a value (void means do not return anything) and the // mean comments by the programmer.  I use // to comment quite a lot to remind myself what I did.  The use of the word public means that this method is available for use by all.  The insides of the method are enclosed by { and }, so when I add code between these 2 {} it means this is the code to execute when the button is clicked.  I like this method eventHandler because if I have lots of buttons in an app I can use it to see which button was clicked and then execute code depending.  In order to detect which button we can use some more code to read the state of the button.  When I say state I mean the properties of the button just as it was clicked.  Below is the code so far to make it more readable.

INSERT IMAGE

Now lets add the code that reads the button state.  We will use a switch command to identify the correct button.  If you are not familiar with switch then I suggest a quick read up on java and the switch command.  It operates like a neater version of an if > if else > if else > else command.

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.

Programming : Step 1

Setting Up Your Computer

In order to program an Android app you will need some software.  These can all be downloaded for free and are updated regularly to ensure correctness.  You do not need to have an Android enable device initially to test your apps on but quite quickly you will want one to ensure the work well when running on a live system.

1. Download Eclipse here, which is an IDE (programming envorinment) that can be used for programming within.  You can just as easily make a Java program using Eclipse but we will ensure that it contains the appropriate Android plugins so you can also make Android apps.
2. Download the Android SDK here, which contains the development kit to make apps.
3. Download Android Tools here, which is also required to make apps.

The next thing to do is ensure that Eclipse and the Android SDK are working together.  In order to achieve this do the following, and make sure you don't miss anything out.

INSERT GUIDE

In order to see your Android apps working without a hardware device like an Android phone, you can use the Emulator instead which is reasonable, but takes a little time to start up sometimes.  This must be created by yourself using the following.

INSERT GUIDE

Before you can make any apps, you need to have a look at the phone emulator and become familiar with the way an Android device operates.  To do this start up the emulator using the following.

INSERT GUIDE

And that is how you prepare your computer before you start to make your first Android app.

How To Become An Android Marketplace Publisher : Step 1

Get A Stall At The Local Market

Hello all budding Android app programmers.  My name is Glassjaw (Matt Harkin) and I am like you just starting out to learn how to make apps in Android with a hope of selling some for some very low amount but many times.

In order to achieve this one of the most important elements to enable is an Android Marketplace account that allows you to sell your apps or even show off your free ones. 

After a quick look at the Android Marketplace I found that in order to make some money through them at the moment (April 2011) you need to set up an AdSense account which will tie in with the market and allow payments to be received by yourself.  So first things first, get to the appropriate AdSense page and sign up.

I found the page easy enough to complete apart from the first box: Website URL.  In order to get past the page you need one, so I have used my current Android Blog in order to provide a valid one which I will also be using to provide free tutorials on app programming as the weeks progress.

Here is the page about needing AdSense for the Android Marketplace.  Now all I need to do is wait for the guys at AdSense to agree that I am an okay kind of guy and let me have an account.  Once that is completed I will then move on to Step 2 which will involve me signing up to the market itself.