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.

Bobwhite

Answer 1

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>

Bobwhite

How to set the button style? I tried setting buttonBarNegativeButtonStyle buttonBarNeutralButtonStyle buttonBarPositiveButtonStyle buttonStyle but not reflecting. – Ape

I have same issue and can not change button style – Footman

Took no effect with Kotlin. – Yaroslavl

Answer 2

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/

Inessa

@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,...... – Recipe

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

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! – Dorsy

@Recipe your suggestion isn't working. Try it on Android 7.0 emulator – Dorsy

@WolfJee did you find a solution? – Dorsy

Can I able to change the corner radius? – Bit

These styles are deprecated in API level 23. For updated style constants please refer - developer.android.com/reference/android/app/AlertDialog – Factoring

Answer 3

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

Polyglot

How I can change button text colors? – Footman

@Footman see Rohit's answer (that will change the button text color) – Musick

Answer 4

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:

Embolus

How I can change button style or button text color? – Footman

@Footman see Rohit's answer (that will change the button text color) – Musick

what if DatePicker is used in xml? – Orphaorphan

Answer 5

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>

Chilli

what if DatePicker is used in xml? – Orphaorphan

Answer 6

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)

Bitner

Thanks. i was having invisible/white positive and negative buttons before. This fixed it. – Genesia

Answer 7

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

Weaken

Isn't it the same code snippet as that of the accepted answer? – Bobwhite

Almost, but the name is different. Setting the name to 'datepicker' didn't work for me, but changing it to 'CalendarDatePickerDialog' made it work. – Weaken

Answer 8

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

Brass

Answer 9

For DayNight theme:

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

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

Lawley

This is the only solution that worked for me, Possibly because of this style inheritance, @style/Widget.AppCompat.Button.ButtonBar.AlertDialog but not sure. – Linton

Answer 10

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

Eudoca