How to style DialogPreference with a custom theme? - android

In my application I was using Theme.Holo and Theme.Holo.Light without any issues. When Holo theme is used and I click on a DialogPreference/ListPreference, a popped dialog is also themed with Holo. Same for the Holo.Light. But when PreferencesActivity is styled with my custom theme, which is derived from Holo.Light, all dialogs are themed with Holo.Light. I think I am missing somthing in my theme. Could anyone help me? Thanks a lot!
Here is my theme code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated with http://android-holo-colors.com -->
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="GreenTheme" parent="android:Theme.Holo.Light">
<item name="android:editTextBackground">#drawable/edit_text_holo_light</item>
<item name="android:autoCompleteTextViewStyle">#style/AutoCompleteTextViewGreenTheme</item>
<item name="android:listChoiceIndicatorMultiple">#drawable/btn_check_holo_light</item>
<item name="android:listChoiceIndicatorSingle">#drawable/btn_radio_holo_light</item>
<item name="android:buttonStyle">#style/ButtonGreenTheme</item>
<item name="android:imageButtonStyle">#style/ImageButtonGreenTheme</item>
<item name="android:dropDownSpinnerStyle">#style/SpinnerGreenTheme</item>
<item name="android:tabWidgetStyle">#style/TabWidgetGreenTheme</item>
<item name="android:progressBarStyleHorizontal">#style/ProgressBarGreenTheme</item>
<item name="android:seekBarStyle">#style/SeekBarGreenTheme</item>
<item name="android:buttonStyleToggle">#style/ToggleGreenTheme</item>
<item name="android:listChoiceBackgroundIndicator">#drawable/list_selector_holo_light</item>
<item name="android:activatedBackgroundIndicator">#drawable/activated_background_holo_light</item>
<item name="android:fastScrollThumbDrawable">#drawable/fastscroll_thumb_holo</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid.Greenactionbar</item>
<item name="android:buttonBarButtonStyle">#style/ButtonBarButtonStyleGreenTheme</item>
<item name="android:preferenceStyle">#style/TimePickerDialogFragmentGreen</item>
</style>
<style name="TimePickerDialogFragmentGreen" parent="#android:style/Theme.Holo.Light.Dialog">
<item name="android:editTextBackground">#drawable/edit_text_holo_light</item>
<item name="android:autoCompleteTextViewStyle">#style/AutoCompleteTextViewGreenTheme</item>
<item name="android:listChoiceIndicatorMultiple">#drawable/btn_check_holo_light</item>
<item name="android:listChoiceIndicatorSingle">#drawable/btn_radio_holo_light</item>
<item name="android:buttonStyle">#style/ButtonGreenTheme</item>
<item name="android:imageButtonStyle">#style/ImageButtonGreenTheme</item>
<item name="android:dropDownSpinnerStyle">#style/SpinnerGreenTheme</item>
<item name="android:tabWidgetStyle">#style/TabWidgetGreenTheme</item>
<item name="android:progressBarStyleHorizontal">#style/ProgressBarGreenTheme</item>
<item name="android:seekBarStyle">#style/SeekBarGreenTheme</item>
<item name="android:buttonStyleToggle">#style/ToggleGreenTheme</item>
<item name="android:listChoiceBackgroundIndicator">#drawable/list_selector_holo_light</item>
<item name="android:activatedBackgroundIndicator">#drawable/activated_background_holo_light</item>
<item name="android:fastScrollThumbDrawable">#drawable/fastscroll_thumb_holo</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid.Greenactionbar</item>
<item name="android:buttonBarButtonStyle">#style/ButtonBarButtonStyleGreenTheme</item>
</style>
</resources>

I found this rather unformatted but otherwise nice answer.
The gist is that DialogPreferences are AlertDialogs created without the theme parameter, which means they apply which ever theme android:alertDialogTheme points to.
So I extended my theme like this to have the dialog themed:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/yellow_500</item>
<item name="colorPrimaryDark">#color/yellow_a700</item>
<item name="colorAccent">#color/purple_400</item>
<item name="android:alertDialogTheme">#style/DialogTheme</item>
</style>
<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog">
<item name="colorPrimary">#color/yellow_500</item>
<item name="colorPrimaryDark">#color/yellow_a700</item>
<item name="colorAccent">#color/purple_400</item>
<item name="android:windowMinWidthMinor">#android:dimen/dialog_min_width_minor</item>
</style>
</resources>
The colorPrimary, colorPrimaryDark and colorAccent in the AppTheme were the colours I wanted to have applied to the dialog as well.
Note that I needed the android:windowMinWidthMinor to prevent the dialog from collapsing horizontally.

I have clarifying questions, but can't ask them because of low rate. So: 1.Does your first style work correctly? 2.Are you sure, that theme #android:style/Theme.Holo.Light.Dialog has all items, you declared in TimePickerDialogFragmentGreen?For example:
<item name="android:tabWidgetStyle"> #style/TabWidgetGreenTheme</item>
3. Have you tried the idea proposed by Luksprog
And finally: I used something like that to create custom style for my EditTexts:
<style name="EditTextStyle" parent="#style/Indents">
<item name="android:textColor">#android:color/black</item>
<item name="android:background">#android:color/white</item>
<item name="android:textColorHint">#android:color/darker_gray</item>
<item name="android:textSize">14sp</item>
</style>
<style name="Indents" parent="#style/Margins">
<item name="android:paddingBottom">#dimen/activity_vertical_padding</item>
<item name="android:paddingTop">#dimen/activity_vertical_padding</item>
</style>
<style name="Margins">
<item name="android:layout_marginTop">#dimen/activity_vertical_margin </item>
<item name="android:layout_marginBottom">#dimen/activity_vertical_margin </item>
<item name="android:layout_marginLeft">#dimen/activity_horizontal_margin </item>
<item name="android:layout_marginRight">#dimen/activity_horizontal_margin </item>
</style>

Related

How to change ListPreference button colors?

I use bellow style to change Dialog background color to dark, In preference page I use ListPreference and after apply this style, cancel button of ListPreference disappeared in dialog background.
<style name="AppThemeBase" parent="Theme.MaterialComponents.DayNight">
<item name="colorPrimary">#212D3B</item>
<item name="colorPrimaryDark">#172331</item>
<item name="colorAccent">#61A3D7</item>
<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:dialogTheme">#style/AppTheme.Dialog</item>
<item name="android:alertDialogTheme">#style/AppTheme.Dialog</item>
</style>
<style name="AppTheme.Dialog" parent="Theme.MaterialComponents.DayNight.Dialog">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:background">#212D3B</item>
<item name="colorPrimary">#61A3D7</item>
<item name="colorPrimaryDark">#8DB2D3</item>
<item name="colorAccent">#61A3D7</item>
</style>
Is there a way to change this button color?
Finally I found solution. I don't understand what is different between android:alertDialogTheme and alertDialogTheme (without android:) but preference screen used the alertDialogTheme to stylize dialogs.
By adding bellow item to AppThemeBase, my problem is resolved.
<item name="alertDialogTheme">#style/AppTheme.Dialog</item>
Final AppThemeBase :
<style name="AppThemeBase" parent="Theme.MaterialComponents.DayNight">
<item name="colorPrimary">#212D3B</item>
<item name="colorPrimaryDark">#172331</item>
<item name="colorAccent">#61A3D7</item>
<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:dialogTheme">#style/AppTheme.Dialog</item>
<item name="android:alertDialogTheme">#style/AppTheme.Dialog</item>
<item name="alertDialogTheme">#style/AppTheme.Dialog</item>
</style>
<style name="AppTheme.Dialog" parent="Theme.MaterialComponents.DayNight.Dialog">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:background">#212D3B</item>
<item name="colorPrimary">#61A3D7</item>
<item name="colorPrimaryDark">#8DB2D3</item>
<item name="colorAccent">#61A3D7</item>
</style>

Cant change colorButtonNormal value to all buttons

I am trying to make all buttons in my app have default color using colorButtonNormal in my style.
It works nice on API 21 and above but under API 21 it only changes the background of some buttons and i dont know what is going wrong.
styles.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowContentOverlay">#null</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="colorPrimary">#color/btn_login</item>
<item name="colorPrimaryDark">#color/bg_login</item>
<item name="colorAccent">#color/btn_login</item>
<item name="colorButtonNormal">#color/btn_login</item>
</style>
</resources>
v21/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowContentOverlay">#null</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="android:alertDialogTheme">#style/AlertDialogCustom</item>
<item name="android:colorButtonNormal">#color/btn_login</item>
<item name="colorPrimary">#color/btn_login</item>
<item name="colorPrimaryDark">#color/bg_login</item>
<item name="colorAccent">#color/btn_login</item>
</style>
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:colorPrimary">#color/btn_login</item>
<item name="android:colorAccent">#color/btn_login</item>
<item name="colorAccent">#color/btn_login</item>
<item name="colorPrimary">#color/btn_login</item>
<item name="colorPrimaryDark">#color/bg_login</item>
</style>
<style name="Preference" parent="Theme.AppCompat.Light">
<item name="android:textColorPrimary">#color/black</item>
<item name="android:colorPrimary">#color/btn_login</item>
<item name="android:colorAccent">#color/btn_login</item>
<item name="android:editTextColor">#color/black</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:alertDialogTheme">#style/AlertDialogCustom</item>
<item name="colorAccent">#color/btn_login</item>
</style>
<style name="EditTextThemeCustom" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="android:editTextColor">#color/black</item>
<item name="android:textColor">#color/black</item>
<item name="colorAccent">#color/btn_login</item>
</style>
</resources>
Result:
Lollipop
and
Kitkat
Any suggestions?
Add to your styles.xml
<style name="ColoredButton" parent="Widget.AppCompat.Button">
<item name="colorButtonNormal">#color/btn_login</item>
</style>
and then use
android:theme="#style/ColoredButton"
as one of your buttons' attributes
The buttons you inflate will get automatically translated to AppCompatButton.
Wherever you have new Button(context) you need to use new AppCompatButton(context) instead for Material theme colors to apply.
I was getting this issue in old devices(<21) because, my activity was extending just activity when I make in it extend AppCompatActivity, in old devices also it is working perfect.

Styling of AlertDialog buttons

In my application I use holoeverywhere. I would like to change the appearance of AlertDialog and I got stuck on buttons below alert dialog. I took a look how things were done in holoeverywhere and I tried to modify that.
Here is backtracking of my reasoning:
In theme there are atributes which define alertDialogTheme and some other stuff. We will come back later to selectableItemBackground also.
<style name="Holo.Base.Theme" parent="Theme.AppCompat">
...
<item name="alertDialogTheme">#style/Holo.Theme.Dialog.Alert</item>
...
<item name="buttonBarButtonStyle">?borderlessButtonStyle</item>
...
<item name="selectableItemBackground">#drawable/item_background_holo_dark</item> *
...
</sytle>
So i figure alertDialogStyle is my target which is further defined in styles:
<style name="Holo.Base.Theme.Dialog" parent="Holo.Theme">
<item name="android:colorBackgroundCacheHint">#null</item>
<item name="android:windowAnimationStyle">#style/Holo.Animation.Dialog</item>
<item name="android:windowBackground">#drawable/dialog_full_holo_dark</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowFrame">#null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
<item name="android:windowTitleStyle">#style/Holo.DialogWindowTitle</item>
<item name="borderlessButtonStyle">#style/Holo.Button.Borderless.Small</item>
<item name="buttonBarStyle">#style/Holo.ButtonBar.AlertDialog</item>
<item name="listPreferredItemPaddingLeft">16dip</item>
<item name="listPreferredItemPaddingRight">16dip</item>
<item name="windowActionBar">false</item>
<item name="windowActionModeOverlay">true</item>
<item name="windowAnimationStyle">#style/Holo.Animation.Dialog</item>
<item name="windowContentOverlay">#null</item>
<item name="windowMinWidthMajor">#dimen/dialog_min_width_major</item>
<item name="windowMinWidthMinor">#dimen/dialog_min_width_minor</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Holo.Theme.Dialog" parent="Holo.Base.Theme.Dialog" >
</style>
<style name="Holo.Theme.Dialog.Alert" parent="Holo.Theme.Dialog">
<item name="alertDialogStyle">#style/Holo.AlertDialog</item>
<item name="alertDialogTitleDividerColor">#color/holo_blue_light</item>
<item name="android:windowBackground">#android:color/transparent</item>
</style>
<style name="Holo.Button.Borderless" parent="Holo.Button">
<item name="android:background">?selectableItemBackground</item>
<item name="android:paddingLeft">4dip</item>
<item name="android:paddingRight">4dip</item>
</style>
So Holo.Theme.Dialog.Alert is inherited from Holo:base.Theme.Dialog which has an atribute for borderlessButtonStyle, which I guess defines the buttons of alert dialog.
Style Holo.Button.Borderless referes the atribute selectableItemBackground for its background. Atribute is set in application theme itself. So, my reasoning is if I inherit from theme Holo.theme and set selectableBackground atribut my change should reflect in customized alert dialog buttons and everything else where this background is used.
<style name="ThemeCustom" parent="#style/Holo.Theme>
…
<item name="selectableItemBackground">#drawable/custom_item_background </item>
…
</style>
But this does not work. No change is visible in alert dialog buttons. Is there something wrong with my reasoning?

Android TextColor

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

Change generated action bar theme from Android Asset Studio

I have used Android Asset Studio to generate action bar style, however i woul like to do some changes, which I was unable to do in Studio, so I edited generated theme but lot of things was just ignored, and I just can't figure out how things work.
There is example:
`
<style name="Theme.Myactionbar" parent="#style/Theme.AppCompat.Light">
<item name="actionBarItemBackground">#drawable/selectable_background_myactionbar</item>
<item name="popupMenuStyle">#style/PopupMenu.Myactionbar</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Myactionbar</item>
<item name="actionBarTabStyle">#style/ActionBarTabStyle.Myactionbar</item>
<item name="actionDropDownStyle">#style/DropDownNav.Myactionbar</item>
<item name="actionBarStyle">#style/ActionBar.Solid.Myactionbar</item>
<item name="actionModeBackground">#drawable/cab_background_top_myactionbar</item>
<item name="actionModeSplitBackground">#drawable/cab_background_bottom_myactionbar</item>
<item name="actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Myactionbar</item>
</style>
<style name="ActionBar.Solid.Myactionbar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid">
<item name="background">#drawable/ab_solid_myactionbar</item> //THIS IS GREEN
<item name="backgroundStacked">#drawable/ab_solid_myactionbar</item>//THIS IS GREEN
<item name="backgroundSplit">#drawable/ab_bottom_solid_myactionbar</item>//THIS IS GREEN
<item name="progressBarStyle">#style/ProgressBar.Myactionbar</item>
</style>
<style name="ActionBar.Transparent.Myactionbar" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="background">#drawable/ab_transparent_myactionbar</item>
<item name="progressBarStyle">#style/ProgressBar.Myactionbar</item>
</style>
<style name="PopupMenu.Myactionbar" parent="#style/Widget.AppCompat.Light.PopupMenu">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_example </item>
</style>
<style name="DropDownListView.Myactionbar" parent="#style/Widget.AppCompat.Light.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_myactionbar</item>
</style>
<style name="ActionBarTabStyle.Myactionbar" parent="#style/Widget.AppCompat.Light.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator_ab_myactionbar</item>
</style>
<style name="DropDownNav.Myactionbar" parent="#style/Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/spinner_background_ab_myactionbar</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_myactionbar</item>
<item name="android:dropDownSelector">#drawable/selectable_background_myactionbar</item>
</style>
<style name="ProgressBar.Myactionbar" parent="#style/Widget.AppCompat.ProgressBar.Horizontal">
<item name="android:progressDrawable">#drawable/progress_horizontal_myactionbar</item>
</style>
<style name="ActionButton.CloseMode.Myactionbar" parent="#style/Widget.AppCompat.Light.ActionButton.CloseMode">
<item name="android:background">#drawable/btn_cab_done_myactionbar</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Myactionbar.Widget" parent="#style/Theme.AppCompat">
<item name="popupMenuStyle">#style/PopupMenu.Myactionbar</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Myactionbar</item>
</style>
Everything was like in generator, but then i tried the simplest change, that is the color, so I edited style name=ActionBar.Solid.Myactionbar and put there som other drawables from other generated style.
It looked like this :
<style name="Theme.Myactionbar" parent="#style/Theme.AppCompat.Light">
<item name="actionBarItemBackground">#drawable/selectable_background_myactionbar</item>
<item name="popupMenuStyle">#style/PopupMenu.Myactionbar</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Myactionbar</item>
<item name="actionBarTabStyle">#style/ActionBarTabStyle.Myactionbar</item>
<item name="actionDropDownStyle">#style/DropDownNav.Myactionbar</item>
<item name="actionBarStyle">#style/ActionBar.Solid.Myactionbar</item>
<item name="actionModeBackground">#drawable/cab_background_top_myactionbar</item>
<item name="actionModeSplitBackground">#drawable/cab_background_bottom_myactionbar</item>
<item name="actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Myactionbar</item>
</style>
<style name="ActionBar.Solid.Myactionbar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid">
<item name="background">#drawable/ab_solid_example</item>
<item name="backgroundStacked">#drawable/ab_stacked_solid_example</item>
<item name="backgroundSplit">#drawable/ab_bottom_solid_myactionbar</item>
<item name="progressBarStyle">#style/ProgressBar.Myactionbar</item>
</style>
but nothing happend, and changed drawables supposed to be gray. I was wandering if anybody did this before and why this isnt working? Thank you
Ok I figured it out, there is values-v14 folder for styles for api level 14 and above, so you have to change these values too.

Categories

Resources