How To Pick A Time In Xamarin Android App

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (Ex. Windows phone, Android, iOS). In Xamarin platform, the code sharing concept is  used. Xamarin Studio is available in the Visual Studio also.

Time Picker is used to get the system time and pick your desired time.

Prerequisites

Visual Studio 2015 Update 3.

The following steps need to be followed in order to pick a time in Android app, using VS 2015.

Step 1

Click File >> New >> Project, or click (Ctrl+Shift+N).



Step 2

After opening the New Project, select Installed-->Templates-->Visual c#-->Android-->choose the Blank App (Android).

Next, give your android app a name(Ex:sample) and give path of your project. Now, click OK.



Step 3

Next, go to the Solution Explorer. Select Resource-->Layout-->double click to open main.axml page. Select either Design View or Code View to design your app.



Step 4

After opening the Main.axml file, design the homepage.



Next, delete the default "Hello World" button.
 
Go to the source panel. You can see the button coding. Just delete it. After deleting the XAML codes, delete the C# button action code.

Go to the MainActivity.cs page and delete the code.

Step 5

Next, go to the ToolBox window. In that, it has all types of the tools and control. Scroll down, now. You will see the all tools and control.

Drag and drop the TextView.



Step 6

Drag and drop the button.



Step 7

Next, go to the properties window. Edit the Button text value and id value (Ex: android:text="Change the time" android:id="@+id/pickTime" ).



Step 8

And also, edit the TextView properties or note the values in main.axml page source tap.



Main.axml

  1. <TextView android:id="@+id/timeDisplay" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" />  
  2.   
  3. <Button android:id="@+id/pickTime" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Change the time" />  
Step 9

Next, go to the MainActivity.cs page and write the following code.

MainActivity.cs
  1. public class MainActivity: Activity {  
  2.   
  3.     private TextView time_display;  
  4.     private Button pick_button;  
  5.   
  6.     private int hour;  
  7.     private int minute;  
  8.   
  9.     const int TIME_DIALOG_ID = 0;  
  10.   
  11.     protected override void OnCreate(Bundle bundle) {  
  12.         base.OnCreate(bundle);  
  13.   
  14.         // Set our view from the "main" layout resource   
  15.         SetContentView(Resource.Layout.Main);  
  16.         // Capture our View elements   
  17.         time_display = FindViewById < TextView > (Resource.Id.timeDisplay);  
  18.         pick_button = FindViewById < Button > (Resource.Id.pickTime);  
  19.   
  20.         // Add a click listener to the button   
  21.         pick_button.Click += (o, e) => ShowDialog(TIME_DIALOG_ID);  
  22.   
  23.         // Get the current time   
  24.         hour = DateTime.Now.Hour;  
  25.         minute = DateTime.Now.Minute;  
  26.   
  27.         // Display the current date   
  28.         UpdateDisplay();  
  29.     }  
  30.   
  31.     // Create a method UpdateDisplay   
  32.   
  33.     private void UpdateDisplay() {  
  34.         string time = string.Format("{0}:{1}", hour, minute.ToString().PadLeft(2, '0'));  
  35.         timetime_display.Text = time;  
  36.     }  
  37.   
  38.     // Create a Method TimePickerCallback   
  39.   
  40.     private void TimePickerCallback(object sender, TimePickerDialog.TimeSetEventArgs e) {  
  41.         hour = e.HourOfDay;  
  42.         minute = e.Minute;  
  43.         UpdateDisplay();  
  44.     }  
  45.   
  46.     // Create a Method OnCreateDialog   
  47.   
  48.     protected override Dialog OnCreateDialog(int id) {  
  49.         if (id == TIME_DIALOG_ID)  
  50.             return new TimePickerDialog(this, TimePickerCallback, hour, minute, false);  
  51.   
  52.         return null;  
  53.     }  
  54. }  


Step 10

If you have Android Virtual device, run the app on it. Else, connect your Android phone and run the app in that.
Simply, connect your phone and go to Visual Studio.  The connected phone will show up in the Run menu (Ex:LENOVO A6020a40(Android 5.1-API 22)). Click the Run option.
 


Output

After a few seconds, the app will start running on your phone.  You can check that clicking the button changes the time.



Select which time you want.



Then, click OK.



You will see the selected time.



Summery

So, this was the process of picking a Time in Android app, using Visual Studio 2015 update 3.

Up Next
    Ebook Download
    View all
    Learn
    View all