changing number color in the timepicker of dialogprefernce

Question

I've gone over several stackoverflow posts, but have sadly not yet found something that works for me: I have a TimePreference that uses a timepicker. I believe due to my color scheme the numbers are not showing up (seems to be white on white): Screenshot of how it looks at the moment

I have tried to figure out how to influence the number colors through a style. No luck, but for some stackoverflow answers pointing to android:TimePickerStyleand similar which requires a higher API than what I have set (API 15). I've also tried to use a custom-layout, but I am not quite sure where best to call the layout in the TimePreference.class (or I happened on the right place, but had no luck either). I've also researched the possibility of the changing the clock-face color, but didn't get any further there either.

The TimePreference currently looks like this (no custom-layout implemented):

public class TimePreference extends DialogPreference {

    private int lastHour = 0;
    private int lastMinute = 0;
    private boolean isAm;
    private TimePicker picker = null;


    private static int getHour(String time) {
        String[] pieces = time.split(":");

        return (Integer.parseInt(pieces[0]));
    }

    private static int getMinute(String time) {
        String[] pieces = time.split(":");

        return (Integer.parseInt(pieces[1]));
    }

    public TimePreference(Context ctxt, AttributeSet attrs) {
        super(ctxt, attrs);

        setPositiveButtonText("Set");
        setNegativeButtonText("Cancel");
    }

    @Override
    protected View onCreateDialogView() {
        picker = new TimePicker(getContext());

        //check locale settings whether to use am/pm or 24 hour display
        picker.setIs24HourView(false);

        return (picker);
    }

    @Override
    protected void onBindDialogView(View v) {
        super.onBindDialogView(v);

        picker.setCurrentHour(lastHour);
        picker.setCurrentMinute(lastMinute);
    }

    @Override
    protected void onDialogClosed(boolean positiveResult) {
        super.onDialogClosed(positiveResult);

        if (positiveResult) {
            lastHour = picker.getCurrentHour();
            lastMinute = picker.getCurrentMinute();

            String time = String.valueOf(lastHour) + ":" + String.valueOf(lastMinute);

            if (callChangeListener(time)) {
                persistString(time);
            }
        }
    }

    @Override
    protected Object onGetDefaultValue(TypedArray a, int index) {
        return (a.getString(index));
    }

    @Override
    protected void onSetInitialValue(boolean restoreValue, Object defaultValue) {
        String time;
        if (restoreValue) {
            if (defaultValue == null) {
                time = getPersistedString("12:00 pm");
            } else {
                time = getPersistedString(defaultValue.toString());
            }
        } else {
            time = defaultValue.toString();
        }

        lastHour = getHour(time);
        lastMinute = getMinute(time);

        new TimePickerDialog.OnTimeSetListener() {

            public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
                isAm = hourOfDay < 12;
            }
        };
    }

    public String getTime() {
        String meridianId;
        if (isAm) {
            if (lastHour > 12) {
                meridianId = " pm";
            } else {
                meridianId = " am";
            }
        } else {
            meridianId = "";
        }
        return lastHour + ":" + lastMinute + meridianId;
    }
}

And my style.xml looks like this at the moment:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        (…)
        <item name="android:dialogTheme">@style/DialogTheme</item>
        <item name="android:alertDialogTheme">@style/DialogTheme</item>
    </style>

<style name="AppAlertDialogContent" parent="Theme.AppCompat.Dialog">
        <!-- To tint EditText and TimePicker -->
        <item name="colorAccent">@color/colorAccent</item>
        <!-- Used for the title and text -->
        <item name="android:textColorPrimary">@color/colorPrimaryDark</item>
        <item name="android:windowBackground">@color/colorPrimary</item>
    </style>

    <style name="DialogTheme" parent="Theme.AppCompat.Dialog">
        <!-- Used for the title and text -->
        <item name="android:textColorPrimary">@color/colorLightAccent</item>
        <!-- Used for the background -->
        <item name="android:background">@color/colorPrimary</item>
        <!-- Used for the buttons -->
        <item name="colorAccent">@color/colorLightAccent</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    </style>

I'd appreciate your help in ensuring that the numbers can actually be read. Whether by custom-layout, styles or some other nifty approach. Thank you, for your help.

Answer 1

After digging deep into the Timepicker widget I had to concede that this is not possible under API 21. So I ended up building my own custom UI, using two Numberpickers and a ToggleButton. This gave me enough reachable views where I could control the colors sufficiently to ensure it is readable. For thisandroid:theme is the lifesaver, as this is where I can then (finally!) influence the colors.

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/timePickerLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="horizontal">
<!-- hour -->
<NumberPicker
    android:id="@+id/dialog_hour_np"
    android:layout_width="@dimen/picker_width"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/half_space"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:solidColor="@color/colorPrimaryDark"
    android:theme="@style/AppTheme.Picker"
    app:layout_constraintEnd_toStartOf="@+id/dialog_minute_np"
    app:layout_constraintStart_toStartOf="parent" />
<!-- minute -->
<NumberPicker
    android:id="@+id/dialog_minute_np"
    android:layout_width="@dimen/picker_width"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/half_space"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:solidColor="@color/colorPrimaryDark"
    android:theme="@style/AppTheme.Picker"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/dialog_amPm_tb"
    app:layout_constraintStart_toEndOf="@+id/dialog_hour_np"
    app:layout_constraintTop_toTopOf="parent" />
<!-- AM / PM -->
<ToggleButton
    android:id="@+id/dialog_amPm_tb"
    style="?android:attr/textAppearanceLargeInverse"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="@dimen/half_space"
    android:layout_marginStart="@dimen/std_space"
    android:background="@color/colorPrimaryDark"
    android:textColor="@color/colorLightAccent"
    android:textOff="@string/time_string_pm"
    android:textOn="@string/time_string_am"
    app:layout_constraintBottom_toBottomOf="@+id/dialog_minute_np"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/dialog_minute_np"
    app:layout_constraintTop_toTopOf="@+id/dialog_minute_np" />

and the theme:

<style name="AppTheme.Picker" parent="Theme.AppCompat.Light.NoActionBar" >
        <item name="android:textColorPrimary">@color/colorAccent</item>
        <item name="android:textColorSecondary">@color/colorLightAccent</item>
    </style>