I'm trying to customize a CalendarView of the DatePicker from DatePickerDialog. I already changed DatePickerDialog's background and button label color style, thanks to excellent Vikram's answer. Now I want to change layout of weekday name abbreviation inside CalendarView. Change their background color and text color.
Looking inside styles_materials.xml file from AndroidSDK folder values, this style is there:
<style name="Widget.Material.Light.CalendarView" parent="Widget.CalendarView">
<item name="selectedWeekBackgroundColor">#330066ff</item>
<item name="focusedMonthDateColor">#FF000000</item>
<item name="unfocusedMonthDateColor">#7F08002B</item>
<item name="weekNumberColor">#7F080021</item>
<item name="weekSeparatorLineColor">#7F08002A</item>
<item name="weekDayTextAppearance">#style/TextApp earance.Material.CalendarViewWeekDayView</item>
<item name="calendarViewMode">material</item>
</style>
I've overrided and applied my custom style in styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:calendarViewStyle">#style/CustomDatePickerStyle</item>
</style>
<style name="CustomDatePickerCalendarView" parent="android:Widget.Material.Light.CalendarView">
<item name="android:selectedWeekBackgroundColor">#color/viking</item>
<item name="android:focusedMonthDateColor">#color/viking</item>
<item name="android:unfocusedMonthDateColor">#color/viking</item>
<item name="android:weekNumberColor">#color/viking</item>
<item name="android:weekSeparatorLineColor">#color/viking</item>
</style>
I've made a test setting most of the parameters with the same color. But it didn't work. Why the style cannot be applied?
EDIT:
To be more clear, I want to change the hightlighted part:
Related
I was able to change the color setting for the clock view
(That was helpful https://www.tutorialsbuzz.com/2019/09/android-timepicker-dialog-styling.html)
But I wasn't so successful at the second view (press the keyboard icon at the bottom left of the first image). How to change the color of SubTitle, InputField and description (center of the image that looks pure black)? Has anyone an idea?
Is there a documentation that I overlook? Would be great to have a list with all keys like "android:numbersTextColor" etc. for the color pallet of the second view.
I appreciate your time and effort. Thanks :-)
Edit
"Leon Lu - MSFT" thanks for your answer. That made it possible to style the view under "Keyboard". Is it possible to set different colors for the text above and below the input field, the "AM"/"PM" text and "cancel"/"ok"?
Unfortunately the clock view changed into this after applying the provided style.
Complete Android Style
<style name="MainTheme" parent="MainTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<!-- Set theme colors from https://aka.ms/material-colors -->
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#2196F3</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#1976D2</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#f59b00</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight and colorSwitchThumbNormal. -->
<item name="windowActionModeOverlay">true</item>
<item name="android:datePickerDialogTheme">#style/AppCompatDialogStyle</item>
<item name="android:timePickerDialogTheme">#style/TimePickerLightTheme</item>
<item name="android:timePickerStyle">#style/TimePickerLightStyle</item>
<item name="android:textAllCaps">false</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#f59b00</item>
</style>
<style name="TimePickerLightTheme" parent="Theme.AppCompat.Light.Dialog">
<item name="android:background">#4b4b4b</item>
<item name="android:colorAccent">#2c2f30</item>
<item name="android:textColor">#f59b00</item>
<item name="android:textColorPrimary">#ffffff</item>
</style>
<style name="TimePickerLightStyle" parent="android:Widget.Material.Light.TimePicker">
<item name="android:headerBackground">#2c2f30</item>
<item name="android:numbersTextColor">#ffffff</item>
<item name="android:numbersInnerTextColor">#ffffff</item>
<item name="android:numbersSelectorColor">#f59b00</item>
<item name="android:numbersBackgroundColor">#4b4b4b</item>
<item name="android:background">#1f1f1f</item>
<item name="android:textColorPrimary">#a1a1a1</item>
</style>
Is there a list with keys for all elements that I'm overlooking? Would be great to have a list where it says something like "Key X is for color of view element Y".
Do you want to change the color of SubTitle, InputField and description like following screenshot?
Create the Theme.picker style.
<style name="Theme.picker" parent="Theme.AppCompat.Light.Dialog">
//background color
<item name="android:background">#FFC107</item>
//Title background color
<item name="colorAccent">#FF0000</item>
//text color
<item name="android:textColor">#android:color/white</item>
//edittext color
<item name="android:textColorPrimary">#android:color/holo_green_light</item>
</style>
Them use it in the Timepicker.
<TimePicker
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.picker"/>
If you used xamarin forms.You should add an item in <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:timePickerDialogTheme">#style/Theme.picker</item>
=====update======
Is it possible to set different colors for the text above and below the input field, the "AM"/"PM" text and "cancel"/"ok"?
If you want to set it, just change the color in the <item name="android:textColor">#android:color/red</item> tab. The textcolor of firstview and second view will be changed, it set both of them at the same time. If you want to set the diferent items for differen view, you should make a custom TimePicker
Currently the date picker is look like this.
I want to change the color date color ( currently set to black.)
Datepicker theme.
<style name="myDatePickertheme" parent="Theme.AppCompat.Light.Dialog">
<item name="android:headerBackground">#color/white</item>
<item name="android:textColorPrimary">#color/primary_text</item>
</style>
Solution Tried:
<item name="colorAccent">#color/white</item>
in the custom theme.
Min api=17
App theme
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:background">#color/primary_background</item>
<item name="android:colorPrimaryDark">#color/primary_background</item>
<item name="android:navigationBarColor">#color/primary_background</item>
<item name="android:popupBackground">#color/primary_background</item>
<item name="android:alertDialogTheme">#style/myDialog</item>
<item name="android:datePickerDialogTheme">#style/myDatePickertheme</item>
</style>
ANy hint?
would you try to create a custom datePicker then? you may try the solution of this ?
I know this post is duplicate but previously I didn't get any positive response that why re-posting it.
Currently the date picker is look like this.
I want to change the color date color ( currently set to black.)
Datepicker theme.
<style name="myDatePickertheme" parent="Theme.AppCompat.Light.Dialog">
<item name="android:headerBackground">#color/white</item>
<item name="android:textColorPrimary">#color/primary_text</item>
#color/white
Solution Tried:
#color/white
in the custom theme.
Min api=17
App theme
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:background">#color/primary_background</item>
<item name="android:colorPrimaryDark">#color/primary_background</item>
<item name="android:navigationBarColor">#color/primary_background</item>
<item name="android:popupBackground">#color/primary_background</item>
<item name="android:alertDialogTheme">#style/myDialog</item>
<item name="android:datePickerDialogTheme">#style/myDatePickertheme</item>
</style>
Beside the above setting, I also use all the customisation provided by this link
In the image above (don't worry about the calendar positioning), the whole calendar is the correct theme color except the green of the chosen date. I've tried many things but not been able to change this last part of the theme! I'm using Theme.AppCompat.Light.DarkActionBar and have gotten to the current point by changing the DatePickerDialogTheme's colorAccent. I've also tried changing
dayOfWeekBackground
dayOfWeekTextAppearance
headerMonthTextAppearance
headerDayOfMonthTextAppearance
headerYearTextAppearance
headerSelectedTextColor
yearListItemTextAppearance
yearListSelectorColor
calendarTextColor
calendarSelectedTextColor
And those don't seem to have done it. Here's my XML, thank you in advance!
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorRed</item>
<item name="colorPrimaryDark">#color/colorRed</item>
<item name="colorAccent">#color/colorRed</item>
<item name="android:datePickerDialogTheme">#style/MyDatePickerDialogTheme</item>
</style>
<style name="MyDatePickerDialogTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:colorAccent">#color/colorRed</item>
</style>
To change the colour of the circle of the selected date, use
<item name="android:colorControlActivated">#color/your_colour</item>
use this theme
<style name="MyDatePickerDialogTheme" parent="Theme.AppCompat.Light.Dialog">
<item name="android:colorAccent">#color/colorRed</item>
<item name="android:datePickerStyle">#style/MyDatePickerStyle</item>
<item name="android:colorAccent">#color/primaryDark</item>
</style>
and
<style name="MyDatePickerStyle" parent="#android:style/Widget.Material.Light.DatePicker">
<item name="android:headerBackground">#color/primary</item>
<item name="android:calendarTextColor">#color/primaryDark</item>
<item name="android:dayOfWeekBackground">#color/primaryDark</item>
<item name="android:yearListSelectorColor">#color/accent</item>
<item name="android:datePickerMode">calendar</item>
</style>
For the selected day's colour you do have to use colorAccent, here's what works me:
<style name="PopupDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
<!--selected day's color: define your own-->
<item name="colorAccent">#color/yourColour</item>
</style>
and in your class instantiate like this:
final AlertDialog.Builder datePickerBuilder = new AlertDialog.Builder(ProviderMainActivity.this, R.style.PopupDialogTheme);
// ... do something with your dialog, i.e. .show()
Regarding the other attributes that were mentioned in the question: look up their reference and find out what params they take (in the xml).
For example for setting the year/month/day's colour in the header, you have to define a text appearance (CodeFont) like this:
<DatePicker xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dpPickDate"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:headerBackground="#drawable/calendar_header"
android:headerYearTextAppearance="#style/YourCodeFont"
android:headerMonthTextAppearance="#style/YourCodeFont"
android:headerDayOfMonthTextAppearance="#style/YourCodeFont"/>
note YourCodeFont, which you need to define in your styles.xml:
<style name="PopupCodeFont" parent="#android:style/TextAppearance.Medium">
<item name="android:textColor">#color/black</item>
</style>
You can't, for example do this:
android:headerYearTextAppearance="#color/black"
Also note that some of these attributes, in example headerYearTextAppearance require API 21+, so better handle and test for previous versions.
I am trying to change the different colors auf my datepicker dialog in android. I am using AppCompat. I could already change the background color of the header and the color that marks the currently selected year. I tried a lot to change the color of the 'cancel' and 'ok' button as well as the the color of the bubble that marks the currently selected day.
At the moment it looks like this:
Current date picker style
I have styled my datepicker this way:
<style name="AppTheme" parent="Theme.AppCompat">
<item name="android:datePickerDialogTheme">#style/MyDatePickerDialogTheme</item></style><style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Dialog">
<item name="android:datePickerStyle">#style/MyDatePickerStyle</item>
</style>
<style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Dialog">
<item name="android:datePickerStyle">#style/MyDatePickerStyle</item>
</style>
<style name="MyDatePickerStyle" parent="#android:style/Widget.Material.DatePicker">
<item name="android:headerBackground">#color/green</item>
<item name="android:yearListSelectorColor">#color/green_transparent</item>
</style>
Does anyone have a solution or workaround for my problem?
I have already tried to change the text color and different button attributes but nothing could change the buttons.
By default, it uses the colorAccent property. So, include it in your theme as below.
<style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Dialog">
<item name="android:datePickerStyle">#style/MyDatePickerStyle</item>
<item name="colorAccent">button_color</item>
</style>