Yuriy Kulikov
Yuriy Kulikov

Reputation: 2129

How to style DialogPreference with a custom theme?

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>

Upvotes: 7

Views: 3059

Answers (2)

dtk
dtk

Reputation: 2526

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.

Upvotes: 5

Mike
Mike

Reputation: 2705

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>

Upvotes: 0

Related Questions