Search code examples
androidandroid-layoutcolorsandroid-alertdialogandroid-preferences

Change/Customize Preference Screen Alert Dialog


I've created a preference screen with androidx preference library. The problem is when I click the EditTextPreference, the alert dialog is completely white. I guess it's because I've defined primary text color and secondary text color in my app theme. So how can I apply a custom theme for the preference alert dialog? here's how the dialog looks like right now when I tap the EditTextPreference:

enter image description here

Style.xml:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/layoutBG</item>
    <item name="backgroundColor">@color/layoutMainBG</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:textColor">@color/textPrimaryLight</item>
    <item name="android:textColorSecondary">@color/textSecondaryLight</item>
</style>

colors.xml

<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">@color/textBlue</color>
    <color name="textPrimaryLight">#ffffff</color>
    <color name="textSecondaryLight">#D7D7D7</color>
    <color name="charging">#388e3c</color>
    <color name="textBlue">#70b3c6</color>
    <color name="layoutBG">#171717</color>
    <color name="layoutMainBG">#0d0d0d</color>
</resources>

Solution

  • I fixed it by adding these two lines in my AppTheme

            <item name="colorBackgroundFloating">@color/layoutBG</item>
            <item name="android:editTextColor">@color/textPrimaryLight</item>
    

    So my new AppTheme looks like this

        <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorAccent</item>
            <item name="colorPrimaryDark">@color/layoutBG</item>
            <item name="backgroundColor">@color/layoutMainBG</item>
            <item name="colorAccent">@color/colorAccent</item>
            <item name="android:textColor">@color/textPrimaryLight</item>
            <item name="android:textColorSecondary">@color/textSecondaryLight</item>
            <item name="colorBackgroundFloating">@color/layoutBG</item>
            <item name="android:editTextColor">@color/textPrimaryLight</item>
        </style>