How To Pick A Date In Xamarin Android App Using Visual Studio 2015

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example Windows phone, Android, iOS). The code sharing concept is used in the Xamarin platform, and it's available in Visual Studio also.

Date picker is used to get the system date and pick your desired date.

Prerequisites

Visual Studio 2015 Update 3

The steps given below need to be followed in order to pick a date in Android app, using Visual Studio 2015.

Step 1

Click File--> select New--> select Project. the project needs to be clicked after opening all the types of projects in Visual Studio
or click (Ctrl+Shift+N).

Step 2

Afterwards, open the New Project, select Installed-->Templates-->Visual C#-->Android-->choose the Blank app (Android).

Now, give your Android app a name (Ex:sample) and give the path of your project. Afterwards, click OK.

Step 3

Now, go to Solution Explorer. In Solution Explorer, get the all the files and sources in your project.

Now, select Resource-->Layout--> double click to open main.axml page. You need to select the source to write XAML code.

If you want to design, choose the designer Window and you can design your app.

Step 4

After opening main.axml, file will open the main page designer. In this page, you can design the page, based on which type you want.

Now, delete the Default hello world button.

Go to the source panel and you will see the button coding. You need to delete it.

Afterwards, delete XAML code. Now, delete C# button action code.

Go to MainActivity.cs page and you need to delete the button code.

Step 5

Now, go to the toolbox Window and in the toolbox Window, get all the types of the tools and control. You need to go to the toolbox Window. Now, scroll down and you will see all the tools and controls.

You need to drag and drop the button.

Step 6

You need to drag and drop the TextView.

Step 7

Now, go to the properties Window. You need to edit the button text value and Id value (Ex: android:text="Pick Date" android:id="@+id/date_select_button").

Step 8

Also, edit the TextView properties or note the values in main.axml page source panel.

Main.axml

<Button
android:text="Pick Date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/date_select_button" />
<TextView
android:text=""
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/date_display" />

Step 9

In this step, go to the MainActivity.cs page. You need to write the code, given below.

MainAcitivity.cs

public class MainActivity: Activity {
TextView _dateDisplay;
Button _dateSelectButton;
protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
_dateDisplay = FindViewById < TextView > (Resource.Id.date_display);
_dateSelectButton = FindViewById < Button > (Resource.Id.date_select_button);
_dateSelectButton.Click += DateSelect_OnClick;
}
void DateSelect_OnClick(object sender, EventArgs eventArgs) {
DatePickerFragment frag = DatePickerFragment.NewInstance(delegate(DateTime time) {
_dateDisplay.Text = time.ToLongDateString();
});
frag.Show(FragmentManager, DatePickerFragment.TAG);
}
}
// Create a class DatePickerFragment
public class DatePickerFragment: DialogFragment,
DatePickerDialog.IOnDateSetListener {
// TAG can be any string of your choice.
public static readonly string TAG = "X:" + typeof(DatePickerFragment).Name.ToUpper();
// Initialize this value to prevent NullReferenceExceptions.
Action < DateTime > _dateSelectedHandler = delegate {};
public static DatePickerFragment NewInstance(Action < DateTime > onDateSelected) {
DatePickerFragment frag = new DatePickerFragment();
frag._dateSelectedHandler = onDateSelected;
return frag;
}
public override Dialog OnCreateDialog(Bundle savedInstanceState) {
DateTime currently = DateTime.Now;
DatePickerDialog dialog = new DatePickerDialog(Activity, this, currently.Year, currently.Month, currently.Day);
return dialog;
}
public void OnDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
// Note: monthOfYear is a value between 0 and 11, not 1 and 12!
DateTime selectedDate = new DateTime(year, monthOfYear + 1, dayOfMonth);
Log.Debug(TAG, selectedDate.ToLongDateString());
_dateSelectedHandler(selectedDate);
}
}

Step 10

If you have Android virtual device, run the app on it, else connect your Android phone and run the app on it.

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 it by clicking the button 'Pick Date'.

Choose the date and click OK.

You will see the selected date.

Summary

This was the process of picking a date in Android app, using Visual Studio 2015 Update 3.

3 Comments

Join the conversation! Your thoughts help the community grow.

krishna vamsi8y ago
Selected date was not displaying in the textview
- Delpin Susai Raj8y ago
  Hi krishna please check this line. void DateSelect_OnClick(object sender, EventArgs eventArgs) { DatePickerFragment frag = DatePickerFragment.NewInstance(delegate(DateTime time) { _dateDisplay.Text = time.ToLongDateString(); }); frag.Show(FragmentManager, DatePickerFragment.TAG); }
Shamim Uddin10y ago
Nice