ZOFTINO.COM

Android DatePicker Example

Android DatePicker allows user to select a date making the picked date valid and formatted correctly. DatePicker can be used in two modes: calendar mode and spinner mode. If you use material themes, by default DatePicker is displayed as calendar view.

In this post, you can find details on DatePickerDialog, DatePicker widget, DatePicker material styles, DatePicker custom material styles, DatePicker event handling, DatePicker calendar, DatePicker spinner, and DatePicker spinner styles.

Android DatePickerDialog Example

Date picker can be shown as dialog using DatePickerDialog. To use DatePickerDialog, first you need to create a dialog fragment by extending DialogFragment and implementing onCreateDialog method which returns DatePickerDialog instance. In the implementation of onCreateDialog method of date picker fragment, instantiate DatePickerDialog by setting current date and return it.

Below DatePickerDialog examples displays a screen with button, on clicking it, date picker dialog will be shown and the picked date will be displayed as a toast message.

DatePicker fragment

package dialog.zoftino.com.dialog;

import android.app.DatePickerDialog;
import android.app.Dialog;
import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.widget.DatePicker;
import android.widget.Toast;

import java.util.Calendar;

public class MyDatePickerFragment extends DialogFragment {
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {

        final Calendar c = Calendar.getInstance();
        int year = c.get(Calendar.YEAR);
        int month = c.get(Calendar.MONTH);
        int day = c.get(Calendar.DAY_OF_MONTH);

        return new DatePickerDialog(getActivity(), dateSetListener, year, month, day);
    }

    private DatePickerDialog.OnDateSetListener dateSetListener =
            new DatePickerDialog.OnDateSetListener() {
                public void onDateSet(DatePicker view, int year, int month, int day) {
                    Toast.makeText(getActivity(), "selected date is " + view.getYear() +
                            " / " + (view.getMonth()+1) +
                            " / " + view.getDayOfMonth(), Toast.LENGTH_SHORT).show();
                }
            };
}

Activity

package dialog.zoftino.com.dialog;

import android.support.v4.app.DialogFragment;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    public void showDatePicker(View v) {
        DialogFragment newFragment = new MyDatePickerFragment();
        newFragment.show(getSupportFragmentManager(), "date picker");
    }
}

Activity layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="dialog.zoftino.com.dialog.MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Date Picker Example"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:text="Pick Date"
        android:onClick="showDatePicker"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

</android.support.constraint.ConstraintLayout>

Android DatePickerDialog example output

android datepickerdialog example

Android DatePickerDialog event handling

As shown in the above date picker example, date picker event can be handled by implementing DatePickerDialog.OnDateSetListener. DatePickerDialog.OnDateSetListener has a callback method onDateSet which gets called when date is picked from date picker dialog. In onDateSet method, you can get user selected date as shown in the code below.

 DatePickerDialog.OnDateSetListener dateSetListener =
            new DatePickerDialog.OnDateSetListener() {
                public void onDateSet(DatePicker view, int year, int month, int day) {
                    Toast.makeText(getActivity(), "selected date is " + view.getYear() +
                            " / " + (view.getMonth()+1) +
                            " / " + view.getDayOfMonth(), Toast.LENGTH_SHORT).show();
                }
            }; 

Above date set callback method gets called every time date is picked only after adding it to DatePickerDialog by passing it to constructor of the DatePickerDialog.

DatePicker Widget Example

DatePicker can be shown using DatePicker widget. To use DatePicker widget first define date picker in layout xml as shown below.

Layout with DatePicker widget

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Date Picker Widget"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <DatePicker
        android:id="@+id/datePicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

</android.support.constraint.ConstraintLayout>

Activity

public class DatePickerWidgetActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.datepicker);

        DatePicker dp = findViewById(R.id.datePicker);
        dp.setOnDateChangedListener(dateChangedListener);
    }
    private DatePicker.OnDateChangedListener dateChangedListener =
            new DatePicker.OnDateChangedListener(){
        @Override
        public void onDateChanged(DatePicker datePicker, int i, int i1, int i2) {
            Toast.makeText(DatePickerWidgetActivity.this, "picked date is " + datePicker.getDayOfMonth() +
                    " / " + (datePicker.getMonth()+1) +
                    " / " + datePicker.getYear(), Toast.LENGTH_SHORT).show();
        }
    };

}

DatePicker widget date change listener

To handle DatePicker widget events, you need to implement DatePicker.OnDateChangedListener and add it to DatePicker widget by calling setOnDateChangedListener method. DatePicker.OnDateChangedListener has one callback onDateChanged which gets called when date is changed and this where you can get user picket date, see above code for details.

DatePicker widget output

android datepicker widget example

Android DatePicker Material Style

DatePicker material styles application level

Android platform provides material styles for DatePicker following material design guidelines. Above pictures show default material style of DatePicker with application them set to app compact material style Theme.AppCompat.Light.DarkActionBar.

Date picker style can be customized at application level by extending app compact themes and setting color properties as shown below.

<style name="MyAppTheme" parent="Theme.AppCompat.Light">
    <item name="colorAccent">#ff6d00</item>
    <item name="colorControlActivated">#33691e</item>
    <item name="android:selectableItemBackgroundBorderless">@color/colorPrimaryDark</item>
    <item name="colorControlHighlight">#d50000</item>
</style>

DatePicker output using custom theme.

android datepicker material style example

DatePicker material styles individual

With the above custom theme, all UI controls throughout the application get impacted. To customize only DatePicker in your application, you need to extend android material themes for DatePicker widget (Widget.Material.DatePicker) or alert dialog (ThemeOverlay.AppCompat.Dialog.Alert) and set datePickerStyle or datePickerDialogTheme properties of app compact application theme.

Below style is a custom DatePickerDialog theme.

<style name="MyDatePickerDialogStyle" parent="@style/ThemeOverlay.AppCompat.Dialog.Alert">
    <item name="showTitle">false</item>
    <item name="colorControlActivated">#ffea00</item>
    <item name="android:selectableItemBackgroundBorderless">@color/colorItmBg</item>
    <item name="colorControlHighlight">#c51162</item>
    <item name="android:headerBackground">#00c853</item>
</style>

Below style extends app compact theme with datePickerDialogTheme set to above custom theme.

<style name="MyAppThemeTwo" parent="Theme.AppCompat.Light">
    <item name="android:datePickerDialogTheme">@style/MyDatePickerDialogStyle</item>
</style>

Below picture shows date picker output after applying above custom theme to application.

android datepicker custom material style example

Android DatePicker Spinner

If you use material themes, by default the data picker is in calendar mode. You can change the look of DatePicker by setting datePickerMode attribute to either spinner or calendar mode.

Below style sets datepicker mode to spinner.

<style name="MyDatePickerStyle" parent="@android:style/Widget.Material.DatePicker">
    <item name="android:colorControlActivated">#ffea00</item>
     . . .
    <item name="android:datePickerMode">spinner</item>
    <item name="android:calendarViewShown">false</item>
</style>

Apply above style to date picker.

<DatePicker
    android:id="@+id/datePicker"
    style="@style/MyDatePickerStyle"
    android:theme="@style/MyDatePickerSpinnerStyle"
    . . ./>

Ouput of date picker in spinner mode.

android datepicker spinner example

If datePickerMode is set spinner and calendarViewShown is not set to false, both spinner and calendar views will be displayed as shown below.

android datepicker spinner and calendar view

Android DatePicker Spinner Style

Below custom material style for spinner DatePicker sets selection divider color.

<style name="MyDatePickerSpinnerStyle" parent="@android:style/Widget.Material.DatePicker">
    <item name="android:datePickerMode">spinner</item>
    <item name="android:calendarViewShown">false</item>
    <item name="colorControlNormal">#d50000</item>
</style>
android datepicker spinner style