In this lesson, we will be exploring new activities (ie moving between screens) as well as elements of Button, EditText, and TextView. We will create a simple program for calculating geometric figures.
We start by creating a project. From the menu select “Android Application Project”:
Next we give our application a name:
When creating a project, we also create the first activity. This will be just the first screen that will appear when you launch the application. We decide on its type – we leave the default “Blank Activity”:
Once the project is created, the main activity class will be opened. There will be two methods. The first “onCreate” is the method that is started when the activity is started. The second “onCreateOptionsMenu” is the method that starts when someone chooses a menu button. The second one we remove, we are not needed for now.
We will take care of the appearance of the first screen. We go to the layout file. We should see this screen. On the right, we have our activity, on the left a palette of components. If XML was visible instead of activity, select from the tabs at the bottom of the “Graphical Layout”:
In the meantime, I have prepared some pictures that I will need in the application (I drew in Paint: p). We will use them in our application. We will make a list of figures that appear on “Good morning” with pictures. When you click on the figure name, the program will go to the form to calculate the field of the figure.
them in the project now. I put them in the directory, I do CTRL + C, in the project I go in subdirectory res, then drawable-hdpi (or another drawable -…) and I do CRTL + V:
Now I’m going to edit the XML file that defines the layout of our main activity. We will edit manually, so this time we do not select “Graphical Layout” and “activity_main.xml” (or how did you name your file :)).
There will be some text there, but we do not need it so we delete it completely. Now we bring the content of the file to such a form:
“Table Layout” is a tabular layout of items on the activity screen, something like HTML. Another “TableRow” is just another row in the table. The elements in the “TableRow” element will be adjacent to each other within a given level in the table. We have two elements: ImageView and TextView. The first is used to display the images, the second to display (but not enter) the text. In both we have the parameter android: id . We give it a unique name for an element within a given activity. The value of this parameter must begin with “@ + id /” followed by our identifier. This identifier is indispensable to distinguish between elements and to uniquely indicate one of them. Both parameters are also layout_width and layout_height. They specify the width and height of the element. DP is pixels independent of screen resolution.
In the ImageView component is also the parameter android: src . Through it we give you the picture you want to display. As for the image contained in the project (and not on the remote server or memory card, for example), we start with “@ drawable /” followed by the name of the image thrown in one of the previous steps into the drawable-hdpi directory. We do not provide an extension (here .png) in the file name.
In the TextView, we have an Android: text element with which we set the text to be displayed on the element. There is another Android: the textSize element that defines the size of the font. I also used the android parameters: layout_marginLeft, and Android: layout_marginTop. They specify the left margin and the upper margin.
We go back to graphic design view. Our app should look something like this:
I added similar rows of the table with the following elements. I also changed the font size to 20dp because some descriptions did not fit on one line:
After this procedure the program looks like this:
It’s time to add a new activity – ie the screen to which the application should go when you click on the “square box”. Right click on the package containing my first activity and select NEW -> OTHER:
Next “Android Activity”:
As before, it assigns the activity class and the name layout file:
New activity class:
XML file by default, and after creating it will call its own file, but you can change it by specifying a different layout parameter. Here we have R.layout.activity_field_query because the file was created when generating a new activity:
For this moment, this activity will simply display “Hello World!”. In this activity we will add a couple of elements, it will be a form to calculate the square field. We go to the graphical layout editor:
The letter that is already there is slightly modified. Click on the right mouse button and select “Edit Text”:
Previously, the text was written as “directly”, now we will accept a slightly different convention. The project has a strings.xml file:
It contains the IDs and the texts assigned to them. If you want to display some text on an element, we will refer to it by the identifier for the text contained in the file.
Why are we all here? Thanks to that, we have all the text information in one place, and it is much easier to change it. In addition, it will be much easier to later make different language versions of our program, because it is enough to just replace this one file.
Now set the text to TextView, adding it to the strings.xml file:
We choose to edit and go to this screen:
Click the “New String” button. We should now see this screen:
In the “String” field, type the text you want to add to the strings.xml file. And displayed on the component. In the field “New R.string” we give the text id, under which will be written to the file.
Confirm. We’ll see this screen:
A new entry will appear in the strings.xml file, and the string on the component will change:
Well. We now have a start screen with a list of items to choose from, and a new screen that will be used to calculate the square. You need to connect these components now. When you click on the “square box” on our application, you should see activity for calculating the square field. It’s time to add a response to the click.
I changed the content of my main activity class. I added the variable t1 which will represent the TextView component with the text “Square Field”. On line 19 to this variable I assign a real component. I’m doing this using the built-in findViewById method. It has every class inheriting from Activity. This method is used to return a component reference from an activity. The element with the textView1 identifier (our “square box” from the main screen is assigned to variable t1):
We handle the click event by substituting the listener for the t1 object. Listener is a listening process that is waiting for an event. We create our listener as a class object OnClickListener, and at the same time we defile the response to the click (the onClick method). Temporarily, the response to a component click is to change the “Square box” to “ALE !!!!”. We set the listener for object t1 through the method of this object setOnClickListener.
I run the project and check the operation. The response to a click is as it should. Our program is a hypersensitive bexa 🙂
As soon as the click handler is available, we will now start reacting to another activity instead of changing the text.
I commented on the change of text. I added a Context object to which I assign an application context in line 28. On line 29 I create a new intention. Intentions are messages that combine different components. In this case, our intent will be to call another activity. On the same line, I also give information on what activity the class should be called. On line 30 I fired this activity.
I check the whole operation. This time, when you click “Square Field”, the text on the component does not change and the screen displays:
Since the calls are working, you have to rework this activity to actually calculate the square field. So I go to the layout file of this activity:
Then, in graphical design mode, you will need to include the necessary components.
There are new things here. The Button class, the LargeText component, and the EditText component. Button is just a button. LargeText is an element that displays text, but with an enlarged font. EditText is a component in which we can display some text, but the program user will be able to change it.
After arranging the elements we go to edit the activity class:
In the same way as clicking on the “Squared Box” button here I clicked the button with the word “Calculate”. I defined in lines 14-16 objects that will represent the components used by me. In lines 23-25 I assign references to these components to these objects. On lines 27-36 I have a software response at the click of a button. It works the same as the previous example. The novelty here is just a kind of reaction. In lines 31-33 it is described exactly what is going to happen. Generally, I set the text component to the result (this is the component class LargeText who has defaulted three dashes. The adjustable text is given by the square of the object side – an object of the EditText class, to which the user enters the length of the side of the square. On the way, there are also projections from text to number and vice versa.
Program after launch:
After entering the side length and clicking “Calculate” we have the following effect:
As an exercise that allows you to acquire a little practice and become familiar with the new technology, I suggest you complete the project described in this chapter.