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 (without the blue area at the top in later versions of Android Studio):
We want to do now is to switch to blueprint view. So, in earlier versions of Android Studio, click the Blueprint icon on the toolbar, the middle of three icons in the image below:
In later versions, click the blue icon on the toolbar and select Blueprint from the menu:
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 it 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 in earlier versions of Android Studio:
And this in later versions:
Hold your mouse over one of the blue (or grey) 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.