In this topic, you will learn the general principles of layout editing. Several animations are included so that you can see how to work with Android Studio's Layout Editor. By the end, you will have the ability to apply your knowledge in practice and work confidently in the Layout Editor.
Design view
We will start by looking at the XML code in the activity_main.xml file. Then, to make its purpose easier to understand, we'll use the visual editor of the layout file by switching to Split and then Design mode.
Design mode includes three sections — The Palette is on the left and contains components like Buttons, Text, an input field, and pictures. The Layout Preview is where we can see and position our elements. And on the right, we have the attributes for the currently selected view.
In Design mode you can also change preview options, for example, whether to Show System UI and display our Action Bar.
Attributes panel
Now let's make some changes to our text. Our layout was created from the "Empty Activity" template, so it contains only the "Hello World" text. To alter this, we will select the text field, click on the search icon in the Attributes section, and enter the word "text" to look at all the attributes related to text. Now it's easy to change its value.
In our example, we will change the color, the size of the TextView, and the text itself. This is where Android Studio really shines. We can select any TextView, find its color attribute, for example, and change it to any color we want. We can also change the size of the text in the same way. The font was originally set to 14sp, and we increase it to 34sp. If you're wondering what sp means it's a unit that defines font dimensions (the letters stand for scaleable pixels). Lastly, we change the text itself from "Hello World" to "Intro to Android Dev".
Great, we've changed the text, and you can see the result below:
XML code
Next, let's take a look at what's different in the XML code. In the below example, you can see that the TextView now has three text attributes: text, textColor, and textSize. However, the line containing the text itself is highlighted in yellow. If we hover over it with the mouse, Android Studio tells us that the text is hardcoded and needs to be moved to resources. So, why is this? One of the main reasons is localization. If you hardcode text inside layout files or in the code, it will be limited to that particular language (in this case English). This means it won't be possible to change it to another language dynamically, which could cause problems if you want to support others in the future.
Transferring resources
Following Android Studio's advice, let's move our string to resources. We can use a key combination to do this: Alt + Enter or Option + Enter on a Mac. This common keyboard shortcut is important because it displays Android Studio's tooltips, and these often provide really useful hints. As you can see in the above animation, the option to extract a string resource is displayed. Selecting this option shows a dialog that enables us to enter the key for our resource.
Once the key has been entered, the hardcoded string is replaced with the value @string/intro_to_android_dev (shown in the below animation). The syntax is straightforward: we have the @ symbol and the name of the resource type, followed by its key. So, where is the line stored following this change? The values folder holds various files, including strings.xml, which contains all the string resources.
We have moved the text line itself to resources, and now we'll relocate the text's color and size values. We start with the color, and press Alt + Enter again. This displays the Extract color resource option, which allows us to convert the value to @color/intro_text. The new value is also placed in the values folder, but this time in colors.xml. Default colors are provided when the project is created, but you can also add your own.
Lastly, we use the same approach with text size and name it textSizeLarge. As you can see, it has been converted to @dimen/textSizeLarge and ends up in the dimens.xml file.
Conclusion
As you have seen, working in the Layout Editor is simple — it just takes some practice. You now know how to use the Attributes panel, edit a TextView, and place resources in the appropriate files. You're also aware of a handy shortcut that gives tips in the Layout Editor. Try applying the steps you've learned to modify a Button. You'll be surprised how easy it is!