1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
page.title=Date Picker
parent.title=Hello, Views
parent.link=index.html
@jd:body
<p>To provide a widget for selecting a date, use the {@link android.widget.DatePicker}
widget, which allows the user to select the month, day, and year, in a familiar interface.</p>
<p>In this tutorial, you'll create a {@link android.app.DatePickerDialog}, which presents the
date picker in a floating dialog box at the press of a button. When the date is set by
the user, a {@link android.widget.TextView} will update with the new date.</p>
<ol>
<li>Start a new project named <em>HelloDatePicker</em>.</li>
<li>Open the <code>res/layout/main.xml</code> file and insert the following:
<pre>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:id="@+id/dateDisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""/>
<Button android:id="@+id/pickDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Change the date"/>
</LinearLayout>
</pre>
<p>This creates a basic {@link android.widget.LinearLayout} with a {@link android.widget.TextView}
that will display the date and a {@link android.widget.Button} that will open the {@link
android.app.DatePickerDialog}.</p>
</li>
<li>Open <code>HelloDatePicker.java</code> and add the following members to the class:
<pre>
private TextView mDateDisplay;
private Button mPickDate;
private int mYear;
private int mMonth;
private int mDay;
static final int DATE_DIALOG_ID = 0;
</pre>
<p>The first group of members define variables for the layout {@link android.view.View}s and the
date items. The <code>DATE_DIALOG_ID</code> is a static integer that uniquely identifies the {@link
android.app.Dialog} that will display the date picker.</p>
</li>
<li>Now add the following code for the {@link android.app.Activity#onCreate(Bundle) onCreate()}
method:
<pre>
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// capture our View elements
mDateDisplay = (TextView) findViewById(R.id.dateDisplay);
mPickDate = (Button) findViewById(R.id.pickDate);
// add a click listener to the button
mPickDate.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
showDialog(DATE_DIALOG_ID);
}
});
// get the current date
final Calendar c = Calendar.getInstance();
mYear = c.get(Calendar.YEAR);
mMonth = c.get(Calendar.MONTH);
mDay = c.get(Calendar.DAY_OF_MONTH);
// display the current date (this method is below)
updateDisplay();
}
</pre>
<p>First, the content is set to the <code>main.xml</code> layout. Then the {@link
android.widget.TextView} and {@link android.widget.Button} elements are captured from the layout
with {@link android.app.Activity#findViewById(int)}. A
new {@link android.view.View.OnClickListener} is created for the
{@link android.widget.Button}, so that when it is clicked, it
will call {@link android.app.Activity#showDialog(int)}, passing the unique integer ID for
the date picker dialog. Using {@link android.app.Activity#showDialog(int)} allows the {@link
android.app.Activity} to manage the life-cycle of the dialog and will call the {@link
android.app.Activity#onCreateDialog(int)} callback method to request the {@link android.app.Dialog}
that should be displayed (which you'll
define later). After the on-click listener is set, a new {@link java.util.Calendar} is created
and the current year, month and day are acquired. Finally, the private
<code>updateDisplay()</code> method is called in order to fill the {@link android.widget.TextView}
with the current date.</p>
</li>
<li>Add the <code>updateDisplay()</code> method:
<pre>
// updates the date in the TextView
private void updateDisplay() {
mDateDisplay.setText(
new StringBuilder()
// Month is 0 based so add 1
.append(mMonth + 1).append("-")
.append(mDay).append("-")
.append(mYear).append(" "));
}
</pre>
<p>This method uses the member date values declared for the class to write the date to the layout's
{@link android.widget.TextView}, {@code mDateDisplay}, which was also declared and initialized
above.</p>
</li>
<li>Initialize a new {@link android.app.DatePickerDialog.OnDateSetListener} as a member of the
<code>HelloDatePicker</code> class:
<pre>
// the callback received when the user "sets" the date in the dialog
private DatePickerDialog.OnDateSetListener mDateSetListener =
new DatePickerDialog.OnDateSetListener() {
public void onDateSet(DatePicker view, int year,
int monthOfYear, int dayOfMonth) {
mYear = year;
mMonth = monthOfYear;
mDay = dayOfMonth;
updateDisplay();
}
};
</pre>
<p>The {@link android.app.DatePickerDialog.OnDateSetListener} listens for when the user
has set the date (by clicking the "Set" button). At that time, the {@link
android.app.DatePickerDialog.OnDateSetListener#onDateSet(DatePicker,int,int,int) onDateSet()}
callback method is called, which is defined to update the {@code mYear}, {@code mMonth}, and
{@code mDay} member fields with the new date then call the private <code>updateDisplay()</code>
method to update the {@link android.widget.TextView}.</p>
</li>
<li>Now add the {@link android.app.Activity#onCreateDialog(int)} callback method to the {@code
HelloDatePicker} class:
<pre>
@Override
protected Dialog onCreateDialog(int id) {
switch (id) {
case DATE_DIALOG_ID:
return new DatePickerDialog(this,
mDateSetListener,
mYear, mMonth, mDay);
}
return null;
}
</pre>
<p>This is an {@link android.app.Activity} callback method that is passed the integer ID given to
{@link android.app.Activity#showDialog(int)} (which is called by the button's {@link
android.view.View.OnClickListener}). When the ID matches the switch case defined here, a {@link
android.app.DatePickerDialog} is instantiated with the {@link
android.app.DatePickerDialog.OnDateSetListener} created in the previous
step, along with the date variables to initialize the widget date.</p>
</li>
<li>Run the application.</li>
</ol>
<p>When you press the "Change the date" button, you should see the following:</p>
<img src="images/hello-datepicker.png" width="150px" />
<h3>References</h3>
<ul>
<li>{@link android.app.DatePickerDialog}</li>
<li>{@link android.app.DatePickerDialog.OnDateSetListener}</li>
<li>{@link android.widget.Button}</li>
<li>{@link android.widget.TextView}</li>
<li>{@link java.util.Calendar}</li>
</ul>
|
