How to change the style of a DatePicker in android?

Question

I want to change the default color of the date/time picker dialog in Android, so that it should match my app's theme. I searched for the solution on Google, but I couldn't find a solution.

What I was doing was creating a new style:

  <style name="datepicker" parent="@android:style/Widget.DeviceDefault.DatePicker">
    <!---TODO-->
    <item name="android:focusedMonthDateColor">@android:color/holo_red_dark</item>
</style>

Don't know what are the attributes available for date picker dialogue. It would be great if anyone could post a link on that

and after adding the style I was calling it in my main style as

 <item name="android:datePickerStyle">@style/datepicker</item>

Unfortunately, this didn't work for me at all.

Avinash Ajay Pandey · Answer 1 · 2016-07-29T12:01:15.477

99

call like this

 button5.setOnClickListener(new View.OnClickListener() {

 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub

 DialogFragment dialogfragment = new DatePickerDialogTheme();

 dialogfragment.show(getFragmentManager(), "Theme");

 }
 });

public static class DatePickerDialogTheme extends DialogFragment implements DatePickerDialog.OnDateSetListener{

     @Override
     public Dialog onCreateDialog(Bundle savedInstanceState){
     final Calendar calendar = Calendar.getInstance();
     int year = calendar.get(Calendar.YEAR);
     int month = calendar.get(Calendar.MONTH);
     int day = calendar.get(Calendar.DAY_OF_MONTH);

//for one

//for two 

 DatePickerDialog datepickerdialog = new DatePickerDialog(getActivity(),
 AlertDialog.THEME_DEVICE_DEFAULT_DARK,this,year,month,day);

//for three 
 DatePickerDialog datepickerdialog = new DatePickerDialog(getActivity(),
 AlertDialog.THEME_DEVICE_DEFAULT_LIGHT,this,year,month,day);

// for four

   DatePickerDialog datepickerdialog = new DatePickerDialog(getActivity(),
 AlertDialog.THEME_HOLO_DARK,this,year,month,day);

//for five

 DatePickerDialog datepickerdialog = new DatePickerDialog(getActivity(),
     AlertDialog.THEME_HOLO_LIGHT,this,year,month,day);

//for six

 DatePickerDialog datepickerdialog = new DatePickerDialog(getActivity(),
 AlertDialog.THEME_TRADITIONAL,this,year,month,day);


     return datepickerdialog;
     }

     public void onDateSet(DatePicker view, int year, int month, int day){

     TextView textview = (TextView)getActivity().findViewById(R.id.textView1);

     textview.setText(day + ":" + (month+1) + ":" + year);

     }
     }

follow this it will give you all type date picker style(copy from this)

http://www.android-examples.com/change-datepickerdialog-theme-in-android-using-dialogfragment/

edited Jul 29 '16 at 12:01

answered Jul 29 '16 at 07:26

Avinash Ajay Pandey

1,497
12
19

4

@WolfJee use like this; int theme; if (Build.VERSION.SDK_INT < 23) theme = AlertDialog.THEME_HOLO_DARK; else theme = android.R.style.Theme_Holo_Dialog; new DatePickerDialog(getActivity(), theme, date,...... – kaya Mar 01 '17 at 12:42
very good answer, if you don't want any change in styles and themes of application only for datePicker. But you have just messed up with example images' numbers, e.g .THEME_DEVICE_DEFAULT_LIGHT corresponds to second image I think. Also I'm getting now deprecated error for above code for API >23 – Shirish Herwade Nov 21 '17 at 12:27
4

I hate the new "Material" style for Google's date picker because users have no fricken clue that the year can be changed by clicking in the top-left corner!! Horrible UX! – Someone Somewhere May 30 '18 at 21:26
@kaya your suggestion isn't working. Try it on Android 7.0 emulator – Someone Somewhere Jun 12 '18 at 10:48
@WolfJee did you find a solution? – Someone Somewhere Jun 12 '18 at 10:49
Can I able to change the corner radius? – sejn Jan 20 '21 at 14:13
These styles are deprecated in API level 23. For updated style constants please refer - https://developer.android.com/reference/android/app/AlertDialog – Vishal Gupta Jan 24 '23 at 07:07

silverFoxA · Accepted Answer · 2017-11-13T04:00:42.097

71

Try this. It's the easiest & most efficient way

<style name="datepicker" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/primary</item>
</style>

edited Nov 13 '17 at 04:00

answered May 15 '15 at 06:01

silverFoxA

4,549
7
33
73

2

How to set the button style? I tried setting `buttonBarNegativeButtonStyle` `buttonBarNeutralButtonStyle` `buttonBarPositiveButtonStyle` `buttonStyle` but not reflecting. – Kavin Raju S Aug 22 '20 at 12:57
I have same issue and can not change button style – Mahdi Nov 17 '20 at 05:42
Took no effect with Kotlin. – J A S K I E R Feb 05 '21 at 00:29

score 62 · Answer 3 · edited Jan 03 '19 at 17:06

62

To change DatePicker colors (calendar mode) at application level define below properties.

<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>

See http://www.zoftino.com/android-datepicker-example for other DatePicker custom styles

edited Jan 03 '19 at 17:06

AskNilesh

67,701
16
123
163

answered Oct 05 '17 at 06:44

Arnav Rao

6,692
2
34
31

1

How I can change button text colors? – Mahdi Nov 17 '20 at 05:43
@Mahdi see Rohit's answer (that will change the button text color) – May 04 '21 at 18:59

score 61 · Answer 4 · edited May 14 '20 at 05:45

Create a new style

<style name="my_dialog_theme" parent="ThemeOverlay.AppCompat.Dialog">
    <item name="colorAccent">@color/colorAccent</item>                   <!--header background-->
    <item name="android:windowBackground">@color/colorPrimary</item>     <!--calendar background-->
    <item name="android:colorControlActivated">@color/colorAccent</item> <!--selected day-->
    <item name="android:textColorPrimary">@color/colorPrimaryText</item> <!--days of the month-->
    <item name="android:textColorSecondary">@color/colorAccent</item>    <!--days of the week-->
</style>

Then initialize the dialog

Calendar mCalendar = new GregorianCalendar();
mCalendar.setTime(new Date());

new DatePickerDialog(mContext, R.style.my_dialog_theme, new DatePickerDialog.OnDateSetListener() {
    @Override
    public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
        //do something with the date
    }
}, mCalendar.get(Calendar.YEAR), mCalendar.get(Calendar.MONTH), mCalendar.get(Calendar.DAY_OF_MONTH)).show();

Result:

@Mahdi see Rohit's answer (that will change the button text color) — , May 04 '21 at 18:59

score 22 · Answer 5 · edited Mar 22 '19 at 14:13

Calendar calendar = Calendar.getInstance();

DatePickerDialog datePickerDialog = new DatePickerDialog(getActivity(), R.style.DatePickerDialogTheme, new DatePickerDialog.OnDateSetListener() {
  public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
    Calendar newDate = Calendar.getInstance();
    newDate.set(year, monthOfYear, dayOfMonth);

    SimpleDateFormat simpleDateFormat = new SimpleDateFormat("dd-MM-yyyy");
    String date = simpleDateFormat.format(newDate.getTime());
  }
}, calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH), calendar.get(Calendar.DAY_OF_MONTH));

datePickerDialog.show();

And use this style:

<style name="DatePickerDialogTheme" parent="Theme.AppCompat.Light.Dialog">
  <item name="colorAccent">@color/colorPrimary</item>
</style>

what if `DatePicker` is used in xml? – user924 Aug 05 '21 at 08:09 — user924, Aug 05 '21 at 08:09

score 10 · Answer 6 · answered Feb 05 '21 at 12:00

Create custom DatePickerDialog style:

<style name="AppTheme.DatePickerDialog" parent="Theme.MaterialComponents.Light.Dialog">
    <item name="android:colorAccent">@color/colorPrimary</item>
    <item name="android:colorControlActivated">@color/colorPrimaryDark</item>
    <item name="android:buttonBarPositiveButtonStyle">@style/AppTheme.Alert.Button.Positive</item>
    <item name="android:buttonBarNegativeButtonStyle">@style/AppTheme.Alert.Button.Negative</item>
    <item name="android:buttonBarNeutralButtonStyle">@style/AppTheme.Alert.Button.Neutral</item>
</style>

<style name="AppTheme.Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="android:textColor">@color/buttonPositive</item>
</style>

<style name="AppTheme.Alert.Button.Negative" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="android:textColor">@color/buttonNegative</item>
</style>

<style name="AppTheme.Alert.Button.Neutral" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="android:textColor">@color/buttonNeutral</item>
</style>

Set custom datePickerDialogTheme style in app theme:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="android:datePickerDialogTheme">@style/AppTheme.DatePickerDialog</item>
</style>

Set theme programmatically on initialization like this:

val datetime = DatePickerDialog(this, R.style.AppTheme_DatePickerDialog)

Thanks. i was having invisible/white positive and negative buttons before. This fixed it. — Daniyal Javaid, Apr 25 '21 at 16:03

Nunchucks · Answer 7 · 2018-06-25T16:48:38.453

9

(I'm using React Native; targetSdkVersion 22). I'm trying to change the look of a calendar date picker dialog. The accepted answer didn't work for me, but this did. Hope this snippet helps some of you.

<style name="CalendarDatePickerDialog"  parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#6bf442</item>
    <item name="android:textColorPrimary">#6bf442</item>
</style>

edited Jun 25 '18 at 16:48

answered Jun 20 '18 at 22:59

Nunchucks

1,182
10
14

Isn't it the same code snippet as that of the accepted answer? – silverFoxA Jun 22 '18 at 18:17
2

Almost, but the name is different. Setting the name to 'datepicker' didn't work for me, but changing it to 'CalendarDatePickerDialog' made it work. – Nunchucks Jun 25 '18 at 16:43

score 8 · Answer 8 · answered Jan 25 '19 at 01:33

As AlertDialog.THEME attributes are deprecated, while creating DatePickerDialog you should pass one of these parameters for int themeResId

android.R.style.Theme_DeviceDefault_Dialog_Alert
android.R.style.Theme_DeviceDefault_Light_Dialog_Alert
android.R.style.Theme_Material_Light_Dialog_Alert
android.R.style.Theme_Material_Dialog_Alert

score 3 · Answer 9 · answered Aug 20 '22 at 20:09

For DayNight theme:

Create theme for date/time picker:

<style name="App.Dialog.DateTime" parent="Theme.AppCompat.DayNight.Dialog">
    <item name="colorAccent">?attr/clAccent</item>
    <item name="android:windowBackground">?attr/clPrimary</item>
    <item name="android:buttonBarNegativeButtonStyle">@style/App.Dialog.NegativeButton</item>

    <!--  For overScrollMode  -->
    <item name="android:colorEdgeEffect">?attr/clAccentRipple</item>
    <item name="android:overScrollMode">ifContentScrolls</item>
</style>

<style name="App.Dialog.NegativeButton" parent="@style/Widget.AppCompat.Button.ButtonBar.AlertDialog">
    <item name="android:textColor">?attr/clContentSecond</item>
</style>

You may specify styles for different dialog buttons (like I did it via App.Dialog.NegativeButton)

Also, I tried another parent theme (for App.Dialog.DateTime): Theme.AppCompat.DayNight.Dialog.Alert, but result looked ugly with strange dialog window sizes.

Setup date/time picker theme inside your app theme:

<item name="android:datePickerDialogTheme">@style/App.Dialog.DateTime</item>
<item name="android:timePickerDialogTheme">@style/App.Dialog.DateTime</item>

The result:

For more dialog customization you may check xml keys from this answer.

This is the only solution that worked for me, Possibly because of this style inheritance, `@style/Widget.AppCompat.Button.ButtonBar.AlertDialog` but not sure. — jordi casas, Aug 29 '23 at 11:14

score 1 · Answer 10 · answered May 27 '22 at 20:36

If you are using a DatePicker in XML, all you have to do is adding a style for your dialog as @theBeardedPilot mentioned like this:

<style name="DialogTheme" parent="ThemeOverlay.AppCompat.Dialog">
    <!--header background-->
    <item name="colorAccent">@android:color/holo_green_dark</item>
    <!--selected day-->
    <item name="android:colorControlActivated">@android:color/holo_red_dark</item>
    <!--days of the month-->
    <item name="android:textColorPrimary">@android:color/holo_orange_dark</item>
    <!--days of the week-->
    <item name="android:textColorSecondary">@android:color/holo_blue_dark</item>
</style>

then call this style using the android:theme attribute like this:

<DatePicker
    android:theme="@style/DialogTheme"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

How to change the style of a DatePicker in android?

10 Answers10

Linked