How to change the default color scheme timepicker dialog fragment?

Question

I am trying to change the default color the timepicker dialog fragment. and right now i have no idea as to what im supposed to be doing.

this what i have managed to set my theme to (withouth the actionBar):

but this is the dialog i get:

this is my xml style file:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">@color/color_accent</item>
        <item name="colorPrimaryDark">@color/color_secondary</item>
        <item name="colorAccent">@color/color_accent</item>
        <item name="android:statusBarColor">@color/color_primary</item>
    </style>
</resources>

My colors file:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="flat_text">#f14268</color>
    <color name="background_flatbtn">#fff</color>
    <color name="color_accent">#f14268</color>
    <color name="color_primary">#d83b5d</color>
    <color name="color_secondary">#d83b5d</color>
</resources>

mytimepicker fragment:

public class DialogHandler extends DialogFragment
        implements TimePickerDialog.OnTimeSetListener {
    Context context;

    public DialogHandler(Context context){
        this.context=context;

    }

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Use the current time as the default values for the picker
        final Calendar c = Calendar.getInstance();
        int hour = c.get(Calendar.HOUR_OF_DAY);
        int minute = c.get(Calendar.MINUTE);
        TimePickerDialog dialog= new TimePickerDialog(new ContextThemeWrapper(getActivity(),R.style.AppTheme), this, hour, minute, DateFormat.is24HourFormat(getActivity()));
        // Create a new instance of TimePickerDialog and return it
        return dialog;
    }

    public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
        // Do something with the time chosen by the user
        Toast.makeText(context, "your time is selected",Toast.LENGTH_LONG).show();
    }
}

my dialogue call:

DialogHandler newFragment = new DialogHandler(getApplicationContext());
        newFragment.show(getSupportFragmentManager() , "time_Picker");

Please help me . Thanks in Advance :)

Answer 1

It took a while but i figured it out! to setup the custom theme in your time Picker

go to the styles.xml page. add a new theme:

<style name="Dialog" parent="Base.Theme.AppCompat.Dialog">
        <itemname="android:timePickerDialogTheme">@style/AppTheme2</item>
</style>

define a theme that inherits ur custom app theme(to maintain uniformity over the app), here the properties of the timepicker dialog can be mentioned :

<style name="AppTheme2" parent="AppTheme.Base">
        <item name="android:windowIsFloating">true</item>
</style>

for me this was the custom theme i was using for the whole app:

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
</style>

apply theme in the call for time picker

TimePickerDialog dialog= new TimePickerDialog(
 new ContextThemeWrapper(getActivity(),R.style.Dialog)
, this, hour, minute
, DateFormat.is24HourFormat(getActivity())); 

From my guess if you want anymore customization you should add it in the style AppTheme2(or whatever u want to call it)

here is a list of customizations that u can add to it(not sure about everything though):

I hope this helps. I'm no expert here but this seems to work so im going with it ;)

Answer 2

You can specify the theme resource for the TimerPickerDialog directly in the constructor, without the need of using ContextWrapper or android:timePickerDialogTheme in App/Activity's theme (which is only available from API 21).

Example of theme for TimePickerDialog:

<style name="TimePicker" parent="Theme.AppCompat.Light.Dialog">
    <item name="android:windowIsFloating">true</item>
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
</style>

Pass its resource id as second argument:

TimePickerDialog dialog = new TimePickerDialog(getActivity(), R.style.TimePicker, 
this, hour, minute, false);