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?

Answer 1

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.