Android Layouts

In our previous project, we just used the default widget, which was a Text View that
displayed the text "Hello Android World". We'll now explore ways you can design smart-
looking layouts with Android Studio. The layout you'll design in this section looks like this
in portrait view:

And like this in landscape:

Let's get started.

Create a new project for this. Click File > New > New Project from the Android Studio
menu at the top. If you have already closed down your app, select Start a new Android
Studio project from the list. In the New Project dialogue box, type Quiz Layout for the
Application name:
Click Next, and accept all the defaults on the rest of the dialogue boxes. Your new project
will then load.
To give yourself more space in the Android Studio IDE, you can minimize the Project
Explorer on the left. You can do this by clicking View from then menu at the top, then Tools
Windows > Project. Or by clicking the Project tab on the very left edge of the screen:
Click the tab again, if you want to get the Projects list back.

First, let's have a look at the Designer, and the toolbar icons you'll use most frequently.
Open up your activity_main.xml file. Make sure you're on the Design tab, rather than the
Text tab:
Now examine the toolbar at the top of your simulated app:

On the lower row, we are these icons:

On the top row, we have these:

You'll learn about the icons we've highlighted as you go along.

Two more areas to examine are the Palette:

and the Component Tree:

The Palette is where you drag and drop controls onto your design surface. The Component
Tree shows you a list of controls that you have dropped on your design surface. You can
click an item in the Component Tree to select it in the designer.

In the next lesson, you'll start adding widgets to your Android layout.

Adding Widgets to an Android Layout

In the previous lesson, you created a new project for a Quiz Layout. In this lesson, you'll
start adding the widgets.
You already have a Text View on your design surface, the default Hello World one that you
get whenever you create a new project. Click on this to select it. Now press the delete key
on your keyboard to get rid of it. Locate the Text VIew in the Palette, and drag a new one on
to your layout. Your screen will then look like this:

We want to do now is to switch to blueprint view. So click the Blueprint icon on the toolbar,
the middle of three icons in the image below:
Use the zoom tools to zoom in a bit, and your screen should look like this one:

Have a look at the Properties area just to the right of the Blueprint. Locate
the Text property and change it to What is this bridge called?(You'll see a different way
to add text, in a later tutorial.)
Press the enter key on your keyboard to update the blueprint:
Have a look at the design toolbar and locate the Default Margins icon. Click the 8 to see a
dropdown list:

These values set the margins around the edges of your app. The default 8 is OK for us. But if
you need to change your margins, this is the place to come.

What we want to do is to fix the Text View to the top of the screen, and to the left and right
of the screen's edges. You do this with Constraints.
Make sure the eye icon on the design toolbar doesn't have a cross through it. If it does, it
means Constraints are hidden. Click the eye to show constraints:

Constraints Hidden:

Constraints Shown:
The icon next to the Constraints one is called AutoConnect. You want this one turned off, in
this tutorial. Click it and you'll see a line through the upside-down magnet:

AutoConnect tries to guess what kind of Constraints you want. This is OK for simple design,
but can get in the way. Which is why we've turned it off. We'll add our constraints
manually.

Have a look at the Text View again:

The circles are called Constraint Anchors. If you want to fix a control to the top of the
screen, click on the middle circle. Keep your left mouse button held down and drag to the
top:

Let go of your left mouse button and you'll see an arrow going from the top centre of the
Text View to the top of the app screen. This is a constraint. (The 8 is the margin we set.) No
matter if your app is in portrait or landscape orientation, the Text View will stay 8 units
from the top.

Do the same with the left and right circles of the Text View: click and drag an arrow to the
left edge for the left circle, and click and drag an arrow to the right edge. Your screen will
then look like this:
Notice the jagged lines. This indicates that you have a constraint attached to a control.

To get rid of the constraint, have a look at the properties area, at the top. You'll see this:

Hold your mouse over one of the blue circles in the middle. You'll the see an X appear. Click
an X delete that constraint. In the image above, if the blue circle with the white x in it is
clicked, the constraint will be delete from the left edge of the Text View to the left edge of
the screen.

Notice the slider at the bottom, the one with 50 in it. This can be used to positon the Text
View along the horizontal axis. (A value of 50 is the middle position.) Try it out. Hold down
your left mouse button on the 50. Keep the left mouse button held down and drag to the
right and to the left. Watch what happens to your Text View in the blueprint.
In the next lesson, you'll learn how to add an ImageView, and how to import a picture into
Android Studio.

Add images to your Android Project

We're now going to add a picture to Android Studio. This picture will be used in an Image
View.

First, download this picture: (Right click and select Save Image As.)

Save it to your own computer and remember where you saved it to.

We need to import this picture into the res > drawable folder. Open up your Project
Explorer again by clicking its tab:
Now expand the res item and locate the drawable folder:

Right click the drawable folder, and select Show in Explorer from the menu:
This will open a window showing a list of folders. The image below is from Windows 10:
All of these folders are from your res directory. (The mipmap ones are used mainly for
icons. You can create them in different sizes. We'll do this much later in the course.)
What you need to do is to copy and paste your image from where you saved it on your
computer into the drawable folder (we're assuming you know how to copy and paste files
from one folder to another):
Now go back to Android Studio and you should see it there:

We can now use this image in our app.

Go back to your blueprint. Locate the Image View control in the Palette, which is under
Images:
Drag an Image View to just below your Text View. As soon as you do, you should the
following dialogue box appear:
Select the bridge image and click OK. Your blueprint will then look like this:

As you can see, the Image View has ended up in the top left. We don't want it there.

With the Image View selected, click anywhere inside of it with your left mouse button. Keep
the left mouse button held down and drag it below the Text View:
(You won't be able to see the image itself in Blueprint View.)

Now we'll add a Constraint. We want to connect the top middle circle of the Image View to
the bottom middle circle of the Text View. Hold your mouse over the top middle circle of
the Image View. It will turn green. Now hold your left mouse button down. Keep it held
down and drag to the bottom middle circle of the Text View:

You should see a blue arrow connecting the two:

Now add a constraint from the left of the Image View to the left edge of the screen, just like
you did for the Text View. Likewise, connect the right edge of the Image View to the right
edge of the screen. Your blueprint will then look like this:
It can be a little bit fiddly, so don't forget you can undo with CTRL + Z.

If you have a look at the properties area again, you may be wondering what all those lines
are for:
The straight lines indicate which sides of your view are constrained, and to where. They
also tell you the size of the margins, 8 in the image above. Hold your mouse over one of the
lines and you'll see a dropdown list. You can change your margins from here:

The other lines to be aware of are the ones inside the square, pointy arrows in the image
above. There are three different settings here:

Wrap Contents
Fixed
Match constraints
Click the arrows to see what they do. Watch what happens to the Image View when you
click a set of arrows. In the image below, we've set the arrows to Fixed:
The arrows have turned into straight lines. Notice that layout_width value has changed to
200dp. It has changed to 200 because that was the width of the image we used. Notice that
the Image View hasn't changed its size. But move the horizontal slider from 50 to
something else. Watch what happens to your Image View in the blueprint.
Click the straight lines inside the square to see the third of the settings,Match Constraints:
Notice that image has now stretched to the margins of the screen. Notice, too, that the
layout_width has been reset to zero. Click again, though, to go back to Wrap Contents.

In the next lesson, you'll learn about a different type of layout - LinearLayout.

Adding a Linear Layout

By default, Android places all your controls in a type of layout called a Constraint Layout.
This is then the used as the parent view for all of your widgets. Another type of layout you
can use is called a LinearLayout. We'll use one of these to hold the buttons on our form.

Click on the Layout category in the palette. Locate LinearLayout(Horizontal):

Drag one of these onto your blueprint. Again, your new control will be added to the top left,
so you'll need to drag it down below the Image View:

Add a constraint by moving your mouse to the top circle of your LinearLayout:
When you see the circle turn green, drag to the bottom circle of the Image View:

Now add constraints to the left and right edges of your screen, just like you did before:
Finally, add a constraint from the bottom circle of your LinearLayout to the bottom edge of
your screen:
It's a bit too narrow to hold buttons, at the moment. To remedy this, have a look at the
properties area. Locate the layout_height and change it to 0dp:

Your layout will then change size:

.
Now that we have a Linear Layout, we'll add some buttons to it. We'll do that in the next
lesson below

Android Buttons
In the previous lesson, you added a Linear Layout to your design surface. We'll now add
two buttons to this layout.

Go back to the palette. Click on the Widgets category and locate theButton item. Drag two
of these onto your LinearLayout.
If you don't get this right, and have to undo, you can drag widgets onto the Component Tree
instead:

You can even rearrange your widgets in the Component Tree. In the image below we've put
button 6 before button 5:

With the top button highlighted, drag down to below the bottom button:
Your blueprint area should now look like this:
Select the first button. In the properties area on the right, locate the text property and
enter London Bridge:

(The name of your button will probably not be button5.)

Now select the second button and change the text property to Tower Bridge. Your
blueprint will then look like this:
Almost done, now.

You can change the background colour of the ConstraintLayout to something other than
white.

Go back to design view by clicking the icon in the toolbar:

In the Component Tree, click on the ConstraintLayout item to select it:

Now look at the properties area on the right. Click on the link at the bottom that says View
all properties:

You'll then see a fuller list of properties.

Locate the Background property and click just to the right of the word Background, where
the white box is in the image below:

Click on the grey square to bring up a dialogue box. Select Color from the left:
Select a colour from the list and click OK. We've chosen holo_blue_dark.
Try it out now. Run your app and see what it looks like. You should see something like this:
Rotate your device and you'll see that the buttons in the layout expand to fill the space:
In the next lesson, you'll learn about the XML file. You'll also learn how to add XML strings.
This is quite easy!

Android XML Strings

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:

android:layout_marginLeft="8dp"

The constraints we added are at the bottom:

app:layout_constraintLeft_toLeftOf="parent"

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.

XML Strings
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:
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:

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:
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:
<resources>

<string name:"app_name">Quiz Layout</string>

</resources>

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:
<resources>

<string name:"app_name">Best Quiz Ever!</string>

</resources>

You can set up new string tags here as well, if you like:

<resources>

<string name:"button_one">London Bridge</string>

 </resources>

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:

Exercise
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: