Previous | Top | Next |
Let's add more elements to the main view of the application and see what it takes to edit the UI layout manually.
1. Switch to Text view
Click on the Text tab at the bottom of the file editor. IntelliJ IDEA now presents the XML source code of the currently selected layout file.
2. Add a Horizontal Ruler
For the purpose of this tutorial, let's just add some markup that inserts a divider and a new TextView. The simplest way to have an horizontal divider is adding the following:
The divider is 5 units thick, painted with a green background and placed 60 units below the nearest element.
3. Add a TextView
To add another TextView, you enter the following markup:
The element is placed 60 units below the divider; it is centered horizontally and uses the default text color. The string associated with the element is indicated explicitly.
Unlike the divider, though, the TextView also has the id property set to a rather weird string. The syntax indicates that what follows the / symbol is a string to be treated as an ID resource and will be used to reference a view element. The Android runtime processes that information appropriately and makes it possible for you to write Java code that interacts with the TextView.
4. Build the project
If you compile the sample project at this stage, you will get the output shown in the figure below.
Previous | Top | Next |