TimePickerDialog with old style and different color

Question

I created a TimePickerDialog and changed the default color. In addition, I would like to change the style to a different style.

I couldn't find a way to change the color and also the style at the same time.

This is how I created my TimePickerDialog:

TimePickerDialog Code:

public void showHourPicker() {
    final Calendar myCalender = Calendar.getInstance();
    int hour = myCalender.get(Calendar.HOUR_OF_DAY);
    int minute = myCalender.get(Calendar.MINUTE);
    TimePickerDialog.OnTimeSetListener myTimeListener = new TimePickerDialog.OnTimeSetListener() {
        @Override
        public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
            if (view.isShown()) {
                myCalender.set(Calendar.HOUR_OF_DAY, hourOfDay);
                myCalender.set(Calendar.MINUTE, minute);
                updateHourEditText(myCalender);
            }
        }
    };
    TimePickerDialog timePickerDialog = new TimePickerDialog(getContext(),R.style.TimePickerDialogStyle , myTimeListener, hour, minute, true);
    timePickerDialog.setTitle("Choose hour:");
    timePickerDialog.show();
}

And this it the style:

<style name="TimePickerDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="colorControlActivated">@color/mcgpalette_300</item>
    <item name="colorAccent">@color/mcgpalette_300</item>
</style>

And the TimePickerDialog that I get looks like:

If I try to change the style, as you can see in the picture below, I get the style I want but not in the color as in the above example. Code for good style, but without my color:

TimePickerDialog timePickerDialog = new TimePickerDialog(getContext(), 2 , myTimeListener, hour, minute, true);

My Question is: How can I set the style to be as in the second picture and the color as in the first picture?

Answer 1

How can I set the style to be as in the second picture and the color as in the first picture?

You'll need some reflection as there isn't a public API for this.

The boring stuff, you can skip this.

Some internals:

• Below API 21 the second style aka "spinner mode" is the only style available. Since API 21 another "clock mode" is available and TimePicker widget delegates work to internal classes based on which style you choose.

• The spinner mode consists of several NumberPicker widgets.

In order to achieve what you want you need to:

1. Check if you're under API 21 or over API 21 and use the spinner mode (and realize the class names of clock and spinner delegates are switched on API 21, aah).
2. Gain access to all of the NumberPickers.
3. Gain access to these NumberPickers' dividers.
4. Tint the divider drawables with new color.

Here's the good stuff.

Since the actual implementation is pages long I'll post links instead:

• XpNumberPicker allows to change divider (or just divider color) of any NumberPicker.
• XpDatePicker allows to change divider color of any spinner style DatePicker.
• XpTimePicker allows to change divider color of any spinner style TimePicker.

Copy all of these classes into your project.

You'll need a ColorStateList of your new divider color. I'll leave obtaining this up to you.

Example:

final int color = ContextCompat.getColor(timePicker.getContext(), R.color.accent);
final ColorStateList csl = ColorStateList.valueOf(color);
XpTimePicker.setSelectionDividerTint(timePicker, csl);

The catch.

You don't have access to a TimePicker from a TimePickerDialog.

final int timePickerId = context.getResources().getIdentifier("android:id/timePicker", null, null);
final TimePicker timePicker = (TimePicker) timePickerDialog.findViewById(timePickerId);

I haven't tested this last bit.

The title.

TimePickerDialog extends Dialog which uses Holo theme below API 21. Meaning you always have blue title with blue underline. How to work around it?

• Hide the title completely by calling timePickerDialog.setTitle(null).
• Manual approach.
  • Find the title view (android:id/title) and change its text color.
  • Find the divider view (android:id/titleDivider) and change its background color. This ID is not part of public API.
  • If the dialog title layout is not the default Holo it may not have these views!
• Use a android.support.v7.app.AlertDialog with TimePicker for Material theme on all platforms provided by AppCOmpat library.

Answer 2

At the end of the day, TimePickerDialog is just an alert dialog with a TimePicker. You can take its code and create your own AlertDialog with a TimePicker. This means you can customize any attributes of the time picker. I suggest you create a new dialog xml and inflate it in your custom AlertDialog. Make sure sure to call setView(View view) with your layout like in TimePickerDialog.

In this example, I've set the color of the AM/PM text to orange.

<TimePicker xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/timePicker"
    android:layout_gravity="center_horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:amPmTextColor="@android:color/holo_orange_light"
    android:timePickerMode="@integer/time_picker_mode" />