I've been trying to stylize a DatePicker -- NOT DatePickerDialog, if that matters -- without any success.
The problem I'm facing is this:
As you can see, the selected day background is black. I've tried to apply the following style:
<style name="DatePickerStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorPrimary"> #color/Red </item>
<item name="colorPrimaryDark"> #color/Blue </item>
<item name="colorAccent"> #color/Green </item>
</style>
But I would only get errors like:
No resource found that matches the given name: attr 'colorPrimary'
and
Error retrieving parent for item:
No resource found that matches the given name 'Theme.AppCompat.Light.Dialog'.
I've tried to do it via code, but so far the only thing I've managed to stylize was the header background, by doing something like this:
( ( datePicker.GetChildAt( 0 ) as LinearLayout ).GetChildAt( 0 ) as LinearLayout )
.SetBackgroundResource( Utils.AppColorResourceId );
or, by direct id
datePicker.FindViewById( 16909081 ).SetBackgroundResource( Utils.AppColorResourceId );
Although I'm avoiding the later mostly because I'm afraid the id changes with the device/OS version.
So my question is: How can I change the colour used to mark the selected day?
Is there a way to do it via code? If so, how is it? ( I'd like to change the colour at runtime due to some actions the user can do to change the colour )
EDIT
Styles.xml
...
<style name="MyDatePickerDialogTheme" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#color/Blue</item>
<item name="android:datePickerStyle">#style/DatePickerStyle</item>
<item name="android:colorAccent">#color/Red</item>
</style>
<style name="DatePickerStyle" parent="#android:style/Widget.Material.Light.DatePicker">
<item name="android:headerBackground">#color/Red</item>
<item name="android:calendarTextColor">#color/Blue</item>
<item name="android:dayOfWeekBackground">#color/Green</item>
<item name="android:yearListSelectorColor">#color/Base</item>
</style>
...
Use below code for changing your selected date color
<style name="MyDatePickerDialogTheme" parent="Theme.AppCompat.Light.Dialog">
<!-- this is new -->
<item name="colorAccent">#color/accent</item>
<item name="android:datePickerStyle">#style/MyDatePickerStyle</item>
<item name="android:colorAccent">#color/primDark</item>
</style>
<style name="MyDatePickerStyle" parent="#android:style/Widget.Material.Light.DatePicker">
<item name="android:headerBackground">#color/prim</item>
<item name="android:calendarTextColor">#color/primDark</item>
<item name="android:dayOfWeekBackground">#color/primDark</item>
<item name="android:yearListSelectorColor">#color/accent</item>
<item name="android:datePickerMode">calendar</item>
<item name="android:minDate">01/01/2000</item>
</style>
Override datePickerDialogTheme inside your app's base theme:
<style name="AppBaseTheme" parent="android:Theme.Material.Light">
....
<item
name="android:datePickerDialogTheme">#style/MyDatePickerDialogTheme</item>
</style>
here is your MyDatePickerDialogTheme
<style name="MyDatePickerDialogTheme"
parent="android:Theme.Material.Light.Dialog">
<item name="android:datePickerStyle">#style/MyDatePickerStyle</item>
</style>
We have overridden datePickerStyle with the style MyDatePickerStyle. The choice of parent will once again depend on what your app's base theme is: either Widget.Material.DatePicker or Widget.Material.Light.DatePicker. Define it as per your requirements:
<style name="MyDatePickerStyle" parent="#android:style/Widget.Material.Light.DatePicker">
<item name="android:headerBackground">#color/chosen_header_bg_color</item>
with this you can also have some more customization i listed bellow
dayOfWeekBackground
dayOfWeekTextAppearance
headerMonthTextAppearance
headerDayOfMonthTextAppearance
headerYearTextAppearance
headerSelectedTextColor
yearListItemTextAppearance
yearListSelectorColor
If you don't want this much control (customization), you don't need to override datePickerStyle. colorAccent controls most of the DatePicker's colors. So, overriding just colorAccent inside MyDatePickerDialogTheme should work:
<style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
<item name="android:colorAccent">#color/date_picker_accent</item>
<!-- No need to override 'datePickerStyle' -->
<!-- <item name="android:datePickerStyle">#style/MyDatePickerStyle</item> -->
Related
I searched google but can not find solution.I need to define different styles for Tablayout for themes.I figure it out how to include my Toolbar style but can not make it work because of Base.Widget.Design.TabLayout.When I define it as a name it works but I can only use it for one style.When I define it as parent and include it to my theme with android:tabWidgetStyle it does not work
As a parent(which does not work)
<style name="tabayout" parent="Base.Widget.Design.TabLayout">
<item name="tabSelectedTextColor">#color/white</item>
<item name="tabIndicatorColor">#color/deep_orange_300_colorAccent</item>
<item name="tabBackground">#color/deep_orange_300_colorAccent</item>
</style>
Second(which works but I can only use it once, but I need to define 14 style)
<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
<item name="tabSelectedTextColor">#color/white</item>
<item name="tabIndicatorColor">#color/red_200_colorAccent</item>
<item name="tabBackground">#color/red_200_colorAccent</item>
<item name="tabTextColor">#color/red_200_colorPrimaryDark</item>
</style>
Edit
I want to style TabLayout for specific custom theme.I want to make Toolbar background textColor etc for chosen colour by user. So I used Base.Widget.Design.TabLayout as a name to style TabLayout and include it with android:tabWidgetStyle it worked.But when I use it as parent it does not work.Here My Theme
This works.But when I define Base.Widget.Design.TabLayout as a parent it does not work.
<style name="AppTheme_red_200" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/red_200_colorPrimary</item>
<item name="colorPrimaryDark">#color/red_200_colorPrimaryDark</item>
<item name="colorAccent">#color/red_200_colorAccent</item>
<item name="android:tabWidgetStyle">#style/Base.Widget.Design.TabLayout</item>
<item name="android:textColor">#color/red_400_colorPrimaryDark</item>
</style>
<style name="Base.Widget.Design.TabLayout" parent="">
<item name="tabSelectedTextColor">#color/white</item>
<item name="tabIndicatorColor">#color/red_200_colorAccent</item>
<item name="tabBackground">#color/red_200_colorAccent</item>
<item name="tabTextColor">#color/red_200_colorPrimaryDark</item>
</style>
I'm trying to learn how to Style my application using the styles.xml file and I need some clarification on a few things to understand it.
In an Item, what is the difference between setting android:actionbarstyle and just actionbarstyle ? I know that in this particular case, I have to define both, but why? And what about all other cases, for example android:colorPrimary and just colorPrimary? In that case I get an error saying that android:colorPrimary can only be used with min API level 21. So does someone have a good explanation on what the android: prefix does and how it affects my app?
Is there a reference to the different parent styles, such as parent="#style/Widget.AppCompat.Light.ActionBar and what they mean? How do I find a list of the different parent styles available for a specific item and what I can "override" in them? Right now, it's mostly guessing on my part....
Just as a reference, I'm posting my current styles.xml file.
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="MyTheme"/>
<style name="MyTheme" parent="Theme.AppCompat.Light">
<item name="actionBarTheme">#style/MyTheme.ActionBarTheme</item>
<item name="android:actionBarStyle">#style/MyTheme.ActionBarStyle</item>
<item name="actionBarStyle">#style/MyTheme.ActionBarStyle</item>
<item name="colorPrimary">#color/my_green</item>
<item name="colorPrimaryDark">#color/my_forest</item>
<item name="colorAccent">#color/my_soil</item>
<item name="drawerArrowStyle">#style/MyTheme.DrawerArrowStyle</item>
<item name="android:actionOverflowButtonStyle">#style/MyTheme.OverFlow</item>
<item name="android:actionMenuTextColor">#color/white</item>
<item name="homeAsUpIndicator">#drawable/abc_ic_ab_back_mtrl_am_alpha</item>
<item name="android:homeAsUpIndicator">#drawable/abc_ic_ab_back_mtrl_am_alpha</item>
<item name="colorControlNormal">#color/my_green</item>
<item name="colorControlActivated">#color/my_forest</item>
<item name="colorControlHighlight">#color/my_deep_green</item>
</style>
<style name="MyTheme.ActionBarTheme" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<!-- This sets the BACK arrow to white. Otherwise it's black. Must be placed in the theme-->
<item name="colorControlNormal">#color/white</item>
</style>
<style name="MyTheme.ActionBarStyle" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background">#color/my_green</item>
<item name="background">#color/my_green</item>
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="colorControlNormal">#color/white</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>
<style name="MyTheme.DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#color/white</item>
</style>
<style name="MyTheme.OverFlow" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="android:tint">#color/white</item>
</style>
</resources>
I will try my best to explain and will concentrate on:
<item name="colorPrimary">#color/my_green</item>
<item name="colorPrimaryDark">#color/my_forest</item>
<item name="colorAccent">#color/my_soil</item>
These attributes are regularly available with API level 21. In general you use attributes with the "android" prefix.
If you define all your styles in the styles.xml of your values folder and if you are using app compat, then you need both.
Without the prefix the attributes applies for pre L devices. i.e. App Compat. To get it work for L devices and higher you need to specifiy the attribute again with the "android" prefix.
And to get the other Android styles you can step into them, like you step into classes and the implementations. For Mac I press the command button and then click with the mouse on the specific style.
I'm trying to change the style for the Spinner's top divider, but without success.
I can only get that to work:
http://s18.postimg.org/qbg7920mh/spinner.png
Is is possible? What item should I modify?
<style name="AppTheme" parent="AppBaseTheme">
<!--item name="android:spinnerItemStyle">#style/SpinnerItem</item-->
<!--item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item-->
<!--item name="android:dropDownItemStyle">#style/TestSpinnerItemStyle</item-->
<item name="android:dropDownListViewStyle">#style/TestSpinnerStyle</item>
</style>
<style name="TestSpinnerItemStyle" parent="android:style/Widget.ListView.DropDown">
<item name="android:divider">#00b54a</item>
<item name="android:dividerHeight">5dp</item>
</style>
By looking at your code, there must be an obvious error!
Rename TestSpinnerItemStyle to TestSpinnerStyle in second part like:
<style name="TestSpinnerStyle" parent="android:style/Widget.ListView.DropDown">
...
</style>
I tried change color of my actionBar divider , but nothing work. I' using android support library v7 for support old devices and custom style, and i also change all action bar drawable, but nothing happend!
<resources>
<style name="MyTheme" parent="Theme.AppCompat">
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent = "Widget.AppCompat.ActionBar">
<item name="background">#drawable/my_action_bar</item>
</style>
</resources>
And my ide show me strange error in layout , why did i get this error? it's not color value
java.lang.NumberFormatException: Color value '#drawable/abs__ab_transparent_dark_holo' must start with #
Solution: Need to add android namespace if use for api level >= 14 .May be it will be helpful to someone.
It is because the "divider" is an image. It's hardcoded in the Holo theme assets.
Look at platforms/android-19/data/res/drawable-xxhdpi/ab_transparent_dark_holo.9.png
The style is declared here for holo dark.
<style name="Widget.Holo.ActionBar" parent="Widget.ActionBar">
...
<item name="android:background">#android:drawable/ab_transparent_dark_holo</item>
...
</style>
It's a background. You will need to change the color in the image and replace the background of your bar.
It also needs different sizes for different resolutions.
Maybe you should set color directly, change your theme as
<item name="android:divider">#color/dividercolor</item>
Then you should add color dividercolor in you /value/color file,like
<item name="dividercolor"> #0099CC </item>
I hope this will be helpful to you
<style name="CustomTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyTheme.ActionBarStyle</item>
<item name="android:actionBarDivider">#drawable/action_vertical_doted</item>
<item name="android:actionButtonStyle">#style/MyTheme.ActionBar.ActionButton</item>
<item name="android:actionMenuTextColor">#ffffff</item>
<!-- <item name="android:actionMenuTextAppearance">#style/MyTheme.Menu.FontStyle</item> -->
<!-- <item name="android:actionBarSize">50dp</item> -->
</style>
<style name="MyTheme.ActionBarStyle" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="android:background">#drawable/actionbar_bg_shap</item>
<item name="android:displayOptions">none</item>
<item name="android:backgroundSplit">#drawable/actionbar_bg_shap</item>
</style>
<style name="MyTheme.ActionBar.ActionButton" parent="#android:style/Widget.Holo.Light.ActionButton">
<item name="android:background">#drawable/main_button_inactive_tr</item>
</style>
I'm want to change the up icon with applying the following style to my activity, but it doesn't work and but I still get the default black '<' icon.
Can anyone find out what is missing here?
<style name="AppTheme.ActionBar" parent="#style/Theme.Sherlock.Light">
<item name="actionBarStyle">#style/actionBarStyle</item>
<item name="android:actionBarStyle">#style/actionBarStyle</item>
</style>
<style name="actionBarStyle" parent="#style/Widget.Sherlock.Light.ActionBar.Solid">
<item name="android:background">#drawable/header_bar</item>
<item name="background">#drawable/header_bar</item>
<item name="android:homeAsUpIndicator">#drawable/up_indicator</item>
<item name="homeAsUpIndicator">#drawable/up_indicator</item>
<item name="android:displayOptions">homeAsUp|showHome</item>
<item name="displayOptions">homeAsUp|showHome</item>
</style>
If I remember correctly, I worked around this issue by moving you should move the android:homeAsUpIndicator and homeAsUpIndicator elements into the main theme declaration. In other words, try:
<style name="AppTheme.ActionBar" parent="#style/Theme.Sherlock.Light">
<item name="actionBarStyle">#style/actionBarStyle</item>
<item name="android:actionBarStyle">#style/actionBarStyle</item>
<item name="android:homeAsUpIndicator">#drawable/up_indicator</item>
<item name="homeAsUpIndicator">#drawable/up_indicator</item>
</style>
<style name="actionBarStyle" parent="#style/Widget.Sherlock.Light.ActionBar.Solid">
<item name="android:background">#drawable/header_bar</item>
<item name="background">#drawable/header_bar</item>
<item name="android:displayOptions">homeAsUp|showHome</item>
<item name="displayOptions">homeAsUp|showHome</item>
</style>
Not sure whether I also had to move up the displayOptions, but you may want to give that a go too in case above doesn't work right away.
By the way, I find naming a style AppTheme.ActionBar and then inheriting from Theme.Sherlock.Light rather confusing. If it were an ActionBar specific style, I would've expected something like Widget.Holo.Light.ActionBar (or any of the other widget styles) as the parent. If it's your main theme, I'd name it accordingly. Up to you of course.
Edit: Updated answer after Jake's comment.