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

A Text View dragged on to an Android layout

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:

Design and Blueprint icons in the toolbar

In later versions, click the blue icon on the toolbar and select Blueprint from the menu:

Switching from Design view to BLueprint in Android Studio

Use the zoom tools to zoom in a bit, and your screen should look like this one:

Zooming in on a TextView

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.)

The android layout text property

Press the enter key on your keyboard to update the blueprint:

The text property of a TextView has been changed

Have a look at the design toolbar and locate the Default Margins icon. Click it to see a dropdown list:

Changing the default margins for a TextView

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:

The Hide Constraints icon

Constraints Shown:

The Show Constraints icon

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:

The AutoConnect icon

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:

An Android TextView

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:

A Constraint being added to a TextView

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:

Horizontal Constraints added from a TextView

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:

Constraints showning in the Properties area of Android Studio

And this in later versions:

Constraint Widget in Android Studio 3

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.

Back to the Android Contents Page