Updating the Game Screen Layout

The game.xml layout file dictates the user interface of the game screen. Again, you open the Eclipse layout resource editor and remove all existing controls from the layout. You then follow these steps to generate the layout you want, based on your design:

1. Add a new LinearLayout control and set its background attribute to @drawable/bkgrnd. All subsequent controls will be added inside the LinearLayout control.

2. Add a RelativeLayout control and set layout_width to wrap_content and layout_height to wrap_content.

3. Within the RelativeLayout control, add four ImageView controls—one for each corner of the screen. Set each control's image src attribute to the @draw-able/quizicon graphic. Give each ImageView control a specific id attribute: @+id/ImageView_Header, @+id/ImageView_Header2, @+id/ImageView_Header3, and @+id/ImageView_Header4.

4. Find the ImageView control with the id attribute set to ImageView_Header and set its layout_alignParentLeft and layout_alignParentTop attributes to true.

5. Find the ImageView control with the id attribute set to ImageView_Header2 and set its layout_alignParentRight and layout_alignParentTop attributes to true.

6. Find the ImageView control with the id attribute set to ImageView_Header3 and set its layout_alignParentLeft and layout_alignParentBottom attributes to true.

7. Find the ImageView control with the id attribute set to ImageView_Header4 and set its layout_alignParentRight and layout_alignParentBottom attributes to true.

8. Still within the RelativeLayout control, add another RelativeLayout control for the trivia question region after the ImageView control; name it ImageView_Header2. Set its id attribute to the value @+id/RelativeLayout_Content.Setlayout_width to wrap_content and layout_height to wrap_content. Also, set its gravity attribute to center and its layout_margin to 45px.

9. Within the new RelativeLayout control, add an ImageSwitcher control with an id of @+id/ImageSwitcher_QuestionImage. Setlayout_width to wrap_content and layout_height to wrap_content. Also, set its layout_alignParentTop and layout_centerInParent attributes to true.

10. Below the ImageSwitcher control, add a TextSwitcher control with an id of @+id/TextSwitcher_QuestionText.Setlayout_width to wrap_content and layout_height to wrap_content. Also, set its layout_centerInParent attribute to true and its layout_below attribute to @+id/ImageSwitcher_QuestionImage.

11. Below the TextSwitcher control, add a Button control with an id of @+id/Button_Yes. Set layout_width to wrap_content and layout_height to wrap_content. Also, set its layout_alignParentBottom and layout_alignParentLeft attributes to true. Set its text attribute to a resource string ("Yes") and tweak any other attributes to make the Button control look nice.

12. Add another Button control below the previous Button control, with an id of @+id/Button_No. Set the layout_width to wrap_content and the layout_height to wrap_content. Also, set its layout_alignParentBottom and layout_alignParentRight attributes to true. Set its text attribute to a resource string ("No") and tweak any other attributes to make the Button control look nice.

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

^OSti

The Eclipse layout resource editor does not display TextSwitcher or ImageSwitcher controls in design mode. You must view the resulting TextView and ImageView controls generated by the switchers by using the Android emulator. In this case, the layout designer does not reflect actual application look and feel.

0 0

Post a comment