1 page.title=Time Picker 2 parent.title=Hello, Views 3 parent.link=index.html 4 @jd:body 5 6 <p>To provide a widget for selecting a time, use the {@link android.widget.TimePicker} 7 widget, which allows the user to select the hour and minute in a familiar interface.</p> 8 9 <p>In this tutorial, you'll create a {@link android.app.TimePickerDialog}, which presents the 10 time picker in a floating dialog box at the press of a button. When the time is set by 11 the user, a {@link android.widget.TextView} will update with the new date.</p> 12 13 <ol> 14 <li>Start a new project named <em>HelloTimePicker</em>.</li> 15 <li>Open the <code>res/layout/main.xml</code> file and insert the following: 16 <pre> 17 <?xml version="1.0" encoding="utf-8"?> 18 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 19 android:layout_width="wrap_content" 20 android:layout_height="wrap_content" 21 android:orientation="vertical"> 22 <TextView android:id="@+id/timeDisplay" 23 android:layout_width="wrap_content" 24 android:layout_height="wrap_content" 25 android:text=""/> 26 <Button android:id="@+id/pickTime" 27 android:layout_width="wrap_content" 28 android:layout_height="wrap_content" 29 android:text="Change the time"/> 30 </LinearLayout> 31 </pre> 32 <p>This is a basic {@link android.widget.LinearLayout} with a {@link android.widget.TextView} 33 that will display the time and a {@link android.widget.Button} that will open the {@link 34 android.app.TimePickerDialog}.</p> 35 </li> 36 37 <li>Open <code>HelloTimePicker.java</code> and insert the following class members: 38 <pre> 39 private TextView mTimeDisplay; 40 private Button mPickTime; 41 42 private int mHour; 43 private int mMinute; 44 45 static final int TIME_DIALOG_ID = 0; 46 </pre> 47 <p>This declares variables for the layout elements and time fields. 48 The <code>TIME_DIALOG_ID</code> is a static integer that uniquely identifies the dialog.</p> 49 </li> 50 <li>Now insert the following code for the {@link android.app.Activity#onCreate(Bundle) onCreate()} 51 method: 52 <pre> 53 @Override 54 protected void onCreate(Bundle savedInstanceState) { 55 super.onCreate(savedInstanceState); 56 setContentView(R.layout.main); 57 58 // capture our View elements 59 mTimeDisplay = (TextView) findViewById(R.id.timeDisplay); 60 mPickTime = (Button) findViewById(R.id.pickTime); 61 62 // add a click listener to the button 63 mPickTime.setOnClickListener(new View.OnClickListener() { 64 public void onClick(View v) { 65 showDialog(TIME_DIALOG_ID); 66 } 67 }); 68 69 // get the current time 70 final Calendar c = Calendar.getInstance(); 71 mHour = c.get(Calendar.HOUR_OF_DAY); 72 mMinute = c.get(Calendar.MINUTE); 73 74 // display the current date 75 updateDisplay(); 76 } 77 </pre> 78 79 <p>First, the content is set to the <code>main.xml</code> layout and then the {@link 80 android.widget.TextView} and {@link android.widget.Button} are captured with {@link 81 android.app.Activity#findViewById(int)}. 82 Then an {@link android.view.View.OnClickListener} is created for the {@link android.widget.Button}, 83 so that when clicked, it will call {@link 84 android.app.Activity#showDialog(int)}, passing the unique integer ID for the time picker 85 dialog. Using {@link android.app.Activity#showDialog(int)} allows the {@link 86 android.app.Activity} to manage the life-cycle of the dialog and will call the {@link 87 android.app.Activity#onCreateDialog(int)} callback method to request the {@link android.app.Dialog} 88 that should be displayed (which you'll define later). After the on-click listener is set, a new 89 {@link java.util.Calendar} is created to get the current hour and minute. Finally, the 90 private <code>updateDisplay()</code> method is called in order to fill the {@link 91 android.widget.TextView} with the current time.</p> 92 </li> 93 94 <li>Add the <code>updateDisplay()</code> and <code>pad()</code> methods: 95 <pre> 96 // updates the time we display in the TextView 97 private void updateDisplay() { 98 mTimeDisplay.setText( 99 new StringBuilder() 100 .append(pad(mHour)).append(":") 101 .append(pad(mMinute))); 102 } 103 104 private static String pad(int c) { 105 if (c >= 10) 106 return String.valueOf(c); 107 else 108 return "0" + String.valueOf(c); 109 } 110 </pre> 111 <p>The <code>updateDisplay()</code> method uses the member fields for the time and inserts them in 112 the <code>mTimeDisplay</code> {@link android.widget.TextView}. The <code>pad()</code> method returns 113 the appropriate string representation of the hour or minute—it will prefix a zero to the 114 number if it's a single digit.</p> 115 </li> 116 117 <li>Add a class member for a {@link android.app.TimePickerDialog.OnTimeSetListener} that will be 118 called when the user sets a new time: 119 <pre> 120 // the callback received when the user "sets" the time in the dialog 121 private TimePickerDialog.OnTimeSetListener mTimeSetListener = 122 new TimePickerDialog.OnTimeSetListener() { 123 public void onTimeSet(TimePicker view, int hourOfDay, int minute) { 124 mHour = hourOfDay; 125 mMinute = minute; 126 updateDisplay(); 127 } 128 }; 129 </pre> 130 <p>When the user is done setting the time (clicks the "Set" button), the 131 <code>onTimeSet()</code> method is called and it updates the member fields with 132 the new time and updates the layout's {@link android.widget.TextView}.</p> 133 </li> 134 135 <li>Add the {@link android.app.Activity#onCreateDialog(int)} callback method: 136 <pre> 137 @Override 138 protected Dialog onCreateDialog(int id) { 139 switch (id) { 140 case TIME_DIALOG_ID: 141 return new TimePickerDialog(this, 142 mTimeSetListener, mHour, mMinute, false); 143 } 144 return null; 145 } 146 </pre> 147 <p>This is an {@link android.app.Activity} callback that is passed the identifier you passed to 148 {@link android.app.Activity#showDialog(int)}, in the {@link android.widget.Button}'s on-click 149 listener. When the ID matches, this initializes the {@link android.app.TimePickerDialog} with the 150 member variables initialized at the end of <code>onCreate()</code> and the {@link 151 android.app.TimePickerDialog.OnTimeSetListener} created in the previous step.</p> 152 </li> 153 154 <li>Run the application.</li> 155 </ol> 156 <p>When you press the "Change the time" button, you should see the following:</p> 157 <img src="images/hello-timepicker.png" width="150px" /> 158 159 <h3>References</h3> 160 <ol> 161 <li>{@link android.widget.TimePicker}</li> 162 <li>{@link android.app.TimePickerDialog.OnTimeSetListener}</li> 163 <li>{@link android.widget.Button}</li> 164 <li>{@link android.widget.TextView}</li> 165 <li>{@link java.util.Calendar}</li> 166 </ol> 167 168
