Is there any way to theme a preference dialog? - android

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/

Related

How to replace the color of dialog's text buttons?

I'm using a custom theme for my app. When the dark mode is applied, some colors don't match the dark background at all.
For example, text buttons for dialogs:
According to the Material documentation, the text buttons use the Primary color.
But I've noticed that the default theme (the purple, blue-green one) uses some secondary color for the text buttons, which is what I'd like to achieve.
That dialog is popped up by a list preference, so I can't create a custom activity as dialog to replace it with its own style.
here is a sample theme of custom themed Dialog hope it helps you
<style name="Theme.App" parent="Theme.MaterialComponents.DayNight">
...
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="materialAlertDialogTheme">#style/ThemeOverlay.App.MaterialAlertDialog</item>
</style>
//here is importance part
<style name="ThemeOverlay.App.MaterialAlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="colorPrimary">#color/colorPrimaryDark</item>
<item name="colorSecondary">#color/colorSecondary</item>
<item name="colorSurface">#color/colorSurface</item>
<item name="colorOnSurface">#color/colorAccent</item>
<item name="alertDialogStyle">#style/MaterialAlertDialog.App</item>
<item name="materialAlertDialogTitleTextStyle">#style/MaterialAlertDialog.App.Title.Text</item>
<item name="buttonBarPositiveButtonStyle">#style/Widget.App.Button</item>
<item name="buttonBarNegativeButtonStyle">#style/Widget.App.Button</item>
</style>
<style name="MaterialAlertDialog.App" parent="MaterialAlertDialog.MaterialComponents">
<item name="shapeAppearance">#style/ShapeAppearance.App.MediumComponent</item>
</style>
// for title color
<style name="MaterialAlertDialog.App.Title.Text" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
<item name="android:textColor">#color/color_dialog_buttons</item>
</style>
<style name="Widget.App.Button" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button</item>
<item name="shapeAppearance">#style/ShapeAppearance.App.SmallComponent</item>
</style>
// for button colors
<style name="ThemeOverlay.App.Button" parent="">
<item name="colorPrimary">#color/color_dialog_buttons</item>
</style>
<style name="ShapeAppearance.App.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent">
<item name="cornerFamily">cut</item>
<item name="cornerSize">8dp</item>
</style>
<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">cut</item>
<item name="cornerSize">4dp</item>
</style>

Android colorAccent is ignored in the Dialog

I am creating a dialog box using custom layout but in layout colorAccent is completely ignored and replaced by default teal color. I have changed my theme according to this answer. but still not working. I can add theme to at the time of creating dialog by its constructor but I want do it only by theme so it affects every dialog in my app.Any help appreciated thanks here is my theme.
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">#android:transition/move</item>
<item name="android:windowSharedElementExitTransition">#android:transition/move</item>
<item name="android:alertDialogTheme">#style/Theme.Dialog</item>
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="Theme.Dialog" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
My dialog box look like this image Edittext cursor is ignoring my colorAccent.
Here is a sample code
<style name="DialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="colorAccent">#color/colorPrimaryDark</item>
</style>
Define style while initiating diaolog in activity.
Dialog dialog = new Dialog(mContext, R.style.DialogStyle);

colorAccent in Holo Theme

I used this to change the accent color in EditText in the Material Theme:
<style name="AppThemeSub" parent="#android:style/Theme.Material.Light">
<item name="android:colorPrimary">#color/colorPrimary</item>
<item name="android:colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="android:colorAccent">#color/colorPrimary</item>
</style>
And this to change the ProgressBar color:
<style name="AppThemeWeb" parent="#android:style/Theme.Material.Light">
<item name="android:colorPrimary">#color/colorPrimary</item>
<item name="android:colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="android:colorAccent">#color/white</item>
</style>
How I can use this in Holo Theme?
PS: I used the indeterminateDrawable in the layout of ProgressBar and not work with Holo Theme devices.
You have to use the AppCompat theme like this will behave as holo and you can set all material properties here in your value's direcotry style.xml. I have used this theme.
//My Customized Theme
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/myPrimaryColor</item>
<item name="colorPrimaryDark">#color/myPrimaryDarkColor</item>
<item name="colorAccent">#color/myAccentColor</item>
<item name="android:textColorPrimary">#color/myPrimaryTextColor</item>
<item name="android:textColorSecondary">#color/mySecondaryTextColor</item>
<item name="android:actionBarDivider">#color/myDividerColor</item>
<item name="android:windowActionModeOverlay">true</item>
</style>

buttonStyle not working for 22.1.1

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.

insert a custom style inside two different theme

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>

Categories

Resources