Updating the Settings Screen Layout

The settings.xml layout file dictates the user interface of the settings screen. You need to reopen this layout file in the Eclipse layout resource editor and make the following changes:

1. First, find the TextView control called TextView_Nickname in the file. Above this control and inside the ScrollView control, add a new LinearLayout control and set its orientation attribute to horizontal. Set the layout_width and layout_height attributes to fill_parent.

2. Within the LinearLayout control, add an ImageButton control called ImageButton_Avatar. Set the layout_width and layout_height attributes to wrap_content. You need to be able to scale the avatar graphic while preserving its aspect ratio, so set its adjustViewBounds attribute to true and its scaleType attribute to fitXY. You will also want to set its maxHeight and minHeight attributes to a dimension that gives the graphic reasonable bounds for the settings screen (for example, 75px).

3. Below the ImageButton control, add another LinearLayout control. Set its orientation attribute to vertical. Set the layout_width and layout_height attributes to fill_parent. Now move the nickname controls (the TextView control called TextView_Nickname and the EditText control called EditText_Nickname) into this layout.

At this point, save the settings.xml layout file. If you rerun the application in the emulator, the settings screen should now look like Figure 13.3.

FIGURE 13.3

The settings screen with the avatar feature.

Been There. Done That!

Settings

Nickname:

Nickname:

pumiwi

■^ymiJ No Password Set pumiwi

■^ymiJ No Password Set

Birth Date:

No Date Set

0 0

Post a comment