Editing UI Layout Using Designer
At this stage, the user interface of your sample
HelloDroid application is based on a very simple layout. The UI layout is defined in the
activity_main.xml file located in the
res/layout folder. By default, IntelliJ IDEA provides a graphical view of a layout file, but it also lets you switch to a text-based view where you edit the layout file manually.
Let us modify the auto-generated user interface with the built-in UI Designer and see how the application layout is rendered without running it on any physical or virtual devices.
1. Open the layout file
The pane shows a rectangular canvas that is synchronized with the current layout definition file and with the Component Tree view, so any changes to the canvas are reflected there accordingly.
2. Delete the existing text element
Let's delete the existing text element. To do this, click to select the text label in the view and right-click it to invoke the context menu. Select Delete to clear up the user interface:
3. Add an ImageView widget
Now add an ImageView widget: select the ImageView component from the Widgets palette and then click the canvas where you want to insert the widget. Alternatively, you can drag-and-drop the widget to the Design pane:
At this point, the view contains a placeholder for an image, but there's no image associated with it yet. To add an image to the project, you first need to create a
drawable folder under
4. Create the 'drawable' folder
res node in the Project view and select New | Android resource directory. From the Resource type drop-down list, select drawable. If necessary, select any of the available qualifiers.
You use qualifiers such as 'small' only if you wish to use a different set of resources for different screens, UI modes, density or locales. If you are going to use a single set of resources, you need no qualifiers.
To add images, just pick image files in Windows Explorer and drag them to the
drawable folder within IntelliJ IDEA.
5. Link an image file to the 'ImageView' widget
Now you need to link the image file you've added to the ImageView widget. In the UI designer, you need to select the widget to edit its properties. You can select the widget by clicking it, however, this sometimes can be a surprisingly hard task. If you have added an image widget but have no image attached to it, the widget is rendered as a very thin box that can be hard to select with the mouse. This is when Component Tree comes to a rescue and lets you easily select the visual elements you need.
- In the Component Tree pane, select the imageView component and locate the
srcentry in the table of its properties:
- Click the Browse button and select the image you want to attach to the widget in the dialog that opens:
The image will be attached to the widget. You can select it in the designer and adjust its size and position:
6. Add a 'TextView' component
Now let us add a TextView component. In the palette, locate the Plain TextView component under Widgets and drag-and-drop it to the view just below the image:
By default, the Plain TextView displays some literal text:
New Text. To change it and link it to some localizable string, you need to create a new text resource.
7. Create a 'String' resource
- In the Components Tree, select the TextView element and locate the text property in the properties table below.
- Click the Browse button to invoke the Resources dialog box that allows you to pick an existing string value or add a new one.
Note that strings are stored in the
strings.xmlfile under the
res | valuesfolder. If necessary, you can edit the
- Click New Resource | New String Value. In the dialog that opens, enter the resource name and specify the text that will be displayed in the TextView widget:
8. Add style to the text
To make the text look a bit more appealing, you need to set a few additional properties. You can do this by editing properties of the TextView component. Let's do the following:
- Center the label horizontally: set the gravity property to
- Pad the text a bit: locate the padding property and set the value of all to
- Change the font color: edit the textColor property. You can set the property value to a color string, such as
#ffd764, for example, or you can have it reference a color resource. To add a color resource, click the Browse button and create a resource named
welcomeTextwith the value of
- Change the font size: edit the TextSize property. You can set a value, or link it to a size resource in the same way we did with the TextColor property above.
Note that you cannot indicate dimensions as plain numbers. You must always add the dp suffix.
As a result, your user interface now looks as following:
9. Preview your layout in various conditions
The controls on top of the Designer tool window allow you to preview your UI layout in different conditions: landscape or portrait, on different screen sizes, using different themes, for different locales, etc. This provides a quick and easy way for you to see how the overall application UI looks like in a number of common scenarios.
For example, do the following:
- Click the icon and select Preview All Screen Sizes from the drop-down menu. IntelliJ IDEA will display the preview of your UI layout on the most common screen types.
- To preview the application layout on different devices, click the icon with the current device name (in our case, it is ) and choose from the list.
- Click to toggle between the layout and portrait preview mode.