Implementing the Splash Screen Layout

Now that you know how your splash screen should look, you need to translate the rough design into the appropriate layout design. Recall that the / res/layout/ splash.xml layout file is used by QuizSplashActivity. You need to update the default layout, which simply displays a single TextView control (informing us it is the splash screen) to contain controls for each of the elements in the rough design.

Screen layout controls come in many forms. Each control is a rectangle that can control a specific part of the screen. You are using two common screen controls on your splash screen:

► A TextView control displays a text string onscreen.

► An ImageView control displays a graphic onscreen.

You also need some way to organize various View controls on the screen in an orderly fashion. For this, you use Layout controls. For example, LinearLayout allows placement of child views in a vertical or horizontal stack.

Implementing the Splash Screen Layout 115

In addition to LinearLayout, there are a number of other Layout controls. Layouts may be nested and control only part of the screen, or they may control the entire screen. It is quite common for a screen to be encapsulated in one large parent layout—often a LinearLayout control. Table 7.1 lists the available Layout controls.

TABLE 7.1 Common Layout Controls

Layout Control Name




Each child view is placed

Orientation (vertical or

after the previous one, in


a single row or column.


Each child view is placed in

Many alignment attributes

relation to the other views

to control where a child

in the layout, or relative to

view is positioned relative

the edges of the parent

to other child View controls.



Each child view is stacked

The order of placement of

within the frame, relative to

child View controls is

the top-left corner. View

important, when used with

controls may overlap.

appropriate gravity settings.


Each child view is a cell in

Each row requires a

a grid of rows and columns.

TableRow element.

Layouts and their child View controls have certain attributes that help control their behavior. For example, all layouts share the attributes android:layout_width and android:layout_height, which control how wide and high an item is. These attribute values can be dimensions, such as a number of pixels, or use a more flexible approach: fill_parent or wrap_content. Using fill_parent instructs a layout to scale to the size of the parent layout, and using wrap_content "shrink wraps" the child View control within the parent, giving it only the space of the child View control's dimensions. A number of other interesting properties can be used to control specific layout behavior, including margin settings and type-specific layout attributes.

As of Android 1.5 SDK, the AbsoluteLayout control, which requires specific X/Y values, was deprecated yet has remained available for use. Although this control is not recommended for use, occasionally having exact X/Y sizing control can be useful for specific kinds of layouts that require pixel-perfect precision. The SDK's own WebView control uses this layout.

Let's use a TableLayout control to display some ImageView controls as part of the splash screen.

In the splash screen design, you can use a vertical LinearLayout control to organize the screen elements, which are, in order, a TextView control, a TableLayout control with some TableRow control elements of ImageView controls, and then two more TextView controls. Figure 7.2 shows the layout design of the splash screen.


Layout design for the Been There, Done That! splash screen.

LinearLayout (Vertical Orientation)

TextView (Title #1 )

TableLayout (2 Rows, 2 Columns)

TableRow (Index 0)

ImageView (splash1.png)

ImageView (splash2.png)

TableRow (Index 1)

ImageView (splash3.png)

ImageView (splash4.png)

TextView (Title #2)

TextView (Version Info)

0 0

Post a comment