Step 02 - Layout Donation Activity

For this lab, our objective is to produce an Android App that looks something like this:

Step 02 - 图1

In eclipse, delete the current ‘Hello World’ text, and drag and drop a new ‘LargeText’ form widget onto the canvas. Look closely at the following:

Step 02 - 图2

Note carefully the following features:

  • the guides tyeing the text to the left, top and right corner
  • in Outline - the name of the control has been changed from a default to ‘donateTitle’. This is changed by selecting the item in outline, and selecting ‘Edit ID’ from the context menu.
  • in Properties - where we entered ‘Welcome Homer’ into the text field

Recreate the above precisely.

A ‘Lint warning’ will have popped up in the top right:

Step 02 - 图3

Click on this:

Step 02 - 图4

.. and select ‘Fix’ - this is inviting us to give a name to the string, which will be stored in a separate ‘string.xml’ file. Give it the name ‘donateTitle’:

Step 02 - 图5

Save everything - and the lint warning should (eventually) disappear.

Locate the following two files and inspect them closely:

res/layout/activity_dontate.xml

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:paddingBottom="@dimen/activity_vertical_margin"
6. android:paddingLeft="@dimen/activity_horizontal_margin"
7. android:paddingRight="@dimen/activity_horizontal_margin"
8. android:paddingTop="@dimen/activity_vertical_margin"
9. tools:context=".Donate" >

11. <TextView
12. android:id="@+id/donateTitle"
13. android:layout_width="wrap_content"
14. android:layout_height="wrap_content"
15. android:layout_alignParentLeft="true"
16. android:layout_alignParentRight="true"
17. android:layout_alignParentTop="true"
18. android:text="@string/donateTitle"
19. android:textAppearance="?android:attr/textAppearanceLarge" />

21. </RelativeLayout>

res/values/strings.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <resources>

4. <string name="app_name">Donation</string>
5. <string name="action_settings">Settings</string>
6. <string name="hello_world">Hello world!</string>
7. <string name="donateTitle">Welcome Homer</string>

9. </resources>

Note the relationship between ‘donateTitle’ in both files. Also note we have a superfluous ‘hello_world’ string left over from the generated app. We can delete this now.

Bring in the following string into the donate activity now - (medium text) - and follow the same procedure as above. The designer should look like this:

Step 02 - 图6

and our XML files will look like this:

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:paddingBottom="@dimen/activity_vertical_margin"
6. android:paddingLeft="@dimen/activity_horizontal_margin"
7. android:paddingRight="@dimen/activity_horizontal_margin"
8. android:paddingTop="@dimen/activity_vertical_margin"
9. tools:context=".Donate" >

11. <TextView
12. android:id="@+id/donateTitle"
13. android:layout_width="wrap_content"
14. android:layout_height="wrap_content"
15. android:layout_alignParentLeft="true"
16. android:layout_alignParentRight="true"
17. android:layout_alignParentTop="true"
18. android:text="@string/donateTitle"
19. android:textAppearance="?android:attr/textAppearanceLarge" />

21. <TextView
22. android:id="@+id/donateSubtitle"
23. android:layout_width="wrap_content"
24. android:layout_height="wrap_content"
25. android:layout_alignParentLeft="true"
26. android:layout_alignParentRight="true"
27. android:layout_below="@+id/donateTitle"
28. android:text="@string/donateSubtitle"
29. android:textAppearance="?android:attr/textAppearanceMedium" />

31. </RelativeLayout>

Our ‘strings.xml’ file….

1. <?xml version="1.0" encoding="utf-8"?>
2. <resources>

4. <string name="app_name">Donation</string>
5. <string name="action_settings">Settings</string>
6. <string name="donateTitle">Welcome Homer</string>
7. <string name="donateSubtitle">Please give generously</string>

9. </resources>