vikramkakkar / SublimePicker

A material-styled android view that provisions picking of a date, time & recurrence option, all from a single user-interface.
Apache License 2.0
2.31k stars 407 forks source link

Using a style causes crash #38

Open daerimin opened 8 years ago

daerimin commented 8 years ago

Hi,

Love this library, but having some trouble, and need a bit of help. No matter what I do, I cannot get the colors to change. I have tried to follow the other thread here about styles and colors, but it makes very little sense to me. Whenever I define a style for the picker under styles.xml, my app crashes with:

Binary XML file line #15: Error inflating class com.appeaser.sublimepickerlibrary.SublimePicker

The line that causes this is:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    [.... other stuff.....]
    <item name="sublimePickerStyle">@style/GKDatePicker</item>
</style>

and the style definition is:

    <style name="GKDatePicker" parent="SublimeDatePickerStyle">
        <item name="android:headerBackground">@color/colorPrimary</item>
    </style>

No matter what I put, the result is always the same. Just this one tag in the app theme definition causes an immediate crash when I called .show() on the DialogFragment. When I remove this, it runs, but with the teal color.

I'd be most grateful if you could give me some guidance on this.

Thanks!

vikramkakkar commented 8 years ago

Parent for GKDatePicker has to be either SublimePickerStyleLight or SublimePickerStyleDark. These are defined in the library's res/values/themes.xml. These themes define the top-level characteristics for SublimePicker.

How can we change the header background?

One of the attributes that SublimePickerStyleLight defines is spDatePickerStyle. This attribute controls the appearance and behavior of SublimeDatePicker. Under the definition of SublimePickerStyleLight, you'll see that spDatePickerStyle is set to style SublimeDatePickerStyle. All of the customisation options available for SublimeDatePicker have been defined under this style. Link: res/values/styles.xml. For reference, here's @style/SublimeDatePickerStyle:

<style name="SublimeDatePickerStyle">
    <item name="spFirstDayOfWeek">0</item>
    <item name="spHeaderBackground">?spHeaderBackgroundPtr</item>
    <item name="spMinDate">01/01/1900</item>
    <item name="spMaxDate">12/31/2100</item>
    <item name="spHeaderTextColor">?attr/spPrimaryTextSecondaryWhenActivatedMaterialInversePtr</item>
</style>

To change the header background, you'll need to override spHeaderBackground.

Start with defining top-level characteristics:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    [.... other stuff.....]
    <item name="sublimePickerStyle">@style/GKSublimePicker</item>
</style>

<style name="GKSublimePicker" parent="SublimePickerStyleLight">
    <item name="spDatePickerStyle">@style/GKDatePicker</item>
</style>

<style name="GKDatePicker" parent="SublimeDatePickerStyle">
    <item name="spHeaderBackground">@color/colorPrimary</item>
</style>

That should do it.

Also note that overriding android:headerBackground is of no consequence. SublimeDatePicker is only interested in spHeaderbackground. The naming is done this way to avoid attr name collisions.

daerimin commented 8 years ago

Thank you so much! This solved my problem. I really appreciate your time in answering this so thoroughly. :)

daerimin commented 8 years ago

Apologies but I need to ask one more thing; I cannot figure out how to change the "Ok" and "Cancel" colors. I know this probably very basic but my understanding of themes and styles is less than it should be. Thank you again for your time!

vikramkakkar commented 8 years ago

Apologies but I need to ask one more thing; I cannot figure out how to change the "Ok" and "Cancel" colors.

We'll have to go further down the style hierarchy to change OK & CANCEL text colors. Let's see:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    [.... other stuff.....]
    <item name="sublimePickerStyle">@style/GKSublimePicker</item>
</style>

<style name="GKSublimePicker" parent="SublimePickerStyleLight">
    <item name="spButtonLayoutStyle">@style/GKButtonLayoutStyle</item>
</style>

<style name="GKButtonLayoutStyle" parent="ButtonLayoutStyle">
    <item name="spButtonModeOkCancelButtonStyle">@style/GKButtonBarButtonStyle</item>
</style>

<style name="GKButtonBarButtonStyle" parent="SButtonBarButtonStyle" >
    <item name="android:textColor">YOUR_NEW_COLOR</item>
</style>

That looks about right. Let me know if it works.

I know this probably very basic but my understanding of themes and styles is less than it should be.

No, its quite a challenge. See my answer here: How to explore styling in android :-)

daerimin commented 8 years ago

I actually JUST figured this out a few minutes ago, and was on my way here to post it when your response came in. Again, thank you so much for taking the time. Here's what solved it for me:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      [.....]
      <item name="colorButtonNormal">@color/my_color</item>
</style>
vikramkakkar commented 8 years ago

I apologize - I thought/assumed that you were asking about the text color.

One issue with your solution will be that all Buttons in your app will have the my_color background. Is this really what you want?

daerimin commented 8 years ago

You're correct, that's what I was asking about. I see your point about that - it actually does work for me technically, but your solution is much more specific and correct. Thanks for pointing that out.