At this stage, the user interface of the sample HelloDroid application is based on a very simple layout. The UI layout is defined in the file main.xml located in the res/layout folder. By default, IntelliJ IDEA provides a graphical view of a layout file, but also lets you switch to a text-based view where you edit the layout by typing XML manually.
1. Open the layout file
From the project view, select the main.xml file located under the res/layout folder.
Let's make some changes to the auto-generated user interface.
2. Delete the existing text element
As first thing, you click to select the text label in the view and then right-click to bring up the context menu. From the context menu, you click Delete to clear up the user interface.
3. Add an ImageView Widget
Select an ImageView component from the palette of widgets on the right and then just click where you on the form you want to insert the widget. If you feel more comfortable with drag-and-drop, then you can just drag-and-drop the widget onto the main.xml view.
At this point, the view contains a placeholder for an image, but there's no physical image associated with it yet. To add an image to the project, you first need to create a drawable folder under res.
4. Create the drawable folder
You right click on the res node and click New|Android resource directory. From the resource type drop-down list, you pick up drawable and set any of the appropriate qualifiers. You use qualifiers such as small only if you wish to use a different set of resources per screen width, UI mode, density or locale. If you're using a single set of resources, then you need no qualifier and the resulting folder is just named drawable.
To add images, you just pick the image of choice from Windows Explorer and drop it onto the drawable folder within IntelliJ IDEA.
5. Link an image file to the ImageView widget
You're now ready to link the just added image to the image view component in the view. In the UI designer, you need to have the widget selected in order to edit its properties. You can select the widget by simply clicking on it in the designer. Sometimes, however, this can be a surprisingly hard task. If you added an image widget, but have no selected source image attached to it, then the widget is rendered as a very thin box that may be hard to select through the mouse. This is one of the scenarios where the Component Tree comes to the rescue to let you comfortably select just the visual element you need.
To bring the Component Tree on, you click on the Designer vertical tab on the left to bring the visual designer to the foreground. From the Components Tree window, you select the image view component and locate the src entry in the table of properties.
Clicking on the ... button will bring up a dialog box through which you navigate within the drawable resources of your application: pick the image of choice and click OK.
6. Add a TextView component
From the palette of components, you now pick a TextView component and drop it on the view just below the image.
By default, the TextView is bound to some literal text: New Text. To change it, and to bind it to some localizable string, you need to create a new text resource.
7. Create a String resource
From the Components Tree panel you select the TextView and locate the text property from the table of properties. By clicking on the ellipsis button you bring up the editor dialog box that allows you to pick an existing string value or add a new one. Note that the editor dialog box picks strings from the strings.xml file in the project res/values folder.
In case of need, you can also simply editing the strings.xml file directly.
8. Add style to the text
To make the text a bit more appealing, you need to set a few additional properties. You can do that through the designer acting on the table of properties of the TextView component.
- As first thing, you might want to center the label horizontally. This requires you to set the gravity property to center_horizontal.
- Next, you might want to pad the text a bit: just locate the padding property and set it to 10dp.
- To change the color of the text, you act on the textColor property. You can set the property to a color string such as #ffd764 or you can have it reference a color resource. To add a color resource, you click the ellipsis button and create a resource named welcomeText with a value of #ffd764.
- To increase the size of the text, you act on the textSize property. Similarly, you can set the property to a raw value or to a size resource. To add a size resource, you click the ellipsis button and create a resource named largeText with a value of 20dp which indicates the font size.
Note. You are not allowed to indicate dimensions as plain numbers. You must always add the dp suffix.
The figure below shows the current status of the user interface.
9. Try different themes
The UI designer window has a few options at the top that make it work as a truly preview assistant. In particular, you have a list of predefined themes. Themes just are a quick way for you to see how the overall application UI looks like in a number of common scenarios. For example, you can quickly preview the look-and-feel of the application without the title bar.
You should note that some of the characteristics featured by themes may require ad hoc settings in code. You are responsible for entering those changes in the code. For example, to hide the title bar, you need to add some code to MyActivity.java.
10. Create a device profile
The toolbar at the top of the UI designer window has quite a few options for you to preview your layout in various conditions: landscape or portrait, with small or large screens, localized, under various platforms, and more. By default, IntelliJ IDEA renders the layout according to a default profile.
You can create a custom profile as well to quickly preview your layouts in the conditions that make most sense for your application. To create a new device profile in the designer, you click on the [Full] drop-down and choose to edit profiles.
You then click + and configure your new device profile. Note that the Visible checkbox allows you specify whether you want the corresponding attribute to display in the UI designer. For example, the newly created profile filters out theme, dock and night mode attributes and sets configuration to landscape. The newly created profile shows up in the drop-down list of profiles for you to quickly adopt it later.