I'm attempting to style this MaterialCalendar, but I'm not getting anywhere with it, any help would be appreciated.
My styles.xml looks similar to the below:
<style name="AppTheme" parent="Theme.MaterialComponents">
<item name="materialCalendarTheme">#style/ThemeMaterialCalendar</item>
</style>
<style name="ThemeMaterialCalendar" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="buttonBarPositiveButtonStyle">#style/AlterDialogButtonStyle</item>
<item name="buttonBarNegativeButtonStyle">#style/AlterDialogButtonStyle</item>
<item name="materialButtonStyle">#style/ThemeMaterialCalendarTextButton</item>
<item name="android:colorAccent">#color/accent</item>
</style>
<style name="ThemeMaterialCalendarTextButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog.Flush">
<item name="android:textColor">?attr/colorAccent</item>
</style>
<style name="AlterDialogButtonStyle" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textColor">?attr/colorAccent</item>
</style>
Which renders something like:
The very light blue/cyan is my colorAccent the header is the purple-y colour. Those are just fine. I was able to change them with the above styles.xml.
However I want to also change the dark grey background of the MaterialCalendar to white, and then of course change the text from white to black or grey (so it can be seen), as well as make the arrows for month and year selection. Any selected year or day should be highlighted with the accent color.
Essentially I want something similar to this (please ignore the fact that the below screen shot is of the old DatePickerDialog and not the new MaterialCalendar):
Any help would be greatly appreciated.
PS: I don't want to change any of my primary, secondary or accent colours for the entire app (as it will ruin the rest of the colour scheme)
The best way to customize the colors in the MaterialDatePicker is to override them:
<style name="MaterialCalendarThemeBackground" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="colorSurface">#color/....</item>
<item name="colorOnSurface">#color/....</item>
<item name="colorPrimary">#color/....</item>
<item name="colorOnPrimary">#color/....</item>
</style>
and then use:
MaterialDatePicker.Builder<Long> builder = MaterialDatePicker.Builder.datePicker();
builder.setTheme(R.style.MaterialCalendarThemeBackground);
The background color of the MaterialDatePicker is based on colorSurface attribute.
<style name="MaterialCalendarThemeBackground" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="colorSurface">#color/....</item>
</style>
Instead if you want to change the other colors using a custom style you can do:
Day: it is based on colorOnSurface. You can define:
<style name="MaterialCalendarThemeBackground" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="materialCalendarStyle">#style/CustomMaterialCalendar</item>
</style>
with:
<style name="CustomMaterialCalendar" parent="Widget.MaterialComponents.MaterialCalendar">
<item name="dayStyle">#style/CustomWidget_Day</item>
</style>
<style name="CustomWidget_Day" parent="Widget.MaterialComponents.MaterialCalendar.Day">
<item name="itemTextColor">#color/...</item>
<item name="itemStrokeColor">#color/....</item>
</style>
SelectedDay: it is based on colorPrimary/colorOnPrimary. You can define:
<style name="CustomMaterialCalendar" parent="Widget.MaterialComponents.MaterialCalendar">
<item name="daySelectedStyle">#style/CustomSelected</item>
</style>
with:
<style name= "CustomSelected" parent="Widget.MaterialComponents.MaterialCalendar.Day.Selected">
<item name="itemFillColor">...</item>
<item name="itemTextColor">...</item>
</style>
Expanding on #Gabriele Mariotti answer for those in the future that want to customize the MaterialDatePicker more.
(Side note) : I noticed the MaterialDatePicker on tablets reverts to the default colors, I don't why that is so.
MaterialDatePicker size can be changed from full screen to dialog size through using this line
<item name="android:windowFullscreen">false</item>
Set the theme of MaterialDatePicker:
builder.setTheme(R.style.CustomThemeOverlay_MaterialCalendar_Fullscreen);
I would recommend playing around with the styles and make changes to the colors to see what it actually changes if you are unsure.
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<item name="materialCalendarFullscreenTheme">#styleCustomThemeOverlay_MaterialCalendar_Fullscreen</item>
</style>
<style name="CustomThemeOverlay_MaterialCalendar_Fullscreen" parent="#style/ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="materialCalendarStyle">#style/Custom_MaterialCalendar.Fullscreen</item>
<item name="materialCalendarHeaderTitle">#style/customHeaderTitle</item>
<item name="materialCalendarHeaderSelection">#style/CustomHeaderSelection</item>
<item name="buttonBarPositiveButtonStyle">#style/Buttons</item>
<item name="buttonBarNegativeButtonStyle">#style/Buttons</item>
<item name="android:textColorPrimary">#color/...</item>
<item name="colorPrimary">#color/...</item>
<item name="colorSurface">#color/...</item>
<item name="colorOnSurface">#color/...</item>
<item name="colorOnPrimary">#color/...</item>
</style>
<style name="Custom_MaterialCalendar.Fullscreen" parent="#style/Widget.MaterialComponents.MaterialCalendar">
<item name="android:windowFullscreen">false</item>
<item name="rangeFillColor">#color/...</item>
<item name="dayStyle">#style/CustomWidget_Day</item>
<item name="daySelectedStyle">#style/CustomSelected</item>
</style>
<style name="customHeaderTitle" parent="#style/Widget.MaterialComponents.MaterialCalendar.HeaderTitle">
<item name="android:textSize">24sp</item>
<item name="android:textColor">#color/...</item>
<item name="colorSurface">#color/...</item>
</style>
<style name="CustomHeaderSelection" parent="Widget.MaterialComponents.MaterialCalendar.HeaderSelection">
<item name="android:textSize">18sp</item>
<item name="android:textColor">#color/...</item>
</style>
<style name="CustomWidget_Day" parent="Widget.MaterialComponents.MaterialCalendar.Day">
<item name="android:textSize">18sp</item>
<item name="itemTextColor">#color/...</item>
</style>
<style name= "CustomSelected" parent="Widget.MaterialComponents.MaterialCalendar.Day.Selected">
<item name="itemFillColor">#color/...</item>
<item name="itemStrokeColor">#color/...</item>
</style>
<style name="Buttons" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textColor">#color/...</item>
</style>
I was able to make this using this code:
Related
I'm using Material components to create a DatePicker. From what I understand, colorPrimary is used to determine the color of the section at the top of the dialog, as well as the colors for the text on the buttons, specifically CANCEL and OK.
Going through the documentation, I can't seem to find a way to change just the color of the buttons at the bottom ? Is it possible to do that ?
current code:
<style name="ThemeOverlay.App.DatePicker" parent="#style/ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorOnPrimary">#android:color/white</item>
<item name="shapeAppearanceSmallComponent">#style/ShapeAppearance.App.SmallComponent</item>
<item name="shapeAppearanceMediumComponent">#style/ShapeAppearance.App.MediumComponent
</item>
<item name="materialCalendarHeaderTitle">#style/MyHeaderTitle</item>
<item name="colorOnPrimarySurface">#android:color/white</item>
</style>
<style name="MyHeaderTitle" parent="Widget.MaterialComponents.MaterialCalendar.HeaderTitle">
<item name="android:textColor">#android:color/white</item>
</style>
<style name="ThemeMaterialCalendarTextButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog.Flush">
<item name="android:textColor">#android:color/white</item>
<item name="iconTint">#android:color/white</item>
</style>
<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="android:textSize">24sp</item>
<item name="cornerSize">16dp</item>
</style>
<style name="ShapeAppearance.App.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent">
<item name="android:textSize">30sp</item>
<item name="cornerSize">16dp</item>
</style>
You can use:
builder.setTheme(R.style.MaterialCalendarTheme)
and then define:
<style name="MaterialCalendarTheme" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<!-- Buttons -->
<item name="buttonBarPositiveButtonStyle">#style/TextButton</item>
<item name="buttonBarNegativeButtonStyle">#style/TextButton</item>
</style>
<style name="TextButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="android:textColor">#color/...</item>
<item name="backgroundTint">#color/...</item>
</style>
I am using a custom Dark Theme in my app. Everything is doing okay, except for the Cut Copy Paste dialog that appears as a solid black square.
Surely there is a style that determines that, but I can't find it, or an answer that addresses this directly. Min API is 16.
<style name="DarkTheme" parent="AppTheme.NoActionBar">
<item name="colorPrimary">#color/blackBackground</item>
<item name="colorPrimaryDark">#color/blackBackground</item>
<item name="colorAccent">#color/yellow</item>
<item name="android:textColor">#color/whiteText</item>
<item name="android:background">#color/blackBackground</item>
<item name="buttonStyle">#style/darkButtonStyle</item>
<item name="spinnerStyle">#style/darkSpinnerStyle</item>
</style>
<style name="darkButtonStyle" parent="#android:style/Widget.Button">
<item name="android:layout_width">fill_parent</item>
<item name="android:textColor">#color/whiteText</item>
<item name="android:textSize">16sp</item>
<item name="android:padding">10dp</item>
<item name="android:textStyle">bold</item>
<item name="android:background">#color/darkBackground</item>
<item name="android:gravity">center</item>
<item name="android:textAllCaps">true</item>
</style>
<style name="darkSpinnerStyle" parent="Widget.AppCompat.Spinner">
<item name="android:background">#color/blackBackground</item>
<item name="android:paddingTop">0dp</item>
<item name="android:layout_marginStart">1dp</item>
<item name="android:layout_marginLeft">1dp</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">0dp</item>
</style>
I was having the same issue when regarding to MaterialAlertDialog. I was able to fix it using backgroundTint instead of background in styles. This is how:
Before
<style name="materialAlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="android:background">#color/colorPrimaryDark</item>
<item name="materialAlertDialogTitleTextStyle">#style/TitleTextStyle</item>
<item name="materialAlertDialogBodyTextStyle">#style/BodyTextStyle</item>
<item name="buttonBarPositiveButtonStyle">#style/PositiveButtonStyle</item>
<item name="buttonBarNegativeButtonStyle">#style/NegativeButtonStyle</item>
</style>
This will be enough to repropduce the error that you are saying... So what i did was changing background for backgroundTint...
After
<style name="materialAlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="android:backgroundTint">#color/colorPrimaryDark</item>
<item name="materialAlertDialogTitleTextStyle">#style/TitleTextStyle</item>
<item name="materialAlertDialogBodyTextStyle">#style/BodyTextStyle</item>
<item name="buttonBarPositiveButtonStyle">#style/PositiveButtonStyle</item>
<item name="buttonBarNegativeButtonStyle">#style/NegativeButtonStyle</item>
</style>
It seems like when you set a background and the dialog is created, the toolbar of copy/paste menu was changing his background in some weird way that i cant explain.
So this is not the exact answer for your problem but it may help you.
Note: Try removing background attr of your style. I have a dark theme and there is no need to use it. Just simple use <style name="AppTheme" parent="Theme.MaterialComponents.DayNight"> instead of <style name="DarkTheme" parent="AppTheme.NoActionBar">.
See attached
I am using a searchbar with the theme below (I know very little about Android themes, yet)
How do I make the text typed, in this case, "Hi Mom" white?
<style name="_Credential" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:editTextBackground">#drawable/credential_edit_text_holo_light</item>
<item name="android:textColorHighlight">#99005984</item>
<item name="android:textSelectHandleLeft">#drawable/credential_text_select_handle_left</item>
<item name="android:textSelectHandleRight">#drawable/credential_text_select_handle_right</item>
<item name="android:textSelectHandle">#drawable/credential_text_select_handle_middle</item>
<item name="android:autoCompleteTextViewStyle">#style/AutoCompleteTextViewCredential</item>
<item name="android:listChoiceIndicatorMultiple">#drawable/credential_btn_check_holo_light</item>
<item name="android:listChoiceIndicatorSingle">#drawable/credential_btn_radio_holo_light</item>
<item name="android:buttonStyle">#style/ButtonCredential</item>
<item name="android:imageButtonStyle">#style/ImageButtonCredential</item>
<item name="android:dropDownSpinnerStyle">#style/SpinnerCredential</item>
<item name="android:progressBarStyleHorizontal">#style/ProgressBarCredential</item>
<item name="android:seekBarStyle">#style/SeekBarCredential</item>
<item name="android:ratingBarStyle">#style/RatingBarCredential</item>
<item name="android:ratingBarStyleIndicator">#style/RatingBarBigCredential</item>
<item name="android:ratingBarStyleSmall">#style/RatingBarSmallCredential</item>
<item name="android:buttonStyleToggle">#style/ToggleCredential</item>
<item name="android:listChoiceBackgroundIndicator">#drawable/credential_list_selector_holo_light</item>
<item name="android:activatedBackgroundIndicator">#drawable/credential_activated_background_holo_light</item>
<item name="android:fastScrollThumbDrawable">#drawable/credential_fastscroll_thumb_holo</item>
</style>
<style name="_Credential" parent="android:Theme.Holo.Light.DarkActionBar">
...
<item name="android:editTextColor">#ffffff</item> <!--Allow to change the editText color-->
...
</style>
So you can't actually change the TextColor of something like a search box with android:textColor. Instead, you need to use the whole family of the textColor... attributes.
Create a custom style that has your main style as it's parent, and then change all three kinds of colors to be what you want. So, something like this:
<style name="master" paret="#android:Theme.Holo.Light.DarkActionBar">
<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:textColorSecondary">#FFFFFF</item>
<item name="android:textColorTertiary">#FFFFFF</item>
</style>
Read more about this here.
Does anyone know the way in which i am meant to code the change i want to make to the color of the ActionBar? I have tried using android:textColor , and android:color , as well as various other things. It seems like a quite a hassle for me. Although there is most probably a simple solution for this. Does anyone have any ideas?
Note: i am trying to make the font color white - from what i can tell, Android does this from the "actionbar.solid.pp" style.
<style name="Theme.Pp" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarItemBackground">#drawable/selectable_background_pp</item>
<item name="android:popupMenuStyle">#style/PopupMenu.Pp</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Pp</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle.Pp</item>
<item name="android:actionDropDownStyle">#style/DropDownNav.Pp</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid.Pp</item>
<item name="android:actionModeBackground">#drawable/cab_background_top_pp</item>
<item name="android:actionModeSplitBackground">#drawable/cab_background_bottom_pp</item>
<item name="android:actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Pp</item>
</style>
<style name="ActionBar.Solid.Pp" parent="#android:style/Widget.Holo.Light.ActionBar.Solid">
<item name="android:background">#111</item>
<item name="android:color">#FFF</item>
<item name="android:textStyle">bold</item>
<item name="android:progressBarStyle">#style/ProgressBar.Pp</item>
</style>
<style name="ActionBar.Transparent.Pp" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/ab_transparent_pp</item>
<item name="android:progressBarStyle">#style/ProgressBar.Pp</item>
</style>
<style name="PopupMenu.Pp" parent="#android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_pp</item>
</style>
<style name="DropDownListView.Pp" parent="#android:style/Widget.Holo.Light.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_pp</item>
</style>
<style name="ActionBarTabStyle.Pp" parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">#ffffff</item>
</style>
<style name="DropDownNav.Pp" parent="#android:style/Widget.Holo.Light.Spinner">
<item name="android:background">#drawable/spinner_background_ab_pp</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_pp</item>
<item name="android:dropDownSelector">#drawable/selectable_background_pp</item>
</style>
<style name="ProgressBar.Pp" parent="#android:style/Widget.Holo.Light.ProgressBar.Horizontal">
<item name="android:progressDrawable">#drawable/progress_horizontal_pp</item>
</style>
<style name="ActionButton.CloseMode.Pp" parent="#android:style/Widget.Holo.Light.ActionButton.CloseMode">
<item name="android:background">#drawable/btn_cab_done_pp</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Pp.Widget" parent="#android:style/Theme.Holo">
<item name="android:popupMenuStyle">#style/PopupMenu.Pp</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Pp</item>
</style>
Changing the action bar's text color is shown on the developer guide Styling the Action Bar
I think you can use this free tool to customize the style:
http://jgilfelt.github.io/android-actionbarstylegenerator/#name=example&compat=holo&theme=light&actionbarstyle=solid&texture=0&hairline=0&neutralPressed=1&backColor=E4E4E4%2C100&secondaryColor=D6D6D6%2C100&tabColor=33B5E5%2C100&tertiaryColor=F2F2F2%2C100&accentColor=33B5E5%2C100&cabBackColor=FFFFFF%2C100&cabHighlightColor=33B5E5%2C100
In the application I have, I would like to have the actionbar drop down's font to be white. Till now I have the following style:
<style name="Theme.MyApplications" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="actionBarStyle">#style/ActionBar.Solid</item>
<item name="android:textSize">18sp</item>
</style>
<style name="ActionBar.Title" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
<item name="android:textColor">#android:color/white</item>
</style>
<style name="ActionBar.SubTitle" parent="TextAppearance.Sherlock.Widget.ActionBar.Subtitle">
<item name="android:textColor">#android:color/white</item>
</style>
<style name="ActionBar.Solid" parent="#style/Widget.Sherlock.Light.ActionBar.Solid">
<item name="titleTextStyle">#style/ActionBar.Title</item>
<item name="subtitleTextStyle">#style/ActionBar.SubTitle</item>
</style>
This style gives me a black colored font in android 3.0 and higher. Can someone please help me configure the font to be white ?
The funny thing about this is that the action overflow popup's font appears in white.
for now I just used the simple
<style name="Theme.MyApplications" parent="#style/Theme.Sherlock">
<item name="android:textSize">18sp</item>
<item name="android:textColor">#FFFFFF</item>
</style>
Its simple but it got the job done. And what got the job done was the change in the style's parent.
You have apply the style to the native ActionBar as well:
<style name="Theme.MyApplications" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="actionBarStyle">#style/ActionBar.Solid</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid</item>
<item name="android:textSize">18sp</item>
</style>
<style name="ActionBar.Title" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
<item name="android:textColor">#android:color/white</item>
</style>
<style name="ActionBar.SubTitle" parent="TextAppearance.Sherlock.Widget.ActionBar.Subtitle">
<item name="android:textColor">#android:color/white</item>
</style>
<style name="ActionBar.Solid" parent="#style/Widget.Sherlock.Light.ActionBar.Solid">
<item name="titleTextStyle">#style/ActionBar.Title</item>
<item name="subtitleTextStyle">#style/ActionBar.SubTitle</item>
<item name="android:titleTextStyle">#style/ActionBar.Title</item>
<item name="android:subtitleTextStyle">#style/ActionBar.SubTitle</item>
</style>