In androidx you can easily toggle between day/night mode. E.g.:
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- attributes -->
</style>
And when toggling theme:
AppCompatDelegate.setDefaultNightMode(nightMode);
getDelegate().applyDayNight();
Now, let's say I want to add a minor customization to either the day or the night theme:
<style name="LimeTheme" parent="AppTheme">
<item name="colorPrimary">#color/lime1</item>
<item name="colorPrimaryDark">#color/lime2</item>
<item name="colorControlHighlight">#color/lime3</item>
</style>
How do I accomplish that?
May be you need a folder —— [values-night].
In your theme.xml(or style.xml), you can set the day theme like :
<style name="Theme.MyTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar" >
<item name="minor customization">#style/ThemeOverlay.MyTheme.DayCustom</item>
</style>
In your theme-night.xml(or style-night.xml):
<style name="Theme.MyTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar" >
<item name="minor customization">#style/ThemeOverlay.MyTheme.NightCustom</item>
</style>
And in style,you shoule init these:
<style name="ThemeOverlay.MyTheme.NightCustom" parent="">
<item name="colorPrimary">#color/nightLime1</item>
<item name="colorPrimaryDark">#color/nightLime2</item>
<item name="colorControlHighlight">#color/nightLime3</item>
</style>
<style name="ThemeOverlay.MyTheme.DayCustom" parent="">
<item name="colorPrimary">#color/dayLime1</item>
<item name="colorPrimaryDark">#color/dayLime2</item>
<item name="colorControlHighlight">#color/dayLime3</item>
</style>
The key is in ThemeOverlay, the parent of ThemeOverlay.MyTheme.DayCustom or ThemeOverlay.MyTheme.NightCustom,is "",because the system will automatic recognition it is ThemeOverlay, and just change the style you set,like colorPrimary,colorPrimaryDark...
Related
I am using a custom theme for dialogs in my app.
The custom theme applies to the alert dialogs just fine.
But the theme does not apply on the preference dialogs like ListPreference, CheckboxPreference etc.
Currently i am applying the dialog theme using the materialAlertDialogTheme attribute like this:
Main app theme:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:navigationBarColor">?attr/colorPrimary</item>
<item name="android:windowTranslucentStatus">true</item>
<!-- Material Dialog theme -->
<item name="materialAlertDialogTheme">#style/ThemeOverlay.App.MaterialAlertDialog</item>
</style>
MaterialDialog styles:
<!-- Styles for Material Dialogs -->
<style name="ThemeOverlay.App.MaterialAlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="colorSurface">#android:color/white</item>
<item name="alertDialogStyle">#style/MaterialAlertDialog.App</item>
<item name="materialAlertDialogTitleTextStyle">#style/MaterialAlertDialog.App.Title.Text</item>
<item name="buttonBarPositiveButtonStyle">#style/Widget.App.PositiveButton</item>
</style>
<style name="MaterialAlertDialog.App" parent="MaterialAlertDialog.MaterialComponents">
<item name="shapeAppearance">#style/ShapeAppearance.App.MediumComponent</item>
</style>
<style name="MaterialAlertDialog.App.Title.Text" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
<item name="android:textStyle">bold</item>
</style>
<style name="Widget.App.PositiveButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button</item>
<item name="shapeAppearance">#style/ShapeAppearance.App.SmallComponent</item>
<item name="android:textAllCaps">false</item>
</style>
<style name="ThemeOverlay.App.Button" parent="">
<item name="colorPrimary">#android:color/black</item>
</style>
<style name="ShapeAppearance.App.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">8dp</item>
</style>
<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">4dp</item>
</style>
Here is a dialog perfectly getting themed:
And here is a preference dialog which is not getting themed (notice the corners):
I have also tried setting alertDialog attribute in the main theme, but its not working.
Any suggestions?
What I needed to resolve this issue was to add
<item name="alertDialogTheme">#style/AppTheme.AlertDialogTheme</item>
to my base style and
<style name="AppTheme.AlertDialogTheme" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="dialogCornerRadius">20dp</item>
</style>
as a style. Sad that this made my whole AlertDialog.Builder to MaterialAlertDialogBuilder migration somehow pointless (at least in the cases cornerFamily is rounded), hopefully we will see a better integration between preferences and material theme in future.
reference: https://www.reddit.com/r/androiddev/comments/dg8jfo/styling_androidx_preference_dialogs_using/
I have two themes, one has ActionBar and one without. It seems redundant to do duplicate the styles, is there any way to simplify it?
Thanks
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary_color</item>
<item name="android:windowBackground">#color/bg_color</item>
<item name="colorAccent">#color/accent_color</item>
<item name="colorPrimaryDark">#color/darker_color</item>
<!-- Button style -->
<item name="android:buttonStyle">#style/ButtonStyle</item>
<item name="buttonStyle">#style/ButtonStyle</item>
</style>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/primary_color</item>
<item name="android:windowBackground">#color/bg_color</item>
<item name="colorAccent">#color/accent_color</item>
<item name="colorPrimaryDark">#color/darker_color</item>
<!-- Button style -->
<item name="android:buttonStyle">#style/ButtonStyle</item>
<item name="buttonStyle">#style/ButtonStyle</item>
</style>
<style name="ButtonStyle" parent="Widget.AppCompat.Button">
<item name="android:background">#color/primary_color</item>
</style>
Unfortunately, due to the way that Style/Theme inheritance works, there is no way around this. You could read more about that here:
Android Styles heritage
One option, however, would be to copy the contents of the NoActionBar theme. It turns out that it only contains 2 lines:
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
So your code would look like this
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/primary_color</item>
<item name="android:windowBackground">#color/bg_color</item>
<item name="colorAccent">#color/accent_color</item>
<item name="colorPrimaryDark">#color/darker_color</item>
<!-- Button style -->
<item name="android:buttonStyle">#style/ButtonStyle</item>
<item name="buttonStyle">#style/ButtonStyle</item>
</style>
<!-- NoActionBar theme -->
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Now you are inheriting the AppTheme attributes as well as getting the NoActionBar behavior. Obviously this is not foolproof if the attributes of NoActionBar change in the future, but it might be a good option for someone with many attributes in their base AppTheme.
I´m Using com.android.support:appcompat-v7:22.1.1
This attribute android:buttonStyle is not setting that style for every button, I need to set android:theme="#style/AppTheme.Button" manually on each button.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/AppTheme.Button</item>
</style>
What do I need to do to set a general style for it?
Use buttonStyle insteadof android:buttonStyle in your theme
Similar to #danielgomezrico answer but without having two style files:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<!-- android:buttonStyle for v21+ and buttonStyle for the rest -->
<item name="buttonStyle">#style/MyCustomButton</item>
<item name="android:buttonStyle">#style/MyCustomButton</item>
<item name="colorButtonNormal">#color/my_color_accent</item>
</style>
<style name="MyCustomButton" parent="Base.Widget.AppCompat.Button">
<item name="android:textColor">#ffffff</item>
</style>
I ended up setting background color with colorButtonNormal attribute and other style attributes with buttonStyle.
values/style.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/my_color_primary</item>
<item name="colorPrimaryDark">#color/my_color_primary_dark</item>
<item name="colorAccent">#color/my_color_accent</item>
</style>
<style name="AppTheme.Base">
<item name="colorButtonNormal">#color/my_color_accent</item>
<item name="buttonStyle">#style/Button</item>
</style>
<style name="Button" parent="Base.Widget.AppCompat.Button">
<item name="android:textColor">#color/my_color_white</item>
</style>
values-v21/style.xml
<style name="AppTheme.Base">
<item name="android:colorButtonNormal">#color/my_color_accent</item>
<item name="android:buttonStyle">#style/Button</item>
</style>
And then all the buttons have the background/text color I wanted without setting style on each one.
I want to add a custom style that is for example purple in one theme and red in one other theme.
<style name="subtitle_layout" parent="#android:style/Theme.Holo.Light">
<item name="android:background">#color/purple</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">40sp</item>
</style>
<style name="subtitle_layout2" parent="#android:style/Theme.Holo.Light">
<item name="android:background">#color/black</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">80sp</item>
</style>
<style name="Theme1" parent="android:Theme.Holo.Light">
<item name="android:textColor">#color/black</item>
<item name="#style/subtitle_layout">#style/subtitle_layout</item>
</style>
<style name="Theme2" parent="android:Theme.Holo.Light">
<item name="android:textColor">#color/white</item>
<item name="#style/subtitle_layout">#style/subtitle_layout2</item>
</style>
The change of theme works because i see the change of text color, but instead of android:textColor i would like to put a style instead. But it doesn't work.
I guess you are trying to inherit existing styles to your theme, am I right? You can just set the style as your parent theme:
<style name="Theme1" parent="#style/subtitle_layout">
<item name="android:textColor">#color/black</item>
</style>
How can I make the icons of the actionbar using ActionBarSherlock closer or further away from each other? Something like android:layout_marginLeftor android:paddingRight?
If I just add the icons on the actionbar they are further away compare to the screenshot of Soundhound below:
my themes.xml:
<style name="Theme.AstraTheme_Purple" parent="#style/Theme.Sherlock">
<item name="actionBarStyle">#style/Widget.AstraTheme_Purple.ActionBar</item>
<item name="android:actionBarStyle">#style/Widget.AstraTheme_Purple.ActionBar</item>
<item name="actionButtonStyle">#style/Widget.AstraTheme_Purple.ActionButton</item>
<item name="android:actionButtonStyle">#style/Widget.AstraTheme_Purple.ActionButton</item>
</style>
<style name="Widget.AstraTheme_Purple.ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="android:background">#drawable/purple_bar</item>
<item name="background">#drawable/purple_bar</item>
</style>
<style name="Widget.AstraTheme_Purple.ActionButton" parent="Widget.Sherlock.ActionButton">
<item name="android:minWidth">50dip</item>
</style>
<style name="AppTheme" parent="Theme.Sherlock">
<item name="actionButtonStyle">#style/MyActionButtonStyle</item>
<item name="android:actionButtonStyle">#style/MyActionButtonStyle</item>
</style>
<style name="MyActionButtonStyle" parent="Widget.Sherlock.ActionButton">
<item name="android:minWidth">32dip</item>
<item name="android:padding">0dip</item>
</style>
The default value of android:minWidth for the ActionBar buttons is 56dip.
Don't forget to set #style/AppTheme as the Activity's theme.