Designing the XML layout for Portrait View

Alternative Layouts: 1 2 3 4

In the previous lesson, you saw how to create an XML file for landscape view. In this lesson, we'll design the layout for that file.

Click on your layout\activity_main tab at the top. In Design view, delete the default Hello World TextView. In the Images section of the Palette, drag an ImageView onto your white layout. When you get the Resources dialogue box, select the bridge_wide drawable and click OK.

In the properties area on the right, set the following values (you don't need the ID, though):

Properties for an ImageView in Android Studio

The layout_width and layout_height are both set to wrap_content. You only need three sets of constraints in the box at the top. Click inside the box until you get the three sets of arrows:


Changing layout constraints

The margins we set are 8, 0, 0. (Hover your mouse over a straight line until you see the dropdown box.)

Your layout should look like this:

ImageView at the top of a layout

You'll add a TextView, next. First, we'll set up a string resource.

Double click the strings.xml file, which is in the res > values folder of the explorer on the left of Android Studio. Set up the following string name:

<string name="tower_bridge"></string>

Your strings file will then look like this:

XML strings file with new  value

As the text for this string, paste the following between the two tags:

This is Tower Bridge in London. A lot of people get it confused with London Bridge, which is not one bridge but refers to different bridges that have spanned the river Thames between the City of London and Southwark (pronounced SU-thark). The old London bridge that stood for over 600 years was pulled down in the 19th century and replaced with a much more modern one designed by John Rennie. This bridge was then sold to Robert McCulloch, who had it shipped to Arizona where it still stands.

Work started on Tower Bridge in 1886 and was finished in 1894, and is a marvel of Victorian engineering.

Your file will then look like this: (We've added some line breaks just so that you could see all the text. You don't have to format it like ours. But you can if you want. It won't do any harm!)

XML string file with added string value

We would like to add some bold to the text, as well as some italics and an underline. You can add these with HTML tags.

Locate the first occurrence of "Tower Bridge". Add opening and closing B tags:

<b>Tower Bridge</b>

Now locate the name Robert McCulloch. Use the italics tags on this name:

<i>Robert McCulloch</i>

For the SU of SU-thark, add underline tags:


You can also add paragraphs with the \n characters. Add two of them, just before "Work started on …":

\n\nWork started on

And here what your strings file will look like:

string XML file with added HTML tags

Let's also add two string resources for the images. That way, we won't get plagued by warnings in Android Studio. Add these two strings to your XML file:

<string name="tower_bridge_portrait">Tower Bridge portrait mode</string>

<string name="tower_bridge_landscape">Tower Bridge landscape mode</string>

Your file will then look like this:

Description values added to the strings.xml file

We can now add the TextView.

In the Widgets section of the Palette, drag a TextView onto your layout, just below the ImageView. With your TextView selected, add constraint to the bottom of the Image and the bottom of the screen (you should know how to do this by now).

For the text property, delete the default text and click the Pick a Resource button:

The Pick a Resource button highlighted

From the Resource box that appears, select your string resource:

Selecting a string resource for a TextView

Your layout will then look like this (your text formatting won't show up until you run the app):

An ImageView and TextView on an Android layout

The text looks a bit squashed. Let's see if we can fix it.

In the properties area for your TextView, set layout_width to 0dp and the layout_height to wrap_content. For the left margin, click inside the dropdown box and type 64. For the right margin, select 32 from the dropdown list:

Margins set for a TextView

If you click on the red warning square in the Android Studio toolbar, you'll see this:

Lint warnings in Android Studio

The first warning is advising us to set the layout_marginEnd to 32, and the layout_marginStart to 64.

Go back to the properties area for your TextView. Scroll down to the bottom and click the link that says View all properties. Now locate the Layout_Margin properties:

The layout margin properties

Enter 32dp for the layout_marginEnd property and 64dp for the layout_marginStart:

The layout_marginEnd and  layout_marginStart properties

Now click on your image to select it. In the properties area on the right, locate the contentDescription property. Bring up the Pick a Resource box and select your Tower Bridge portrait mode string:

Setting a string contentDescription for an ImageView

Click OK to set the string:

The contentDescription set for an image

Test it out, now. Run your app and see what it looks like so far.

The app in portrait mode running on the Android Emulator

You should see that your text formatting has been applied. We have bold text for Tower Bridge, underline for SU-thark, and italics for Robert McCulloch.

Now rotate the view. You'll see an entirely blank screen. This is because the landscape layout is loaded. Since we haven't designed anything for this view, the screen will be blank. Let's design a landscape layout. We'll do that in the next lesson below.