• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.title= Pickers
2parent.title=Form Controls
3parent.link=controls-form.html
4@jd:body
5
6<div id="qv-wrapper">
7<div id="qv">
8<h2>In this document</h2>
9<ol>
10  <li><a href="#TimePicker">Creating a Time Picker</a>
11    <ol>
12      <li><a href="#TimePickerFragment">Extending DialogFragment for a time picker</a></li>
13      <li><a href="#ShowingTheTimePicker">Showing the time picker</a></li>
14    </ol>
15  </li>
16  <li><a href="#DatePicker">Creating a Date Picker</a>
17    <ol>
18      <li><a href="#DatePickerFragment">Extending DialogFragment for a date picker</a></li>
19      <li><a href="#ShowingTheDatePicker">Showing the date picker</a></li>
20    </ol>
21  </li>
22</ol>
23  <h2>Key classes</h2>
24  <ol>
25    <li>{@link android.app.DatePickerDialog}</li>
26    <li>{@link android.app.TimePickerDialog}</li>
27    <li>{@link android.support.v4.app.DialogFragment}</li>
28  </ol>
29  <h2>See also</h2>
30  <ol>
31    <li><a href="{@docRoot}guide/components/fragments.html">Fragments</a></li>
32  </ol>
33</div>
34</div>
35
36<p>Android provides controls for the user to pick a time or pick a date as ready-to-use dialogs.
37Each picker provides controls for selecting each part of the time (hour, minute, AM/PM) or date
38(month, day, year). Using these pickers helps ensure that your users can pick a time or date that
39is valid, formatted correctly, and adjusted to the user's locale.</p>
40
41<img src="{@docRoot}images/ui/pickers.png" alt="" />
42
43<p>We recommend that you use {@link android.support.v4.app.DialogFragment} to host each time or date
44picker. The {@link android.support.v4.app.DialogFragment} manages the dialog lifecycle for you and
45allows you to display the pickers in different layout configurations,
46such as in a basic dialog on handsets or as an embedded part of the layout on large screens.</p>
47
48<p>Although {@link android.app.DialogFragment} was first added to the platform in Android 3.0 (API
49level 11), if your app supports versions of Android older than 3.0&mdash;even as low as Android
501.6&mdash;you can use the {@link android.support.v4.app.DialogFragment} class that's available in
51the <a href="{@docRoot}tools/extras/support-library.html">support library</a> for backward
52compatibility.</p>
53
54<p class="note"><strong>Note:</strong> The code samples below show how to create dialogs for a time
55picker and date picker using the <a href="{@docRoot}tools/extras/support-library.html">support
56library</a> APIs for {@link android.support.v4.app.DialogFragment}. If your app's <a
57href="{@docRoot}guide/topics/manifest/uses-sdk-element.html#min">{@code minSdkVersion}</a> is 11 or
58higher, you can instead use the platform version of {@link android.app.DialogFragment}.</p>
59
60
61
62<h2 id="TimePicker">Creating a Time Picker</h2>
63
64<p>To display a {@link android.app.TimePickerDialog} using {@link
65android.support.v4.app.DialogFragment}, you need to define a fragment class that extends {@link
66android.support.v4.app.DialogFragment} and return a {@link android.app.TimePickerDialog} from the
67fragment's {@link android.support.v4.app.DialogFragment#onCreateDialog onCreateDialog()} method.</p>
68
69<p class="note"><strong>Note:</strong> If your app supports versions of Android older than 3.0,
70be sure you've set up your Android project with the support library as described in <a
71href="{@docRoot}tools/extras/support-library.html#SettingUp">Setting Up a Project to Use a
72Library</a>.</p>
73
74<h3 id="TimePickerFragment">Extending DialogFragment for a time picker</h3>
75
76<p>To define a {@link
77android.support.v4.app.DialogFragment} for a {@link android.app.TimePickerDialog}, you
78must:</p>
79<ul>
80  <li>Define the {@link android.support.v4.app.DialogFragment#onCreateDialog onCreateDialog()}
81method to return an instance of {@link android.app.TimePickerDialog}</li>
82  <li>Implement the
83{@link android.app.TimePickerDialog.OnTimeSetListener} interface to receive a callback when the user
84sets the time.</li>
85</ul>
86
87<p>Here's an example:</p>
88
89<pre>
90public static class TimePickerFragment extends DialogFragment
91                            implements TimePickerDialog.OnTimeSetListener {
92
93    &#64;Override
94    public Dialog onCreateDialog(Bundle savedInstanceState) {
95        // Use the current time as the default values for the picker
96        final Calendar c = Calendar.getInstance();
97        int hour = c.get(Calendar.HOUR_OF_DAY);
98        int minute = c.get(Calendar.MINUTE);
99
100        // Create a new instance of TimePickerDialog and return it
101        return new TimePickerDialog(getActivity(), this, hour, minute,
102                DateFormat.is24HourFormat(getActivity()));
103    }
104
105    public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
106        // Do something with the time chosen by the user
107    }
108}
109</pre>
110
111<p>See the {@link android.app.TimePickerDialog} class for information about the constructor
112arguments.</p>
113
114<p>Now all you need is an event that adds an instance of this fragment to your activity.</p>
115
116
117<h3 id="ShowingTheTimePicker">Showing the time picker</h3>
118
119<p>Once you've defined a {@link android.support.v4.app.DialogFragment} like the one shown above,
120you can display the time picker by creating an instance of the {@link
121android.support.v4.app.DialogFragment} and calling {@link
122android.support.v4.app.DialogFragment#show show()}.</p>
123
124<p>For example, here's a button that, when clicked, calls a method to show the dialog:</p>
125
126<pre>
127&lt;Button
128    android:layout_width="wrap_content"
129    android:layout_height="wrap_content"
130    android:text="@string/pick_time"
131    android:onClick="showTimePickerDialog" />
132</pre>
133
134<p>When the user clicks this button, the system calls the following method:</p>
135
136<pre>
137public void showTimePickerDialog(View v) {
138    DialogFragment newFragment = new TimePickerFragment();
139    newFragment.show(getSupportFragmentManager(), "timePicker");
140}
141</pre>
142
143<p>This method calls {@link
144android.support.v4.app.DialogFragment#show show()} on a new instance of the {@link
145android.support.v4.app.DialogFragment} defined above. The {@link
146android.support.v4.app.DialogFragment#show show()} method requires an instance of {@link
147android.support.v4.app.FragmentManager} and a unique tag name for the fragment.</p>
148
149<p class="caution"><strong>Caution:</strong> If your app supports versions of Android lower than
1503.0, be sure that you call {@link
151android.support.v4.app.FragmentActivity#getSupportFragmentManager()} to acquire an instance of
152{@link android.support.v4.app.FragmentManager}. Also make sure that your activity that displays the
153time picker extends {@link android.support.v4.app.FragmentActivity} instead of the standard {@link
154android.app.Activity} class.</p>
155
156
157
158
159
160
161
162
163
164<h2 id="DatePicker">Creating a Date Picker</h2>
165
166<p>Creating a {@link android.app.DatePickerDialog} is just like creating a {@link
167android.app.TimePickerDialog}. The only difference is the dialog you create for the fragment.</p>
168
169<p>To display a {@link android.app.DatePickerDialog} using {@link
170android.support.v4.app.DialogFragment}, you need to define a fragment class that extends {@link
171android.support.v4.app.DialogFragment} and return a {@link android.app.DatePickerDialog} from the
172fragment's {@link android.support.v4.app.DialogFragment#onCreateDialog onCreateDialog()} method.</p>
173
174<p class="note"><strong>Note:</strong> If your app supports versions of Android older than 3.0,
175be sure you've set up your Android project with the support library as described in <a
176href="{@docRoot}tools/extras/support-library.html#SettingUp">Setting Up a Project to Use a
177Library</a>.</p>
178
179<h3 id="DatePickerFragment">Extending DialogFragment for a date picker</h3>
180
181<p>To define a {@link
182android.support.v4.app.DialogFragment} for a {@link android.app.DatePickerDialog}, you
183must:</p>
184<ul>
185  <li>Define the {@link android.support.v4.app.DialogFragment#onCreateDialog onCreateDialog()}
186method to return an instance of {@link android.app.DatePickerDialog}</li>
187  <li>Implement the
188{@link android.app.DatePickerDialog.OnDateSetListener} interface to receive a callback when the user
189sets the date.</li>
190</ul>
191
192<p>Here's an example:</p>
193
194<pre>
195public static class DatePickerFragment extends DialogFragment
196                            implements DatePickerDialog.OnDateSetListener {
197
198    &#64;Override
199    public Dialog onCreateDialog(Bundle savedInstanceState) {
200        // Use the current date as the default date in the picker
201        final Calendar c = Calendar.getInstance();
202        int year = c.get(Calendar.YEAR);
203        int month = c.get(Calendar.MONTH);
204        int day = c.get(Calendar.DAY_OF_MONTH);
205
206        // Create a new instance of DatePickerDialog and return it
207        return new DatePickerDialog(getActivity(), this, year, month, day);
208    }
209
210    public void onDateSet(DatePicker view, int year, int month, int day) {
211        // Do something with the date chosen by the user
212    }
213}
214</pre>
215
216<p>See the {@link android.app.DatePickerDialog} class for information about the constructor
217arguments.</p>
218
219<p>Now all you need is an event that adds an instance of this fragment to your activity.</p>
220
221
222<h3 id="ShowingTheDatePicker">Showing the date picker</h3>
223
224<p>Once you've defined a {@link android.support.v4.app.DialogFragment} like the one shown above,
225you can display the date picker by creating an instance of the {@link
226android.support.v4.app.DialogFragment} and calling {@link
227android.support.v4.app.DialogFragment#show show()}.</p>
228
229<p>For example, here's a button that, when clicked, calls a method to show the dialog:</p>
230
231<pre>
232&lt;Button
233    android:layout_width="wrap_content"
234    android:layout_height="wrap_content"
235    android:text="@string/pick_date"
236    android:onClick="showDatePickerDialog" />
237</pre>
238
239<p>When the user clicks this button, the system calls the following method:</p>
240
241<pre>
242public void showDatePickerDialog(View v) {
243    DialogFragment newFragment = new DatePickerFragment();
244    newFragment.show(getSupportFragmentManager(), "datePicker");
245}
246</pre>
247
248<p>This method calls {@link
249android.support.v4.app.DialogFragment#show show()} on a new instance of the {@link
250android.support.v4.app.DialogFragment} defined above. The {@link
251android.support.v4.app.DialogFragment#show show()} method requires an instance of {@link
252android.support.v4.app.FragmentManager} and a unique tag name for the fragment.</p>
253
254<p class="caution"><strong>Caution:</strong> If your app supports versions of Android lower than
2553.0, be sure that you call {@link
256android.support.v4.app.FragmentActivity#getSupportFragmentManager()} to acquire an instance of
257{@link android.support.v4.app.FragmentManager}. Also make sure that your activity that displays the
258time picker extends {@link android.support.v4.app.FragmentActivity} instead of the standard {@link
259android.app.Activity} class.</p>
260