In this article, we will create an application which will demonstrate how to change the background color and border color of an EditText widget. Here, we are changing the default background color and border color of the EditText widget using 9-patch image files. The state list xml file is used to define the 9-patch image files for different states of the EditText widget.
For the screenshot of this application, please scroll to the end of this article.
1. Create new Android project namely “CustomEditTextDemo”
2. Select Android build target
3. Enter application details
4. res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, MainActivity!</string> <string name="app_name">CustomEditTextDemo</string> <string name="edit1_text">EditText Widget</string> <string name="edit2_text">Disabled EditText Widget</string> <color name="blue">#0099cc</color> </resources>
5. Download 9-patch image files
Download the 9-patch image files from the given below link and extract to the folder res/drawable-mdpi

6. res/drawable/edit_text.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_window_focused="false" android:state_enabled="true" android:drawable="@drawable/textfield_default" /> <item android:state_window_focused="false" android:state_enabled="false" android:drawable="@drawable/textfield_disabled" /> <item android:state_pressed="true" android:drawable="@drawable/textfield_pressed" /> <item android:state_enabled="true" android:state_focused="true" android:drawable="@drawable/textfield_selected" /> <item android:state_enabled="true" android:drawable="@drawable/textfield_default" /> <item android:state_focused="true" android:drawable="@drawable/textfield_disabled_selected" /> <item android:drawable="@drawable/textfield_disabled" /> </selector>
This is the state list xml file that defines 9-patch images for different states of the EditText Widget
7. res/layout/main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <EditText android:id="@+id/edit1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/edit1_text" android:inputType="text" android:background="@drawable/edit_text" /> <EditText android:id="@+id/edit2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/edit2_text" android:inputType="text" android:background="@drawable/edit_text" /> </LinearLayout>
8. src/in/wptrafficanalyzer/customeditextdemo/MainActivity.java
package in.wptrafficanalyzer.customedittextdemo; import android.app.Activity; import android.os.Bundle; import android.widget.EditText; public class MainActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); /** Getting reference to the EditText widget of the main layout */ EditText edit = (EditText) findViewById(R.id.edit2); edit.setEnabled(false); } }
9. Application Screenshot
10. Download

11. Reference
http://developer.android.com/guide/index.html

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in
You can hire me on hourly basis or on project basis for Android applications development.
For hiring me, please mail your requirements to info@wptrafficanalyzer.in.
My other blogs
store4js.blogspot.com
Thanks for your article
I’ve created custom color 9-patch for edit text background, but they don’t scale right… when displayed, they are 2 times bigger than the standard ones… I tried using wrap_content or fixed height but nothing… I even re-sized the images but had no effect (being 9-patch they are rescaled to the big dimensions). You didn’t have this problem? Do you have any idea how can I fix this?
Thank you for your article. It really helps me, specially those 9 patch images.
thanks for the example!
Hi!
I’m learning about : stackoverflow.com/questions/28831831/custom-textview-with-rotate-zoom-in-zoom-out-and-move-on-touch-in-android
you have any idea to implement it?
Pls share me.
thank so much!
when i change images with color changing of border color, but my border is not changing, what ever the color u r given is coming