Search This Blog

Saturday 7 April 2012

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.


No comments:

Post a Comment