You don't have to drag and drop controls onto your layouts in the designer. If you wanted to, you could do everything in XML code. Click on the Text tab at the bottom of the designer:
You'll then see all the XML for your design:
Whenever you drop a control onto the design surface, Android Studio is building XML in the background. For example, here's the XML for the TextView:
So if we wanted to set a left margin of 8dp, we only needed to type this:
The constraints we added are at the bottom:
However, it's incredibly difficult to remember all the XML tags, as there are just so many of them. Whenever we can then, we'll be designing our apps via the Design tab instead of the Text tab. We still may need to tweak the XML, though.
One XML file we can take a look at is called strings.xml. The idea is that you put all your text strings in this file. If you want text on a button, for example, you don't type it directly into the properties area like we did. You place the text in the strings file and then pull it from there. Let's how. It's quite easy.
First of all, have a look at right-hand side of the design toolbar and you'll see a red square (or red circle in later versions):
This is list of issues that could cause problems with your app. We have 7, in the image above. Click on the red square to see something like this: (In later versions of Android Studio, you'll see a panel appear at the bottom of your screen with all the warnings listed.)
The first warning is about the buttons style we've used. It's advising that we use a borderless style for the buttons. You can fix this, if you want. (We leave the buttons as they are.)
To get borderless buttons, click on one of your buttons to select it. In the properties area on the right, locate the Button Style property. (In Android Studio 3 and above, you need to expand the Declared Attributes section.)
Click the dropdown list and select Borderless (or Bordeless.Colored):
The number of issues in the red square will decrease by 2, when you do both buttons. However, borderless buttons don't look great in this app, so set them back on buttonStyle [default].
One issue we can address, though, is this one:
The issue is about hardcoded strings, and that we should use @string resource. So where is this @string resource?
Expand the Project Explorer on the left, and the res folder. Inside the res folder is a folder called values. Expand this folder to see three XML files:
The file the issue list is talking about is the strings.xml one. Double click to open it. You should see the following:
<string name:"app_name">Quiz Layout</string>
This is another one of those key/value pairs, but this time done as XML. In this case, the key is called name. The value for name is app_name. This goes between double quotes. The value for the app_name is Quiz Layout. This goes between the pointy brackets of the string tag. You can delete Quiz Layout and type anything you like here:
<string name:"app_name">Best Quiz Ever!</string>
You can set up new string tags here as well, if you like:
<string name:"button_one">London Bridge</string>
You can set up as many strings as you want, here. However, there is another way to add strings to this file.
Click back on your activity_main.xml file. Make sure you are on the Design tab, and not the Text tab. Now select your London Bridge button. In the properties area on the right, locate the text property, the one that says London Bridge. Delete this text and click the Pick a Resource button just to the right of the text area:
When you click the button, you should see this dialogue box appear:
Click on Add new resource in the top right, then New String Value:
You will then see another dialogue box popping up. This one:
The Resource name at the top is the name part of the XML you saw earlier; the Resource value was the part between the pointy brackets of the string tag:
In the Resource name box, then, type button_one. (The name can't have spaces.) In the Resource value box, type London Bridge:
Click OK and you will be returned to Design view. Look at the text property now, though:
The text says @string/button_one. This is what the issue list wanted - a value from a resource file.
Now do the same for your Tower Bridge button. Delete the text your typed. Add a new resource. Set the Resource name to button_two. Set the Resource value to Tower Bridge:
Now have a look at your strings.xml file again. You'll see two more strings have been added:
The Text View on your Activity says "What is this Bridge called?". However, this was a hardcoded value. Replace this hardcoded value with a string resource, just like you did for the two buttons. Your strings.xml file will then look something like this:
You can also add a string for the Image. Click on your image to select it. In the properties area, locate the contentDescription property. Add a new string resource for this property.
We'll now move on and explore Android Activities.