Step 05 - Research + New Control Layout

Recall the UI we are trying to implement:

Step 05 - 图1

We need radio buttons, some sort of selection/combo box + a progress bar. These can be found in various locations in the pallette:

Step 05 - 图2 Step 05 - 图3

RadioGroup, ProgressBar and NumberPicker seem likely candidates. The names of these controls are exactly as advertised, and we can expect them to be in the ‘widgets’ package. To verify this, try importing them at the top of the Donate activity class:

1. import android.widget.RadioGroup;
2. import android.widget.NumberPicker;
3. import android.widget.ProgressBar;

… and we can bring in three fields into the class:

1. private RadioGroup   paymentMethod;
2. private ProgressBar  progressBar;
3. private NumberPicker amountPicker;

We can also open up three pages of documentation - which we can reverse engineer from the package/class names:

  • <http://developer.android.com/reference/android/widget/RadioGroup.html>
  • <http://developer.android.com/reference/android/widget/ProgressBar.html>
  • <http://developer.android.com/reference/android/widget/NumberPicker.html>

Note this time we have gone to the Activity class before actually creating the controls. We should do this now - and remember to use the same names (for the IDs) as we create the controls.

Step 05 - 图4 Step 05 - 图5

Getting the layout +id names as shown above may take some practice. However, it is an essential skill to get on top of, even it it takes a lot of trial and error.

For reference purposes (try to do it yourself first!), these are the relevant generated xml files:

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" /><Button
30. android:id="@+id/donateButton"
31. android:layout_width="wrap_content"
32. android:layout_height="wrap_content"
33. android:layout_alignParentBottom="true"
34. android:layout_centerHorizontal="true"
35. android:onClick="donateButtonPressed"
36. android:text="@string/donateButton" />

38. <RadioGroup
39. android:id="@+id/paymentMethod"
40. android:layout_width="wrap_content"
41. android:layout_height="wrap_content"
42. android:layout_above="@+id/progressBar"
43. android:layout_alignLeft="@+id/donateSubtitle"
44. android:layout_below="@+id/donateSubtitle"
45. android:layout_marginLeft="14dp"
46. android:layout_marginTop="26dp"
47. android:layout_toLeftOf="@+id/amountPicker" >

49. <RadioButton
50. android:id="@+id/PayPal"
51. android:layout_width="wrap_content"
52. android:layout_height="wrap_content"
53. android:checked="true"
54. android:text="@string/PayPal" />

56. <RadioButton
57. android:id="@+id/Direct"
58. android:layout_width="wrap_content"
59. android:layout_height="wrap_content"
60. android:text="@string/Direct" />

62. </RadioGroup>

64. <ProgressBar
65. android:id="@+id/progressBar"
66. style="?android:attr/progressBarStyleHorizontal"
67. android:layout_width="wrap_content"
68. android:layout_height="wrap_content"
69. android:layout_above="@+id/donateButton"
70. android:layout_alignParentLeft="true"
71. android:layout_alignParentRight="true"
72. android:layout_marginBottom="67dp" />

74. <NumberPicker
75. android:id="@+id/amountPicker"
76. android:layout_width="wrap_content"
77. android:layout_height="wrap_content"
78. android:layout_alignRight="@+id/donateSubtitle"
79. android:layout_alignTop="@+id/paymentMethod" />

81. </RelativeLayout>

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>
8. <string name="donateButton">Button</string>
9. <string name="PayPal">PayPal</string>
10. <string name="Direct">Direct</string>

12. </resources>

If we have our naming conventions right - then we can bind to these new controls in onCreate:

1. paymentMethod = (RadioGroup)   findViewById(R.id.paymentMethod);
2. progressBar   = (ProgressBar)  findViewById(R.id.progressBar);
3. amountPicker  = (NumberPicker) findViewById(R.id.amountPicker);

This is the complete Donate class:

1. package com.example.donation;

3. import android.os.Bundle;
4. import android.app.Activity;
5. import android.util.Log;
6. import android.view.Menu;
7. import android.view.View;
8. import android.widget.Button;
9. import android.widget.RadioGroup;
10. import android.widget.NumberPicker;
11. import android.widget.ProgressBar;

14. public class Donate extends Activity
15. {
16. private Button       donateButton;
17. private RadioGroup   paymentMethod;
18. private ProgressBar  progressBar;
19. private NumberPicker amountPicker;

21. @Override
22. protected void onCreate(Bundle savedInstanceState)
23. {
24. super.onCreate(savedInstanceState);
25. setContentView(R.layout.activity_donate);

27. donateButton  = (Button)       findViewById(R.id.donateButton);
28. paymentMethod = (RadioGroup)   findViewById(R.id.paymentMethod);
29. progressBar   = (ProgressBar)  findViewById(R.id.progressBar);
30. amountPicker  = (NumberPicker) findViewById(R.id.amountPicker);

32. amountPicker.setMinValue(0);
33. amountPicker.setMaxValue(1000);
34. }

36. @Override
37. public boolean onCreateOptionsMenu(Menu menu)
38. {
39. getMenuInflater().inflate(R.menu.donate, menu);
40. return true;
41. }

43. public void donateButtonPressed (View view)
44. {
45. Log.v("Donate", "Donate Pressed!");
46. }
47. }