Time Picker

Xamarin Inc.

To provide a widget for selecting a time, use the TimePicker widget, which allows the user to select the hour and minute in a familiar interface. In this tutorial, you'll create a TimePickerDialog, which presents the time picker in a floating dialog box at the press of a button. When the time is set by the user, a TextView will update with the new date. 1. Start a new project named HelloTimePicker. 2. Open the Resources\Layout\Main.axml file and insert the following: <?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> This is a basic LinearLayout with a TextView that will display the time and a Button that will open the TimePickerDialog. 3. Open Activity1.cs and insert the following class members: private TextView time_display ;private Button pick_button ; private int hour ;private int minute ; const int TIME_DIALOG_ID = 0; This declares variables for the layout elements and time fields. The TIME_DIALOG_ID is a static integer that uniquely identifies the dialog. 4. Now insert the following code for the OnCreate() method: protected override void OnCreate (Bundle bundle ) { base.OnCreate (bundle ); // Set our view from the "Main" layout resource SetContentView (Resource.Layout.Main ); // Capture our View elements TextView> (Resource.Id.timeDisplay time_display = FindViewById<

); pickTime );

pick_button = FindViewById<Button> (Resource.Id.

// Add a click listener to the button += (o, e) => ShowDialog (TIME_DIALOG_ID );

pick_button.Click

// Get the current time hour = DateTime.Now.Hour ; minute = DateTime.Now.Minute ; // Display the current date ();} UpdateDisplay

First, the content is set to the Main.axml layout and then the TextView and Button are captured with FindViewById<>(int). Then the button's Click event is attached to, so that when clicked, it will call ShowDialog(int), passing the unique integer ID for the time picker dialog. Using ShowDialog(int) allows the Activity to manage the life-cycle of the dialog and will call the OnCreateDialog(int) callback method to request the Dialog that should be displayed (which you'll define later). After the on-click listener is set, we set the current hour and minute. Finally, the private UpdateDisplay() method is called in order to fill the TextView with the current time. 5. Add the UpdateDisplay() method: // Updates the time we display in the TextViewprivate void UpdateDisplay () { string time = string.Format ("{0}:{1}", hour, minute. ToString ().PadLeft (2, '0' )); time_display.Text = time ;} The UpdateDisplay() method uses the member fields for the time and inserts them in the time_display TextView. 6. Add a method that will be called when the user sets a new time: private void TimePickerCallback (object sender, TimePickerDialog. TimeSetEventArgs e ) { hour = e.HourOfDay ; minute = e.Minute ; UpdateDisplay ();} When the user is done setting the time (clicks the "Set" button), this method is called and it updates the member fields with the new time and updates the layout's TextView. 7. Add the OnCreateDialog(int) callback method: protected override Dialog OnCreateDialog (int id ) { if (id == TIME_DIALOG_ID

) return new TimePickerDialog (this, TimePickerCallback, hour, minute, false ); return null ;} This is an Activity callback that is passed the identifier you passed to ShowDialog(int), in the Button's on-click listener. When the ID matches, this initializes the TimePickerDialog with the member variables initialized at the end of OnCreate() and the callback method created in the previous step. 8. Run the application. When you press the "Change the time" button, you should see the following:

References
1. TimePicker 2. Button 3. TextView Portions of this page are modifications based on work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License. This tutorial is based on the Android Time Picker tutorial.

Source URL: http://xamarin.alley.ws/guides/android/user_interface/time_picker