We are going to look at the resource files that have the code that defines our simple UI layout and the file that has our Java code. At this stage, we will not try to understand it all as we need to learn some more basics before it makes sense to do so. What we will see, however, is the basic content and structure of both files so we can reconcile their content with what we already know about Android resources and Java.
Let's look at the Java code first. You can see this code by left-clicking on the HelloWorldActivity.java tab, as shown in the following screenshot:
As we are not looking at the intricate details of the code, an annotated screenshot is more useful than reproducing the actual code in text form. Regularly refer to the following screenshot while reading on with this section:
The first thing to note is that I have added a few empty lines amongst the code to space things out a little bit and present a clearer image.
Now look at the left-hand side of the screenshot where multiple parts are labelled as 9. This points to all the little + and - buttons in the editor that can collapse and expand parts of the code. I have indeed collapsed some parts of the code, and other parts I have left visible. So, what you can see on your screen is slightly different to what you will see if you look at the screenshot. In Android Studio, play with the + and – buttons for a while to practice hiding and unhiding sections of the code. You might like to get your screen to look like the screenshot, but this is not a requirement for continuing. The technical term for hiding code like this is folding.
Part 1 is called the package declaration and, as you can see, it is the package name we chose when we created the project preceded by the word package. Every Java file will have a package declaration at the top.
Part 2 is eight lines of code that all begin with the word import. After the word import, we can see there are various dot-separated words. The last word of each line is the name of the class that line imports into our project, and all the earlier words in each line are the packages and sub-packages that contain these classes.
For example, this next line imports the AppCompatActivity class from the androidx.appcompat.app package and sub-packages:
import androidx.appcompat.app.AppCompatActivity;
This means that in our project, we will have access to these classes. In fact, it is these classes that the auto-generated code uses to make our simple app that we saw in action in the previous chapter.
We will not discuss all these classes in this chapter. It is just the concept that we can do this importing that is significant right now. Note that we can add extra classes from any package at any time, and we will do so when we improve upon our app shortly.
Part 3 of our code is called the class declaration. Here is that line in full and I have highlighted one part of it:
public class HelloWorldActivity extends AppCompatActivity {The class declaration is the start of a class. Notice that the highlighted part, HelloWorldActivity, is the name we chose when we created the project, and it is also the same as the filename HelloWorldActivity.java, as we would expect having discussed Java classes previously. The extends keyword means that our class called HelloWorldActivity will be of the type AppCompatActivity. We can, and will, use some classes without this extends part.
We use extends here because we want to use all the code that went into the AppCompatActivity class, as well as adding our own code to it as well. So we extend it. All this and more will become clear in Chapter 10, Object-Oriented Programming.
Finally, for part 3, look at the opening curly brace at the end of the line: {. Now look at the bottom of the screenshot at part 4 of our code. This closing curly brace } denotes the end of the class. Everything between the opening and closing curly braces, {...}, is part of the class.
Now look at part 5 of the code. Here is that line of code in full, with the key part for our current discussion highlighted:
protected void onCreate(Bundle savedInstanceState) {This is a method signature. The highlighted part, onCreate, is the method name. We make a method execute its code by using its name. We say we are calling a method when we do this.
Although we will not concern ourselves now with the parts of the code on either side of the method name, you might have noticed Bundle, one of the classes we imported at part 2 of our code. If we removed that related import line, Android Studio would not know what Bundle was and it would be unusable and indicated by a red underline as an error.
Our code would then not compile and run. Notice the very last thing in the line of code above is an opening curly brace, {. This denotes the start of the code contained within the onCreate method. Now jump to part 6 of our code and you will see a closing curly brace, }. You might have guessed that this is the end of the method. Everything between the opening and closing curly braces of the onCreate method is the code that executes when the method is called.
We do not need to go into what this code does yet but, as an overview, it sets up the appearance/layout of the app by referring to some resource files that were auto-generated by Android Studio when we created the project. I have highlighted these resource files with an outline in the previous screenshot.
Parts 7 and 8 are also methods that I have collapsed to make the screenshot and this discussion more straightforward. Their names are onCreateOptionsMenu and onOptionsItemSelected.
We know enough about our Java code to make some progress. We will see this code for real and change it later in this chapter.
It is true that contained within the code we have just had an overview of there is some complex syntax. However, what we are doing is building up just enough knowledge about this code so we can work within it to begin to make fast progress learning Java and Android without having to learn hundreds of pages of Java theory first. By the end of the book, all the code will make sense, but in order to make quick progress now, we just need to accept that some of the details will remain a mystery for a little while longer.
Now we will look at just one of the many .xml files. There are several different layout files and we will meet them all throughout the course of the book, but let's start with the most significant one that decides most of the appearance of our app.
Left-click on the content_hello_world.xml tab next to the HelloWorldActivity.java tab that we have been discussing.
In the main window on the right-hand side, you will see the Design view of our app, as shown in the following screenshot:
Most of the work that we do throughout the book when we design apps will be done in this design view. It is important, however, to know what is going on behind the scenes.
The design view is a graphical representation of the XML code contained in the content_hello_world.xml file. Click on the Text tab (as outlined near the bottom-left in the previous screenshot) to see the XML code that forms the layout. I have annotated a screenshot of the XML text so we can discuss it next:
The first thing to note is that this file does not represent the entire layout. It does, however, represent most of the surface area and the Hello World message in the centre. Also, on the left-hand side, we can see the now- familiar + and – icons with which we can fold and unfold sections of the code.
If we first look at the part of the code labeled 1, we can see that the very first thing is …ConstraintLayout.... A ConstraintLayout is a UI element that is used to wrap other parts of the UI.
When we add a new element to a UI in Android, we always start a line with a < followed by the element's name.
The code that follows that rather long and cumbersome looking line defines the attributes this element will have. This can include dozens of different things, depending on the type of UI element it is. Here, amongst a bit of other XML, we can see things such as layout_width, layout_height and showIn. All these attributes define how the ConstraintLayout will appear on the user's screen. The attributes for the ConstraintLayout end at the first > labelled 1b.
If we look at the bottom of our XML screenshot, we will see the code labeled 2. This code, </…ConstraintLayout>, marks the end of the ConstraintLayout. Anything between the closing > of the element's attributes, and the </…ConstraintLayout> that defines its end is considered a child of the element. So, we can see that our ConstraintLayout has/contains a child. Let's look at that child now.
Using what we just learned, we can devise that the UI element that starts at position 3 in the screenshot is called a TextView. Just like its parent, it starts with a < and its name: <TextView.... If we look further into our TextView, we can see it has several attributes. It has a text attribute that is set to "Hello world!" This, of course, is the exact text that our app shows to the user. It also has layout_width and layout_height attributes that are both set to "wrap_content." This tells the TextView that it can take up as much space as the content it has needs. As we will see throughout the book, there are many more attributes available for this and other UI elements. The final attribute in the TextView is id, and we will see how we and Android use the id attribute in the next section when we improve this first app.
Notice that the code at the 4 position on our XML screenshot is />. This marks the end of the TextView element. This is slightly different to how the end of the ConstraintLayout was written. When an element in XML has no children, we can just end it like this />. When the element has children and its end comes further on in the code from where its attributes are defined, it is much clearer to end the element by repeating its name like this – </…ConstraintLayout>.
Note
You might be wondering why the element name for the TextView is clear and concise (simply TextView), yet the full name for the ConstraintView is preceded by complicated apparent clutter (androidx.constraintlayout.widget.ConstraintLayout). This ConstraintLayout is a special layout that is used to ensure our app's compatibility with older versions of Android. As we will see in a minute, when we add buttons to the app, most elements have simple and concise names.
We will edit this code in the next section and learn more about the attributes, as well as seeing another type of UI element—a Button.