ptg7068951Designing a Real App 359- The Icon field identifies the app’s icon, which currently has the incor-
rect value @drawable/icon. Click the Browse button next to this field.
A Resource Chooser dialog appears listing the five “drawable”
resources contained in the app. - Choose appiconand click OK. The Icon field now has the correct
value. - Save the file: Click the Save button in the main Eclipse toolbar or
choose File, Save.
The red X’s disappear from the Package Explorer, indicating that the app
now has a properly designated icon.
Designing a User Interface
An app’s graphical user interface consists of layouts, which are containers
that hold widgets such as text fields, buttons, graphics, and custom widgets
of your own design. Each screen displayed to a user can have one layout or
multiple layouts within each other. There are layouts to stack components
vertically or horizontally, organize them in a table, and other arrangements.
An app can be as simple as a single screen or contain multiple screens. A
game could be organized into these screens:
. A splash screen that displays as the game is loading
. A main menu screen with buttons to view the other screens
. A help screen explaining how to play
. A scores screen that lists the highest player scores
. A credits screen naming the game’s developers
. A game screen for actual play
The Leader app consists of a single screen, which holds buttons for con-
tacting the president of the United States or a leader to be named later.
All of an app’s screens are kept in the /res/layoutfolder. Anew project
has a main.xmlfile in this folder that’s already designated as the screen to
display when the app loads.
To begin editing this screen’s layout, double-click main.xmlin Package
Explorer. The screen opens in the main Eclipse window, as shown in
Figure 24.13.