Change DatePicker background color

Question

I am trying to display a DatePicker dialog on top of another activity and what is happening is it is somehow inheriting its color.

I'd like it to have a green header and white background, like on this example

Here is excerpt from styles

<style name="DatePickerDialog" parent="@android:style/Theme.Holo.Light">
    <item name="android:windowFrame">@null</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="colorAccent">@color/primary</item>
</style>

And this code is used to pop up the DatePicker

    DatePickerDialog datepicker = new DatePickerDialog(this, R.style.DatePickerDialog, new DatePickerDialog.OnDateSetListener() {

        public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
            TextView newdate = (TextView) findViewById(R.id.newdate);
            Date date = getDate(year, monthOfYear, dayOfMonth);
            DateFormat dateformat = new SimpleDateFormat(getResources().getString(R.string.date_format_full));
            newdate.setText(dateformat.format(date));
        }
    }, newCalendar.get(Calendar.YEAR), newCalendar.get(Calendar.MONTH), newCalendar.get(Calendar.DAY_OF_MONTH));

    datepicker.show();

However it instead is displayed in all green

If I specify the white background in the styles, it overrides the header and the buttons as well

    <item name="android:background">@color/app_background</item>

One last thing I've tried is to use AlertDialog.THEME_DEVICE_DEFAULT_DARK as the DatePicker theme

DatePickerDialog datepicker = new DatePickerDialog(this, 
AlertDialog.THEME_DEVICE_DEFAULT_DARK, new 
DatePickerDialog.OnDateSetListener()

But it'd still display the whole dialog in green

Here is the style of the activity I am opening the dialog from

<style name="UserDialog" parent="android:style/Theme.Dialog">
    <item name="android:windowFrame">@null</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:background">@color/primary</item>
    <item name="android:textColor">@color/dialog_text</item>
    <item name="colorPrimary">@color/app_background</item>
    <item name="android:windowTitleStyle">@style/NewDialogTitle</item>
</style>

<style name="NewDialogTitle" parent="@android:style/TextAppearance.DialogWindowTitle">
    <item name="android:gravity">center_horizontal</item>
</style>

And the colors I am using

<color name="primary">#4CAF50</color>
<color name="app_background">#FFFFFF</color>

Does anyone know how to get it done? I'd appreciate any guidance. I've tried to follow this answer, but had no luck

score 14 · Answer 1 · answered Jan 21 '18 at 17:49

14

This code worked for me try this ...

styles.xml

<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">@android:color/holo_green_dark</item>
</style>

Popup Code

        Calendar mcurrentDate = Calendar.getInstance();
        int mYear = mcurrentDate.get(Calendar.YEAR);
        int mMonth = mcurrentDate.get(Calendar.MONTH);
        int mDay = mcurrentDate.get(Calendar.DAY_OF_MONTH);

        DatePickerDialog mDatePicker;
        mDatePicker = new DatePickerDialog(context, R.style.DialogTheme, new DatePickerDialog.OnDateSetListener() {
            public void onDateSet(DatePicker datepicker, int selectedyear, int selectedmonth, int selectedday) {

                Toast.makeText(context,"Selected Date " + + selectedday + "-" + ++selectedmonth  + "-" + selectedyear ,Toast.LENGTH_SHORT).show();
            }
        }, mYear, mMonth, mDay);
        mDatePicker.show();

answered Jan 21 '18 at 17:49

Naveen Dew

1,295
11
19

I've tried to run it as you suggest, but here is the result is the same green window, this time with black accent on date selected – rianor Jan 23 '18 at 22:37
what colors are you getting? can you elaborate – Naveen Dew Jan 23 '18 at 22:49
remove everything from your activity style except colorPrimary, colorPrimaryDark and colorAccent then use above code it should work – Naveen Dew Jan 23 '18 at 22:52
useful solution :-) – Nikita Vishwakarma Nov 30 '18 at 11:47

score 0 · Answer 2 · answered Jan 20 '18 at 17:45

0

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>

Reference : How to change the style of a DatePicker in android?

answered Jan 20 '18 at 17:45

Gowthaman M

8,057
8
35
54

I've tried to add this to the app theme, but got the same result. It doesn't look like the dialog uses it – rianor Jan 20 '18 at 18:17

score 0 · Answer 3 · answered Mar 22 '19 at 13:34

The following custom DatePickerDoalog class not only makes dim color customizable but also it makes dim appearing animated

/**
 * @author Taras Yurkiv @Devlight
 */
public class DatePickerDialogCustomDim extends DatePickerDialog {

    private final long animDuration = 100;
    private float dimAmount = 0.7f;

    private Drawable dimDrawable;
    private ViewGroup root;

    private OnDismissListener outsideDismissListener;

    private final OnDismissListener dismissListener = new OnDismissListener() {

        @Override
        public void onDismiss(DialogInterface dialog) {
            final ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(dimDrawable,
                    PropertyValuesHolder.ofInt("alpha", (int) (255 * dimAmount), 0));
            animator.setTarget(dimDrawable);
            animator.setDuration(animDuration);
            animator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    ViewGroupOverlay overlay = root.getOverlay();
                    overlay.remove(dimDrawable);
                }
            });
            animator.start();
            if (outsideDismissListener != null)
                outsideDismissListener.onDismiss(dialog);
        }
    };


    @TargetApi(Build.VERSION_CODES.N)
    public DatePickerDialogCustomDim(@NonNull Context context) {
        this(context, 0);
    }

    @TargetApi(Build.VERSION_CODES.N)
    public DatePickerDialogCustomDim(@NonNull Context context, @StyleRes int themeResId) {
        this(context, themeResId, null, -1, -1, -1);
        init(context);
    }

    public DatePickerDialogCustomDim(@NonNull Context context,
                                     @Nullable OnDateSetListener listener,
                                     int year,
                                     int month,
                                     int dayOfMonth) {
        this(context, 0, listener, year, month, dayOfMonth);
    }

    public DatePickerDialogCustomDim(@NonNull Context context,
                                     @StyleRes int themeResId,
                                     @Nullable OnDateSetListener listener,
                                     int year,
                                     int monthOfYear,
                                     int dayOfMonth) {
        super(context, themeResId, listener, year, monthOfYear, dayOfMonth);
        init(context);
    }

    private void init(Context context) {
        root = ((Activity) context).getWindow().getDecorView().findViewById(android.R.id.content);
        super.setOnDismissListener(dismissListener);
    }

    public void setDimAmount(@FloatRange(from = 0, to = 1f) float dim) {
        dimAmount = dim;
    }

    @Override
    public void show() {
        super.show();
        dimDrawable = new ColorDrawable(Color.WHITE); // a dim color
        dimDrawable.setBounds(0, 0, root.getWidth(), root.getHeight());

        ViewGroupOverlay overlay = root.getOverlay();
        overlay.add(dimDrawable);

        ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(dimDrawable,
                PropertyValuesHolder.ofInt("alpha", 0, (int) (255 * dimAmount)));
        animator.setTarget(dimDrawable);
        animator.setDuration(animDuration);
        animator.start();
    }

    @Override
    public void setOnDismissListener(@Nullable OnDismissListener listener) {
        outsideDismissListener = listener;
    }
}

it works in conjunction of a style (mainly disables the dim)

<style name="DatePickerDialogTheme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">@color/accent</item>
    <item name="android:textColorLink">@color/primary</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:backgroundDimEnabled">false</item>
</style>

Change DatePicker background color

3 Answers3

Linked