Debugging and Testing the Application

I tested my app using the Android Emulator which is integrated with Eclipse (We previously discussed the Emulator in the post entitled "Writing your first Android program").

Having tested the app on the Emulator, I decided to test the app on my own phone.  I have found a quick and convenient way to get the app on to my phone using Dropbox.  I simply drop the app into the Dropbox folder on my PC, this is synchronised with the Dropbox app on my phone.  To learn more about Dropbox simply Google Dropbox.

Once I got the app onto my Phone, the first and most major bug I found was that my app worked fine provided the user did not rotate the phone from portrait to landscape.  You would be right in wondering why I did not spot this major flaw when testing with the emulator.  At the time I wrongly believed that the Emulator was limited on functionality, I now know that this is not the case.  You can rotate the Emulator screen by pressing Ctrl + F12.

So having found this major bug in my code, how did I fix it.  Well my good friend Google came to the rescue as usual.  A quick search of the internet revealed that unless you handle config changes then the Activity is restarted and the onCreate( ) function in the activity is called.

In order to handle config changes you need to tell the android system that you wish to handle configuration changes.  This is done in the manifest file.  I have used bold text in the extract below to show the change I had to make to the manifest file for my Maths Test App.


        <activity android:name=".TestActivity"
         android:configChanges="keyboardHidden|orientation"
                  android:label="@string/app_name">  
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

This change tells the android system that I will handle configuration changes in my code, so don't call onCreate( ) when the configuration changes, instead call

public void onConfigurationChanged(Configuration newConfig)

which I have implemented in my code.  In this function I load a different layout depending on the orientation of the phone and the size of the screen. I have obviously had to create multiple layouts (User Interfaces implemented using xml - see previous posts to learn more about layouts.).  The code extract below which I have simplified to make my point shows how to check the phone orientation and the size of the users screen.  Checking screen size requires you to do a Bitwise And - essentially I am checking to see if the small screen bit is set.

if((newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE)&& ((newConfig.screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) != Configuration.SCREENLAYOUT_SIZE_SMALL ))

        {
       
        setContentView(R.layout.main_smallscreen);
       
        }
        else if(newConfig.orientation == Configuration.ORIENTATION_PORTRAIT)
        {
       
        setContentView(R.layout.main);    
        }

This has probably been fairly heavy going, so a quick summary of what has been learnt may well be useful.

1. How to debug using the Emulator - Ctrl + F12 rotates the emulator screen
2. How to get an app onto your phone using Dropbox
3. How to handle configuration changes - so that your app does not restart when you rotate from portrait to landscape.
4. How to handle different screen sizes.

I will leave you to digest the above, any questions please get in touch.

Handling User Input

In the Maths Test App, the user inputs the answer to mathematical questions by pressing buttons on the user interface.  Feedback is provided to the user via a text box or TextView in Android speak.

The following is an extract from my main.xml layout file.  Layout files were discussed in the previous post (layout files define the user interface).  This extract is for the "ENTER" button on my user interface.  The extract tells the android system that I want a button, the id that I will use to get access to the button from my code is "ButtonEnter", the text on the button should say "ENTER", the button should be aligned with the Button which has id "ButtonZero" and should be below the Button with id "ButtonNine", the button should also only be big enough in terms of height and width to display the text "ENTER".

<Button 
android:id="@+id/ButtonEnter" 
android:text="ENTER" 
android:layout_alignBaseline="@+id/ButtonZero" 
android:layout_below="@+id/ButtonNine" android:layout_toRightOf="@+id/ButtonZero" android:layout_width="wrap_content" android:layout_height="wrap_content">
</Button>

The following line declares a class variable of type Button.  The Button class inherits from the View class. (If you have learnt Java, then you should know what classes, variables and inheritance is.  If you are struggling with these concepts then you need to revise your Java).


Button ButtonEnter;

The following line is used in code to get hold of an instance of the "ENTER" button and assign the instance to the class variable created earlier.  What this line of code is doing is calling a function provided by the Android SDK called findViewById.  You pass this function an argument which is the id of the View object you want to get hold of (The id's of all Views on your user interface are stored in the R.id class).  We know that the View object returned by the function is a Button, so we specifically cast it to a button.

ButtonEnter = (Button) findViewById(R.id.ButtonEnter);

Once you have got hold of the Button object you can call functions on it.  The following function sets the OnClickListener( ).  Setting the OnClickListener( ) causes the onClick function to be called when the user presses the "ENTER" button.


ButtonEnter.setOnClickListener(this);


The this argument passed to the setOnClickListener is an instance of the current activity.  My application only has the one activity and it is the onCreate function in this class which is the first to be called.  The declaration of the Activity class is shown below, the implements OnClickListener says this class will implement an onClick( )  function.

public class TestActivity extends Activity implements OnClickListener 
{


}


The signature of the onClick function which the code must implement is shown below.  This function will be called when the Enter button is pressed.  The View passed into the function will be an instance of the button pressed.  If you have more than one View for which you have defined OnClickListeners( ) then you will have to perform a check in the onClick( ) function to determine which View was clicked (I have to do this in the Maths Test App).

public void onClick(View v) 
{


}


The following extract is again from my layout file and creates the TextView.

<TextView 
android:id="@+id/textViewQuestion" 
android:layout_width="wrap_content" 
android:text="Press any button to begin" 
android:layout_height="wrap_content" 
android:layout_below="@+id/textViewHeader" 
android:layout_alignLeft="@+id/ButtonTwo" 
android:layout_marginLeft="14dp" 
android:layout_marginTop="14dp">
</TextView>


The following three lines of code declare a variable of type TextView, get hold of the TextView and then write "Hello World" in the TextView.

TextView tvQuestionAnswerString;

tvQuestionAnswerString = (TextView) findViewById(R.id.textViewQuestion);
tvQuestionAnswerString.setText("Hello World");


Todays post has been fairly heavy on the code, so I will leave you to digest it.  Try and create a simple application which uses buttons to get user input and TextViews to provide feedback to the user. Good bye.

Creating User Interfaces

The first thing that I usually do when writing software is design the user interface.  I determine what inputs I require from the user and how I am going to get the user to provide them.  I also decide what the output of my program is going to be and how I am going to get the output to the user.  This post is going to be about creating user interfaces.

The Maths Test App is a variation on a program that I had previously written in both managed C++ using the Visual Studio IDE and also as an ASP.net application using C# and the Visual Web Developer IDE.  Express versions of both Visual Studio and Visual Web Developer are available for free from the Microsoft Website.  You may wonder why I am talking about  C# and Visual Studio on an Android Blog when we are using Eclipse and Java.  The reason is that I personally find creating user interfaces in Visual Studio much easier.  Those of you who are familiar with creating user interfaces in Visual Studio will soon realise that it is not as easy to create user interfaces for Android Apps in Eclipse.  If you have not used Visual Studio then it may be worth downloading the express version for C# and writing a few applications with GUI based user interfaces.  This will have a couple of benefits, it will give you experience of creating GUIs in what I view is a more user friendly tool. You will also gain familiarity with another IDE (Integrated Development Environment).  If you are thinking I have just learnt Java so that I can write Android Apps and even before I've got started I am being asked to learn C# then don't worry - Java and C# are almost identical.  Also to be a true Software Engineer you need to know multiple languages.  You can download Visual Studio Express for C# from the following location:

http://www.microsoft.com/visualstudio/en-us/products/2010-editions/visual-csharp-express

Creating a user interface is so easy in Visual Studio that you can use it to quickly prototype a user interface and use that as the basis of discussions with potential users of your application.

Those of you who are already familiar with Visual Studio and want to get on with developing a user interface with Eclipse for an Android application - then the good news is that there is a visual tool for creating user interfaces in Eclipse.  As in Visual Studio you can drag and drop buttons, text boxes, labels and combo boxes on to your user interface.  Have a play with the tool for creating user interfaces by expanding the res folder, then the layout folder and then double clicking main.xml in an Android Project.  The screen shot below shows the user interface for the Maths Test Application in Eclipse.

User Interfaces in Android speak are known as layouts and are stored as xml files, have a look at the raw xml because you will need to understand it.  You will need to hand crank the xml at times, you will not be able to create the entire user interface by dragging and dropping components.

One of the very first lines of code in an Android Application usually loads the user interface.  An example of the line for loading a layout file called main.xml is shown below:

setContentView(R.layout.main);

That is all for today, go and practice creating GUI based user interfaces in either Visual Studio or Eclipse.  Until next time, good bye.

My first real App

My first app is called Maths Test and is featured on the Android Market.  Being a first app it is limited on functionality, I intend to extend its functionality over time.  Its worth getting the app because I will refer to it on this Blog regularly and will be using it as the basis of tutorials (To locate the app, simply search Sundev Pabla on the Android market).  Overtime I will probably end up publishing the full source code for the app.

Maths Test is a game in which you must answer as many mathematical questions as you can in three minutes.  You will not be presented with a new question until you get the question correct. The questions are a random selection of addition, subtraction, division and multiplication.  At the end of the game the player is told how many answers he got correct.

In subsequent posts, I will  cover the following topics:

• Creating the layout (This is the user interface, also known as a GUI)
• How to respond to user input
• Bugs and issues that I encountered (The first time I played the game, I felt very pleased with my self.  I then rotated my phone and found that although the game worked fine in portrait mode it restarted itself when you rotated to landscape.  Find out why this was the case and what I did about it).
• Using the Emulator (I didn't need to install the app on my mobile to find out I had issues when I rotate the phone to landscape.  Its possible to rotate the emulator - my old friend Google told me how to do this)
• How to add adverts to the app
• Where next for the app, what functionality could be added.

That is all for today.  Join me again to learn how the Maths Test app was developed.

Writing your first Android program

Following tradition, I started learning Android by going to the Hello World tutorial and implementing it.  The Hello World tutorial for Android can be found at:

http://developer.android.com/resources/tutorials/hello-world.html

This tutorial covers a lot more than just how to write Hello World to the screen.  It covers:

1. Installing a Platform using the Android SDK Manager - Installing the Android SDK does not install everything you need  (Neither would you want it to because you may not want to program for all versions of Android released to date or you may not have room to install them all).  I think I only installed the latest version as suggested in the tutorial.
2. Creating an Android Virtual Device using the AVD Manager - The virtual device or emulator is used to test your Android program.  Yes you could test it out on your own device, however you probably have one may be two Android devices (Possibly a smart phone and a tablet) - using the AVD Manager you can emulate devices that you don't own.
3. Creating your first Android Project - After creating the Android project, browse the folders so that you get a feel for what an Android project contains.  Have a look at the AndroidManifest.xml and the res/layout/main.xml - you will learn more about these later.
4. Creating a User Interface using Code
5. Running the Application
6. Updating the User Interface to use an XML layout which the code loads in

Work through the tutorial, then have a play - try writing different things to the screen, remember you will never learn much just following steps in a tutorial.  You need to play, try things out and read around the subject.

I will be back with more later, when we start delving deeper into the world of Android.