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):
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:
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:
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:
Your strings file will then look like this:
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!)
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:
Now locate the name Robert McCulloch. Use the italics tags on this name:
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:
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:
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:
From the Resource box that appears, select your string resource:
Your layout will then look like this (your text formatting won't show up until you run the app):
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:
If you click on the red warning square in the Android Studio toolbar, you'll see this:
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:
Enter 32dp for the layout_marginEnd property and 64dp for the layout_marginStart:
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:
Click OK to set the string:
Test it out, now. Run your app and see what it looks like so far.
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.