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
|
page.title=Hello, TimePicker
parent.title=Hello, Views
parent.link=index.html
@jd:body
<p>A {@link android.widget.TimePicker} is a widget that allows the
user to select the time by hour, minute and AM or PM.</p>
<ol>
<li>Start a new project/Activity called HelloTimePicker.</li>
<li>Open the layout file and make it like so:
<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/timeDisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""/>
<Button android:id="@+id/pickTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Change the time"/>
</LinearLayout>
</pre>
<p>For the layout, we're using a vertical LinearLayout, with a {@link android.widget.TextView} that
will display the time and a {@link android.widget.Button} that will initiate the
{@link android.widget.TimePicker} dialog.
With this layout, the TextView will sit above the Button.
The text value in the TextView is set empty, as it will be filled by our Activity
with the current time.</p>
</li>
<li>Open HelloTimePicker.java. Insert the following to the HelloTimePicker class:
<pre>
private TextView mTimeDisplay;
private Button mPickTime;
private int mHour;
private int mMinute;
static final int TIME_DIALOG_ID = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// capture our View elements
mTimeDisplay = (TextView) findViewById(R.id.timeDisplay);
mPickTime = (Button) findViewById(R.id.pickTime);
// add a click listener to the button
mPickTime.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
showDialog(TIME_DIALOG_ID);
}
});
// get the current time
final Calendar c = Calendar.getInstance();
mHour = c.get(Calendar.HOUR_OF_DAY);
mMinute = c.get(Calendar.MINUTE);
// display the current date
updateDisplay();
}
</pre>
<p class="note"><strong>Tip:</strong> Press Ctrl(or Cmd) + Shift + O to import all needed packages.</p>
<p>We start by instantiating variables for our View elements and time fields.
The <code>TIME_DIALOG_ID</code> is a static integer that uniquely identifies the dialog. In the
<code>onCreate()</code> method, we get prepared by setting the layout and capturing the View elements.
We then set an on-click listener for the Button, so that when it is clicked, it will
show our TimePicker dialog. The <code>showDialog()</code> method will perform a callback
to our Activity. (We'll define this callback in the next section.) We then create an
instance of {@link java.util.Calendar} and get the current hour and minute. Finally, we call
<code>updateDisplay()</code>—our own method that will fill the TextView with the time.</p>
</li>
<li>After the <code>onCreate()</code> method, add the <code>onCreateDialog()</code> callback method:
<pre>
@Override
protected Dialog onCreateDialog(int id) {
switch (id) {
case TIME_DIALOG_ID:
return new TimePickerDialog(this,
mTimeSetListener, mHour, mMinute, false);
}
return null;
}
</pre>
<p>This is passed the identifier we gave <code>showDialog()</code> and initializes
the TimePicker to the time we retrieved from our Calendar instance. It will be called by
<code>showDialog()</code>.</p>
</li>
<li>Now add our <code>updateDisplay()</code> method:
<pre>
// updates the time we display in the TextView
private void updateDisplay() {
mTimeDisplay.setText(
new StringBuilder()
.append(pad(mHour)).append(":")
.append(pad(mMinute)));
}
</pre>
<p>This simply takes our member fields for the time and inserts them in
the <code>mTimeDisplay</code> TextView. Note that we call a new method, <code>pad()</code>,
on the hour and minute. (We'll create this method in the last step.)</p>
</li>
<li>Next, add a listener to be called when the time is reset:
<pre>
// the callback received when the user "sets" the time in the dialog
private TimePickerDialog.OnTimeSetListener mTimeSetListener =
new TimePickerDialog.OnTimeSetListener() {
public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
mHour = hourOfDay;
mMinute = minute;
updateDisplay();
}
};
</pre>
<p>Now when the user is done setting the time (clicks the "Set" button), we update our member fields with
the new time and update our TextView.</p>
</li>
<li>Finally, add the <code>pad()</code> method that we called from the <code>updateDisplay()</code>:
<pre>
private static String pad(int c) {
if (c >= 10)
return String.valueOf(c);
else
return "0" + String.valueOf(c);
}
</pre>
<p>This method returns the appropriate String representation of the hour or minute.
It will prefix a zero to the number if it's a single digit.
</p>
</li>
<li>Now run it.</li>
</ol>
<p>When you press the "Change the time" button, you should see the following:</p>
<img src="images/hello-timepicker.png" width="150px" />
<h3>References</h3>
<ol>
<li>{@link android.widget.TimePicker}</li>
<li>{@link android.widget.Button}</li>
<li>{@link android.widget.TextView}</li>
<li>{@link java.util.Calendar}</li>
</ol>
|
