Android Adventures - Activity And UI
Android Adventures - Activity And UI
Written by Mike James   
Thursday, 12 May 2016
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 textView object. You probably already know that a button is for pressing and you can guess that a textView is used to show the user some text.  

First remove the Hello World text that is generated automatically when you create a new blank Activity. Simply load the content_main.xml file by opening it.

The content_main.xml is where you create all of your UI. There is another layout file but as explained in chapter 1 this simply provides the standard elements in a UI like the AppBar. Notice that because of this split between two layour files you can see UI components in the designer that you cannot edit - they belong to the other layout file. 

To remove the "Hello World" all you have to do is select it and press the delete key:




Notice that there 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. Notice that Android Studio provides positioning information to help you align components of the UI.




That's about it and yes creating a complete complex UI is just more of the same. Pick components from the Palette and position them on the design surface. 

If you now run the program, click on the green run icon and 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.  The button does click but there is no code connected to the button click event to say what should happen - some thing we will deal with very soon. 


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. Recall that 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. 




Some times you will make a change in the designer that has a wider effect than just changing a single property. In these cases some times the designer will ask if it is ok to make a bigger change to the XML file. As long as you haven't made a mistake the answer is usually yes.  


Now we want to do something when the button is clicked.

Android supports a complete event driven UI.

So what we need to do next is define a method or function that is called when the button is clicked.

If you are familiar with other languages you might find the Java way of working with events strange and convoluted. It is and we will have to come back to discover the full story of how events are implemented later. 

There are a number of different ways to specify an event handler but the simplest is to use the designer to generate the XML needed for the system to hookup the event handler to the event.

This is not a method that you can use all of the time, it only works for the click event, but it gets you started.

It is also worth point out if you have used something like Visual Studio that Android Studio doesn't automatically create event handlers for you. In the case of Android Studio you have to create a function and then assign it as the onClick handler. The reason for this apparently unhelpful approach is that Java events are much more involved than .NET or JavaScript events. 

Using the designer approach method click event handlers are simply public methods of the current Activity with the signature:

void method( View v)

Just in case you have missed or forgotten what a function's signature is - it is simply the types of the parameters and the return type. In this case the function takes a single parameter which is a View and returns void i.e. nothing. 

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


This needs to be added directly following the onCreate method or anywhere that makes it a method of the MainActivity class.

With all this code out of the way 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:




Notice that the list includes all of the functions that have the correct signature. Just because it appears in the list doesn't mean its a suitable event handler. 

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 onClick property in the properties window.

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


Last Updated ( Thursday, 12 May 2016 )

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