Updating the Scores Screen Layout

The scores screen user interface is defined in the scores.xml layout file. To update this layout to your intended layout design, you follow these steps:

1. Remove all the old controls, as you have done for other layouts in this book.

2. Add a new LinearLayout control, setting its android:background attribute to @drawable/bkgrnd. All subsequent controls will be added inside this LinearLayout control.

3. Add the same header you created in other layouts. It should contain of a RelativeLayout control with two ImageView controls and a TextView control. Set the TextView control's text attribute to the string resource @string/scores to reflect the appropriate screen title.

The Eclipse layout resource editor does not display TabHost controls properly in design mode. To design this kind of layout, you should stick to the XML layout mode. You must use the Android emulator or an Android device to view the tabs.

4. Outside the RelativeLayout control but still within the LinearLayout, add a TabHost control called TabHost1. Set its layout_width and layout_height attributes to fill_parent.

5. Inside the TabHost control, add another LinearLayout control, with its orientation attribute set to vertical. Set its layout_width and layout_height attributes to fill_parent.

6. Inside the inner LinearLayout control, add a TabWidget control. Set the control's id attribute to @android:id/tabs.

7. Within the inner LinearLayout control at the same level as the TabWidget control, add a FrameLayout control. Set the FrameLayout control's id attribute to @android:id/tabcontent and its layout_width and layout_height attributes to fill_parent.

8. Define the content of your tabs. Within the FrameLayout control, add two TableLayout controls, one for each tab. You will use these TableLayout controls to display the scores. Name the first TableLayout control TableLayout_AllScores and the second TableLayout_FriendScores. Set the layout_width and layout_height attributes to fill_parent. Set the stretchColumns attribute to * to allow columns to resize based on the content.


You can make many controls scrollable by wrapping them within a ScrollView control. For example, to give a TableLayout control a vertical scrollbar, wrap it in a ScrollView control and set the scrollbars attribute to vertical. You also need to set its layout_width and layout_height attributes.

The TabHost section of the scores screen layout file (with optional scrolling TableLayout tabs) should look something like this:

<TabHost android:id="@+id/TabHost1" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TabWidget android:id="@android:id/tabs"

When creating a tabbed view in this way, you must name the identifier as listed above: @android:id/tabcontent; otherwise, exceptions will be thrown at runtime. This references a special Android package resource. It is not the same as using @+id/tabcontent. That would create a new identifier for a layout object in your own application package.

android:layout_width="fill_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ScrollView android:id="@+id/ScrollViewAllScores" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scrollbars="vertical"> <TableLayout android:id="@+id/TableLayout_AllScores" android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchColumns="*"> </TableLayout> </ScrollView> <ScrollView android:id="@+id/ScrollViewFriendScores" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scrollbars="vertical"> <TableLayout android:id="@+id/TableLayout_FriendScores android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchColumns="*"></TableLayout> </ScrollView> </FrameLayout> </LinearLayout> </TabHost>

At this point, save the scores.xml layout file.


At this point, if you switch to the Layout view, Eclipse may display a "NullPointerException: null" error. The Layout designer doesn't support TabHost controls as of Android 2.1. The layout will draw just fine in the emulator and on devices.

0 0

Post a comment