Problem with EditText background (android)

Question

I have a problem with EditText background like this

<EditText
     android:id="@+id/edit"
     android:layout_width="fill_parent"
     android:layout_height="35sp"                                                                       
     android:singleLine="true"

     android:layout_marginLeft="5px"
     android:layout_marginRight="5px"
     android:layout_marginTop="5px"
     android:textAppearance="?android:attr/textAppearanceSmall"      
      />

alt text http://i765.photobucket.com/albums/xx299/trieutrinhtrinh/edittext.jpg

After try to set the background, It look worse

<EditText
     android:id="@+id/edit"
     android:layout_width="fill_parent"
     android:layout_height="35sp"                                                                       
     android:singleLine="true"

     android:layout_marginLeft="5px"
     android:layout_marginRight="5px"
     android:layout_marginTop="5px"
     android:textAppearance="?android:attr/textAppearanceSmall"
     android:background="#ffffff"    
      />

alt text http://i765.photobucket.com/albums/xx299/trieutrinhtrinh/edittext2.jpg

What's happen with EditText background? How to make EditText keep default style?

Galore

isn't it android:textAppearance="@android:attr/textAppearanceSmall" – Robedechambre

Actually - the syntax for text is correct, see my answer below – Robedechambre

Answer 1

If you set your EditText background to a color you will effectively suppress Android's default background which is probably a Nine Patch but definetely not just a simple color. As result - you will get a simplest form of EditText - a square box. Here's slightly outdated list of built-in drawables to give you some idea

Robedechambre

Answer 2

Here is 2 Solution to change background of EditText i have investigate before, hope it can help you:

★Issue: When set Background to EditText it look so terrible

★Analysys: EditText used ninepath image for background. Their used a selector to change background image base on current state of EditText (Enable/Focus/Press, Default)

★There are two solution to solver this problem, each solution have both advantage and disadvantaged:

★Solution1: Create custom yourself EditText (follow this solution we have freely change view of EditText.

▲Advantage: Your freely render EditText view follow your purpose, No need to create Ninepath image as current implement of Android EditText. (Your must provider IF in your EditText to change background smoothly base on state of EditText (Enable/Focus....) Reused able and more custom in case you want to change color of Background or add more color

▼Disadvantage: Take much effort to create and test your custom EditText. (I choose solution 2 so have no demo implement of solution 1, if any one follow this solution feel free to share with us your demo code)

★Solution2: Used selector as Android implement

❶Create xml file call edittext_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/edittext_selector">
    <!-- Image display in background in select state -->    
    <item 
        android:state_pressed="true" 
        android:drawable="@drawable/your_ninepath_image">
    </item>

        <!-- Image display in background in select state -->    
    <item 
        android:state_enabled="true" 
        android:state_focused="true" 
        android:drawable="@drawable/your_ninepath_image">
    </item>

    <!-- Default state --> 
    <item android:state_enabled="true" 
        android:drawable="@drawable/your_ninepath_image">
    </item> 
</selector>

❷On EditText xml set selector:

<EditText 
    ...
    android:background="@layout/**edittext_selector**"
    ...
</EditText> 

★Note:

● In this demo code i was remove some behavior of view state, refer android implement for detail behavior (focus/unfocus, enable/disable, press, selected ...)

● Take care order of item in your selector. Difference order of item in selector xml file will have difference background.

▲Advantage: Simple, just create selector and set selector to background, in case you want more color, just set more selector then set by code.

▼Disadvantage: Take effort to create ninepath image for selector, in case you want change color or add more color you must create more image and selector. So it less robust than Solution1

This is my investigate to handler background of image, so it may right or wrong, if you have better solution or explain, feel free to share with us.

I was implement follow solution 2 and it worked.

Ondometer

Answer 3

My solution is a single line of code:

<your-widget-component-that-has-a-background-color>.getBackground().setColorFilter(Color.<your-desired-color>, PorterDuff.Mode.MULTIPLY);).

It breaks down like this:

• "getBackground()" fetches the background from the component
• "setColorFilter" will call a filtering on the background image itself
• "Color.<your-color-here>" determines what color you want to pass onto the filter
• "PorterDuff.Mode.<your-desired-filter-mode>" sets the kind of manipulation you would like to do with the given color and the fetched background image.

People with knowledge of image editing software might recognise the mode. Each mode has a certain effect on how the color is applied to the background image. To simply "override" the color of the image, while preserving its gradients, borders and such, use MULTIPLY.

Sandasandakan

Answer 4

If you wish to edit the color of the Android background on the fly without changing the background image completely, try the following: (it is probably not the best solution but it works):

YourEditText.getBackground().setColorFilter(getResources().getColor(R.color.your_color), PorterDuff.Mode.MULTIPLY);

Protamine

Answer 5

You don't need to create the image. There is a built in image in the android system that you can use.So edit your EditText in xml as following;-

<EditText
    android:id="@+id/editText1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="10dp"
    android:hint="@string/campaign_message"
    android:inputType="textMultiLine"
    android:background="@android:drawable/editbox_background_normal"
    android:minHeight="80dp" >
</EditText>

Note this line : android:background="@android:drawable/editbox_background_normal"

Doolie

Did you miss the point? When you set the background color of the edit text the built in drawable gets overridden. Unless you've themed your EditText away from the default drawable, there is no reason to even use "android:backgroun="@android:drawable/editbox_background_normal" – Disparagement

Answer 6

As I think you should change background Color, not the background. Because it's using xml custom shape.

• A drawable to use as the background. This can be either a reference to a full drawable resource (such as a PNG image, 9-patch, XML state list description, etc), or a solid color such as #ff000000 (black).

• May be a reference to another resource, in the form @[+][package:]type:name or to a theme attribute in the form ?[package:][type:]name.

• May be a color value, in the form of #rgb, #argb, #rrggbb, or #aarrggbb.

Sunbreak

The syntax he's using for background color is valid – Robedechambre

okay about syntax, i think that he overrides default background xml shape with shadows etc and sets it to solid color. – Sunbreak

Answer 7

Check out http://www.androidworks.com/changing-the-android-edittext-ui-widget if you want to style your EditText's.

Chondroma

Answer 8

I had to use SRC_ATOP for it to work for me

mEditText.getBackground().setColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP);

Kronstadt