Configuring a TextView in Android

Alternative Layouts: 1 2 3 4

Now that we have an ImageView on the left, we need a TextView to go alongside it.

In the Widgets section of the Palette, drag a TextView widget onto your Component Tree (or onto the layout). If it ends up in the top left corner, drag it somewhere in the middle:

A TextView added to the landscape layout

It's better to add the constraint now. So drag from the right middle of the TextView to the right edge of the screen. Now drag from the left middle of the TextView to the right edge of the ImageView:

Constraints added to the TextView

With the TextView still selected, click the Pick a Resource button:

The Pick a Resource button highlighted

From the Resources dialogue box, select your tower_bridge string:

A string resource being selected from the Resources dialogue box in Android Studio

Click OK and your layout might look like this:

TextView overlapping an ImageView

As you can see, the TextView is right on top of the image. To fix that, have a look at the properties area on the right. Set the layout_width to 0dp:

Setting the layout_width property for a TextView

Your layout will then look like this:

Landscape layout with ImageView and TextView aligned

You can add some margins left and right, now.

In the properties area, change the left margin for the TextView to 16, and the right margin to 32:

Setting the left and right margins for the TextView

If you have a look at the warning area, you might see this:

Lint Warnings in Android Studio

The top three are the same as the ones you saw before. Click the View all properties link at the bottom and set the properties and values suggested in the warning:

Setting layout properties for Widgets

The reason that there are two warning about marginStart is because one of them is for the ImageView. Click on your ImageView to select it, and then fix the warning.

You can try it out, now. Run your app. Rotate the device so that it's in landscape view. You should see your new design displayed:

A layout in landscape view running on the Android Emulator

The new display is being pulled from the layout-land folder and is the activity_main XML file we created there. Android is switching between the two all by itself!


In the next section, we'll move on and tackle Action Bars and Toolbars.