Android Adventures - Activity And UI
Android Adventures - Activity And UI
Written by Mike James   
Tuesday, 10 February 2015
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 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 are wondering what the light bulb icon is all about then it is worth pointing out at this early stage that Android Studio tries to help as much as it can. The light bulb means that there is some issue that you might like to deal with. If you click on the icon you will see a list of problems or potential problems. In this case the problem is that we are using a string in the textbox and good practice is that we should use a resource. Until we find out more about resources you can ignore this gentle warning. 

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




Be  careful because there is a "feature" in Android Studio version 1 that results in a component that doesn't have an id being assigned a null id if you double click and then don't enter an id string. If this happens you will get an error message when you run the program and the only way to correct the problem is to edit the XML file and remove the <android:id> tag completely. Presumably one day this will be fixed.



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.

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.

Using the designer approach method click 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

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

When you first enter this method into the code you will almost certainly notice a that View is shown in red and when you hover over the word you will see an error message: Cannot Resolve Symbol View. This is because any class you use that is not defined within the same file, and this means most of them, needs an import statement. Imports are all grouped together at the top of the program and what you need to add is the line:

import android.view.View;

You can always add an import statement manually but Android Studio has a general mechanism for fixing simple omissions and errors. All you have to do is position the cursor in the word shown in red and press Alt+enter. This either fixes the problem, in which case the word changes from red to its normal color or it offers you a list of alternatives which fix the problem for you to pick from. 


The most important thing to know is that when you see a word in red - then there is a problem you need to fix either manually or with Android Studio's help. 

When you use a class in your program it has to be imported. 

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:




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 ( Sunday, 26 July 2015 )

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