Graphic User Interfaces and Events
Applications with Graphic User Interfaces (GUIs) are event driven, meaning that they do something when a user performs some action such as clicking on a button, selecting an item in a drop-down list, or even entering text in a text entry field. This is different from a console application (nothing to do with a gaming console) where the user is presented with some printed options on the text only screen and has to type in some selection, to which the application responds, usually including more text output, when the user finishes typing. GUIs are the rule these days, and many people have never encountered a console application.
Nonetheless, console applications are much simpler than GUIs, and you can get started with programming at a very basic level very quickly. In this series of tutorials we will be using Android Studio to create GUI applications, but I want to keep the GUI out of the way as far as possible. So we will first deal with getting some user input and producing some output in the GUI, but not concern ourselves at this stage with the details. After reviewing some basic programming concepts we can get back to the details of how a GUI works at a later stage.
In this project we will create an app with a text entry field (an EditText or Plain Text component), a Button, and a TextView component to display output. The idea is simple – enter some text in the EditText, click on the Button, and the TextView displays the text that you just entered.
Create New Project
Create a new project like we did in the last tutorial, called Copy Text. Add an Empty Activity and check Generate Layout File. You can uncheck Backwards Compatibility. The default layout already has a TextView component, with Hello World as it’s text. Disconnect this from the layout by clicking on it to select it and then clicking on the circle on each side.
Add an EditText component (called PlainText in the Text palette on the left side of the design view). Click on the circle on the top edge and drag up to the top to connect, then drag the component down a bit (still connected) to place it. If no side is connected to an edge of the layout connect at least one now.
Drag and drop a Button from the Buttons palette. Connect the circle on the top edge to the circle on the bottom edge of the Plain Text component. The sides will probably automatically be connected to the edges of the layout,but if not drag from at least one edge circle to the layout edge to connect.
The top of the EditText can be connected to the bottom edge of the button, and connect the side circles to the layout edges. The EditText can be enlarged t match the Plain Text (EditText) component by dragging corner handles.
When using ConstraintLayout, which is currently the default, each component needs to be connected to something on the side and something above it (if in the top half of the layout) or something below it (if in the bottom half). Drag from one of the circles on the bounding box to the element that you want to attach it to (usually the edge of the layout).
The GUI components need ids to allow the code in MainActivity.java to find them. The TextView component that came with the Empty Activity doesn’t have an id. If you look at the xml file (Text view) you can see that both the EditText component and the Button have ids, but the TextView doesn’t.
In the Design view the properties of a selected component are displayed on the right. The id is right at the top, not very easy to read in my version of Android Studio. Select the TextView and click on the blank field next to id to enter an idea (textView is a typical name for a component like this, make sure you start with small lower-case letter, not a capital). Alternatively you can edit the xml file to add an id. Just copy the id line from one of the other components, paste it into the TextView component, and change the actual id to suit.
Handle a Button click
Here’s what this simple app is supposed to do.
- User types in the EditText component
- User clicks the Button
- Programming code in MainActivity.java reads the text in the EditText and writes it into the TextView component.
Our task is to work out how to do what the app is supposed to do, and then to make sure that it happens when the button is clicked. To do this we create a function (also called a method) which is a group of steps to be executed in order to do the job, and then we tell android to use this method when the button is clicked.
The steps in the code use the id’s of the components to read and write the text. There is already one method in the MainActivity class, namely onCreate. We’ll write another one called onClick. This must be written inside the class but not inside the onCreate method. The onClick method must start with public void, and have the parentheses with (View view) after the name. Android Studio will warn you to import the View class, which has been done in the image below
The onClick method first creates a couple of variable names (a variable stores some information) for the EditText and TextView components, and uses their ids to connect these names to the actual components on the GUI. The code required to do this is a bit complex, at least not absolute beginner level, but it’s just what we have to do when working with a GUI. Focus on the fact that the code can find the components, and read and write text to them. I haven’t even discussed methods yet, but again you can’t avoid them when working with a GUI. We’ll get there eventually. Don’t try to understand everything all at once.
We now have our method to do the job, but we haven’t yet told Android Studio to use this method to handle button clicks. That’s the next step. We do that in the XML file, buy adding a line to the Button component definition.
Run the app, type some text into the EditText, click the button and you should see your text copied to the TextView Below. The emulators on my computer block the bottom half of the screen with a keyboard, hiding the TextView if it is too far down the screen. I can’t see how to get rid of the keyboard so you may need to place all your components higher up to see this work.
We have seen how to get user input (EditText component), to output content to the user (TextView), and how to make this happen with some code (onClick method) which is assigned to deal with clicks on the button.