Updating the Main Menu Screen Layouts

Perhaps you have noticed by now that the main menu screen relies on layout resource files—plural. The master layout file, menu.xml, defines the layout of the overall screen. You must also create a new layout file template for each item in your ListView control.

Updating the Master Layout

Again, you open the Eclipse layout resource editor and remove all existing controls from the menu.xml layout file. You then follow these steps to generate the layout you want, based on your intended layout design:

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

2. Add a RelativeLayout control. Set its layout_width attribute to wrap_con-tent and its layout_height attribute to wrap_content.

3. Within the RelativeLayout control, add an ImageView control. Set the ImageView control's layout_alignParentLeft and layout_alignParentTop attributes to true. Set the image's src attribute to the @drawable/quizicon graphic.

4. Still within the RelativeLayout control, add a TextView control for the title text. Set the TextView control's text, textSize, and textColor attributes to the resources you just created. Then set the layout_centerHorizontal and layout_alignParentTop attributes to true.

Did you Know?

5. Finish the RelativeLayout control by adding one more ImageView control. Set the control's layout_alignParentRight and layout_alignParentTop attributes to true. Set the image's src attribute to the @drawable/quizicon graphic.

6. Next, we must add a second RelativeLayout to hold the ListView and ImageView controls. Start by adding a new RelativeLayout outside of the one we were just working in, but still inside the LinearLayout.

7. Now add the last ImageView control inside this new RelativeLayout. Set its src attribute to the @drawable/half graphic, its layout_width attribute to fill_parent, and its layout_height attribute to fill_parent to ensure that the control fills any space at the bottom of the screen. Additionally, set its layout_alignParentBottom attribute to true and scaleType attribute to fitEnd, so that after it scales it'll still be at the bottom.

You can make TextView text "glow" by setting the shadow attributes, including shadowColor, shadowDx, shadowDy,and shadowRadius.

Implementing the Main Menu Screen Layout

8. Now add a ListView control called ListView_Menu j ust below the ImageView. Set its layout_width attribute to fill_parent and layout_height attribute to wrap_content. Additionally, set its layout_alignParentTop attribute to true. We add this second attribute so the control will draw over the top of the image.

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

^OSH

Adding the ListView Template Layout

You now need to create a new layout called /res/layout/menu_item.xml that will serve as a template for your ListView items. In this case, the menu_item.xml layout file will contain a TextView control.

The TextView control has all the typical attributes assigned except for one: the text itself. The text attribute will be supplied by the ListView control. At this point, you can tweak the TextView attributes for textColor and textSize, which you created as color and dimension resources earlier.

The menu_item.xml file looks like this: <TextView xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:textSize="@dimen/menu_item_size"

android:text="test string"

android:layout_gravity="center_horizontal"

android:layout_height="wrap_content"

android:shadowRadius="5"

android:gravity="center"

android:textColor="@color/menu_color"

android:shadowColor="@color/menu_glow"

android:shadowDy="3"

android:shadowDx="3" />

Did you Know?

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

The Eclipse layout resource editor does not display ListView controls in design mode. You must view a ListView control by using the Android emulator. In this case, the layout designer does not reflect actual application look and feel.

It can be helpful to set the text attribute to a test string so you can see how the TextView control's attributes look in the Eclipse resource designer. This string will be programmatically overwritten by the ListView control.

0 0

Post a comment