Android Adventures - Activity And UI
Written by Mike James   
Monday, 27 May 2013
Article Index
Android Adventures - Activity And UI
Creating a UI
Connecting the Activity to the UI

Creating A UI

To see how all of this fits together lets add a button and a text 

First remove the Hello World text that is generated automatically when you create a new blank Activity. Simply load the activity_main.XML file by opening it. You will see the designer and can select the text by clicking on it and delete the text by pressing delete. 




Notice that the is an undo command if you delete something by mistake. 

Next select the button in the Widgets section of the Palette by clicking on it:




If you now move the cursor over to the design area you will discover that as you move various alignments are indicated along with positioning information. 




To place the button simply click and a full button complete with the default caption New Button will appear. 




Now you have a button on the UI ready to go let's add a Large Text Widget in exactly the same way - click on it in the Palette, position in the designer and click to set the position. 




That's about it and yes creating a UI is just more of the same. 

If you now run the program, see chapter 1 if you don't know how to do this, you will see your new UI. 




Of course it doesn't do anything even if you can click the button.


Our next task is to change the caption on the button. You should know that objects have properties and methods. Things like caption text, background color and so on for UI widgets are represented as properties.

You can change properties in code or at design time you can use the Properties window on the right-hand side of the screen. If you select the button and scroll down in the properties window you will eventually find the button's text property. This currently contains the value "New Button". If you change this to "Click Me" and re-run the app you will see that the caption has changed. 

You can set the initial properties of any of the widgets that you have placed in the UI. There are a great many properties and we need to spend some time looking at some of them. However for the moment the important thing is that you see how easy it is to change a property using the Property window.

As you might guess, the property that you changed results in a change in the XML file defining the layout. The general principle is that the designer creates the XML file that you could have created by hand without any help from the designer. In this sense, the designer doesn't add anything to the process other than being much easier.


As a tip if you double click on a widget then you will be presented with a dialog box that lets you examine and change the text and id properties of the widget in question. 





Now we want to do something when the button is clicked. Android supports a complete event driven system. So what we need to do next is define a method that is called when the button is clicked.

Oddly there is more than one way to do this but the simplest is to use the designer to generate the XML needed for the system to hookup the event handler to the event. 

Using this method event handlers are simply public methods of the current Activity with the signature:

method( View v)

You can call the method anything you like but in most cases it helps to specify exactly what the event it handles is. In this case we want to handle the button's onClick event - which occurs when the user clicks on the button with a mouse or more likely taps on the button using a touch sensitive device. 

Load the file into the code editor and add the following method: 

public void buttonOnClick(View v) {
// do something when the button is clicked

If you now switch back to the designer and select the button. Scroll down in the property window until you see the onClick property. If you now click the down arrow to see the drop down list of possible choices you should see you buttonOnClick method:




Alternatively you can simply type in the name of the event handler as the properties value.  Notice that you don't type in parameters just the name of the method.

That's all there is to it - define your event handler with the correct signature and set the appropriate onEvent property in the properties window.

The only disadvantage of this method is that the event handler has to be within the current Activity. This is usually not important as the handler is usually best kept with the widget it responds to. 

Notice that some event handlers return a result to tell the system what to do next - more about this later.

At some point in the future you will have to learn how to hook up an event handler using code and you might be surprised that it isn't as easy as using the designer - more of this in a future chapter. 

In most cases you can hook up click event handlers at design time and for this the designer XML generated method is perfectly good and much simpler.

When it comes to other types of event you have to do the job in code - the XML method only works for onClick.

Last Updated ( Thursday, 20 November 2014 )

Copyright © 2015 All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.