CODEWITHSUNDEEP
androidtitaniumandroid-alertdialogandroid-styles
NodeJustin
NodeJustin

Reputation: 125

Android Style Theme.Material.Light.Dialog on DateTimePicker Dialog

I am using Titanium on an Android app that I am building. Although the framework is Titanium, I think this answer will apply to native as well (To an extent).

I am trying to style a DatePicker Dialog and a TimePicker Dialog, which I have managed to mostly get working. However I am at the end of my tether now with trying to get the Highlight Circle and OK/Cancel buttons to match the rest of the dialog style.

I am hoping this is something simple. I have attached 2 screen shots, the colours I am looking for are the blue same as the header background, not the sort of Cyan colour that the OK/Cancel and Day highlight circle are at the moment.

Here is the code:

The Below is the theme for the window

     <style name="Theme.DelegateWindow" parent="@style/Theme.AppCompat">
      <item name="windowActionBar">false</item>
      <item name="windowNoTitle">true</item>
      <item name="android:statusBarColor">#1456A5</item>
      <item name="colorControlNormal">#DADAD9</item>
      <item name="colorControlActivated">#DADAD9</item>
      <item name="colorControlHighlight">#DADAD9</item>
      <item name="android:datePickerDialogTheme">@style/MyDatePickerDialogTheme</item>
      <item name="android:timePickerDialogTheme">@style/MyTimePickerDialogTheme</item>
    </style>

Here is the datePickerDialogTheme and timePickerDialogTheme

    <style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
        <item name="colorAccent">@color/primary</item>
        <item name="android:datePickerStyle">@style/MyDatePickerStyle</item>
    </style>

    <style name="MyTimePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
        <item name="colorAccent">@color/primary</item>
        <item name="android:timePickerStyle">@style/MyTimePickerStyle</item>
    </style>

And finally the Styles

    <style name="MyDatePickerStyle" parent="@android:style/Widget.Material.Light.DatePicker">
        <item name="android:headerBackground">@color/primary</item>
        <item name="android:calendarTextColor">@color/DarkGrey</item>
        <item name="android:dayOfWeekBackground">@color/primaryDark</item>
        <item name="android:yearListSelectorColor">@color/primary</item>
    </style>

    <style name="MyTimePickerStyle" parent="@android:style/Widget.Material.Light.TimePicker">
        <item name="android:headerBackground">@color/primary</item>
        <item name="android:calendarTextColor">@color/DarkGrey</item>
        <item name="android:dayOfWeekBackground">@color/primaryDark</item>
        <item name="android:yearListSelectorColor">@color/primary</item>
    </style>

Image 1 Date Picker Image 2 Time Picker

Upvotes: 1

Views: 2899

Answers (1)

NodeJustin
NodeJustin

Reputation: 125

I figured it out.

I had to change:

parent="@android:style/Widget.Material.Light.TimePicker"

To

Theme.AppCompat.Light.Dialog

So the final result is

    <style name="MyDatePickerDialogTheme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/primary</item>
        <item name="android:datePickerStyle">@style/MyDatePickerStyle</item>
    </style>

    <style name="MyTimePickerDialogTheme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/primary</item>
        <item name="android:timePickerStyle">@style/MyTimePickerStyle</item>
    </style>

Upvotes: 1

Related Questions