Android EditTextPreference style

Question

In my app in setings I use EditTextPreference , and on android API uder 11 edittext field has black background and black text color. How can I chenge EditTextPreferences background color ?

I tried: in theme :

<item name="android:editTextPreferenceStyle">@style/EditTextAppTheme</item>

in style:

<style name="EditTextAppTheme" parent="android:Widget.EditText">
      <item name="android:background">@drawable/edit_text_holo_light</item>
      <item name="android:textColor">#000000</item>
  </style>

If I set style to :

<style name="EditTextPreferences" parent="android:Preference.DeviceDefault.DialogPreference.EditTextPreference">
      <item name="android:background">@drawable/edit_text_holo_light</item>
      <item name="android:textColor">#FF0000</item>
  </style>

And theme to :

<item name="android:editTextPreferenceStyle">@style/EditTextPreferences</item>

I got error:

error: Error retrieving parent for item: No resource found that matches the given name 'android:Preference.DeviceDefault.DialogPreference.EditTextPreference'.

Disembowel

Answer 1

I have been trying to figure this out as well for the past couple of days. I've found that all the EditTextPrefence extends is AlertDialog and EditText. So if you can style both of those in your theme, you will find the result you are looking for in a EditTextPreference. Here's what I'm working with:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">

<style name="LightTheme" parent="android:Theme.Light">
    <item name="android:windowNoTitle">true</item>
    <item name="android:background">@color/greyscale2</item>
    <item name="android:textColor">@color/greyscale16</item>
    <item name="android:textViewStyle">@style/LightTextView</item>
    <item name="android:buttonStyle">@style/LightButton</item>
    <item name="android:editTextStyle">@style/LightEditText</item>
    <item name="android:alertDialogTheme">@style/LightDialog</item>
    <item name="android:dialogPreferenceStyle">@style/LightDialog</item>
    <item name="android:colorBackground">@color/greyscale2</item>
    <item name="android:colorBackgroundCacheHint">@color/greyscale1</item>
</style>

<!-- TextView -->
<style name="LightTextView" parent="android:Widget.TextView">
    <item name="android:textColor">@color/greyscale16</item>
    <item name="android:background">@android:color/transparent</item>
</style>

<!-- Button -->
<style name="LightButton" parent="android:Widget.Button">
    <item name="android:textColor">@color/greyscale16</item>
    <item name="android:background">@drawable/light_button_background</item>
    <item name="android:gravity">center_vertical|center_horizontal</item>
</style>

<style name="LightCheckBox" parent="android:Widget.CompoundButton.CheckBox">
    <item name="android:background">@color/greyscale2</item>
</style>

<style name="LightEditText" parent="android:style/Widget.EditText">
    <item name="android:background">@color/greyscale1</item>
    <item name="android:editTextBackground">@color/greyscale2</item>
    <item name="android:textColor">@color/greyscale16</item>
    <item name="android:button">@style/DarkButton</item>
    <item name="android:inputType">number</item>
</style>

<style name="LightDialog" parent="@android:style/Theme.Dialog">
    <item name="android:background">@color/greyscale2</item>
    <item name="android:textColor">@color/greyscale16</item>
    <item name="android:textViewStyle">@style/LightTextView</item>
    <item name="android:buttonStyle">@style/LightButton</item>
    <item name="android:divider">@color/greyscale14</item>
</style>

Notice the <item name="android:dialogPreferenceStyle">@style/LightDialog</item> attribute in my base theme. I found the styleable resource here, more specifically alertDiaolg here (Note: These can also be found in your SDK directory on your computer)

I hope this at least heads you in the right direction, I have been struggling to figure this out (my first theme in my apps). Happy Coding!

Suannesuarez

android:alertDialogTheme did it for me! I just wanted to style the little sub-dialogs that appear when you press e.g. EditTextPreference. Thanks! – Tesstessa

Answer 2

I think the effect you've observed is a bug in the Gingerbread emulator. After changing the activity's theme and restarting the emulator the EditTextPreference appeared as above.

Scipio

Answer 3

First extend EditTextPreference and override onPrepareDialogBuilder, inverting background color for versions below Honeycomb:

public class CustomEditTextPreference extends EditTextPreference {

    /**
     * Prepares the dialog builder to be shown when the preference is clicked.
     * Use this to set custom properties on the dialog.
     * <p>
     * Do not {@link AlertDialog.Builder#create()} or
     * {@link AlertDialog.Builder#show()}.
     */
    @Override
    protected void onPrepareDialogBuilder(AlertDialog.Builder builder) {
        builder.setInverseBackgroundForced(Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB);
    }
}

Then replace in your preferences.xml all

<EditTextPreference ... />

with

<your.package.CustomEditTextPreference ... />

Mickey

Answer 4

I had this exact issue when I switched to the API v21 AppCompat (I think - it previously used to work just fine at least). My solution was to define the style for android:editTextStyle explicitly in my theme - here is my complete styles.xml:

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light">

        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
        <item name="android:editTextStyle">@android:style/Widget.EditText</item>
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>

</resources>

The result is an editText that looks the same as in @Jesse Webb's screenshot.

Ewell