How to Build a Simple DatePicker in Android Studio
This post will cover how to create a date picker that will let you pick the day, month, and year with a button click. I will provide commentary inside the java code so that you understand how we achieved the end result. This simple code has endless applicability and you can use it on a wide variety of projects. Let’s dig in!
1. Open a New Android Studio Project and name it.
2. Leave the default minimum SDK and proceed further.
3. Select Empty Activity and click on Next.
4. Leave the default Activity Name and make sure you tick Generate Layout File and click finish to generate your new project.
5. Now we will create a button that will be used to bring up the calendar. We will also create one Textview that will say Selected Date and one TextView that will serve as an output and will display our selected date. Open activity_main.xml and insert the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <Button android:id="@+id/changeDate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Change Date" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Selected Date: " android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:id="@+id/Output" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:textAppearance="?android:attr/textAppearanceLarge" /> </LinearLayout> |
Note: You can use the Design mode to achieve the same result. Do it if you want to get more practice.
6. Open MainActivity.java and insert the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
package com.apps.appdosh.datechangerapp; import java.util.Calendar; import android.app.Activity; import android.app.DatePickerDialog; import android.app.Dialog; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.DatePicker; import android.widget.TextView; public class MainActivity extends Activity { private TextView Output; private Button changeDate; private int year; private int month; private int day; static final int DATE_PICKER_ID = 1111; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Output = (TextView) findViewById(R.id.Output); changeDate = (Button) findViewById(R.id.changeDate); // This will get the current date from calendar final Calendar c = Calendar.getInstance(); year = c.get(Calendar.YEAR); month = c.get(Calendar.MONTH); day = c.get(Calendar.DAY_OF_MONTH); // Here we're showing the current date Output.setText(new StringBuilder() // The Month is 0 based so we added 1 .append(month + 1).append("-").append(day).append("-") .append(year).append(" ")); // We've created this button listener in order to show the date picker dialog changeDate.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { //Every time the button is clicked show the date picker dialog showDialog(DATE_PICKER_ID); } }); } @Override protected Dialog onCreateDialog(int id) { switch (id) { case DATE_PICKER_ID: // This opens Date Picker dialog open datepicker dialog. // We set the Date Picker to the current date. // We add pickerListener in order to date the picker. return new DatePickerDialog(this, pickerListener, year, month,day); } return null; } private DatePickerDialog.OnDateSetListener pickerListener = new DatePickerDialog.OnDateSetListener() { // When we close the dialog box, the following method will be called. public void onDateSet(DatePicker view, int selectedYear, int selectedMonth, int selectedDay) { year = selectedYear; month = selectedMonth; day = selectedDay; // This shows the selected date Output.setText(new StringBuilder().append(month + 1) .append("-").append(day).append("-").append(year) .append(" ")); } }; } |
7. If done correctly, it should display like this:
