Changing background color and border color of an EditText widget using State List in Android

July 14, 2012
By

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”

New Android Project

Figure 1 : New Android Project


2. Select Android build target

Select Android Build Target

Select Android Build Target


3. Enter application details

Enter Application Details

Figure 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

Application in Execution

Figure 4: Application in Execution


10. Download


11. Reference

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


How to hire me?

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


Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :



Tags: , ,

6 Responses to Changing background color and border color of an EditText widget using State List in Android

  1. Ryan on September 3, 2012 at 7:02 pm

    Thanks for your article

  2. Sebastian on September 27, 2012 at 12:04 am

    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?

  3. Daksh on February 21, 2014 at 11:02 pm

    Thank you for your article. It really helps me, specially those 9 patch images.

  4. Rakhi Dhavale on February 10, 2015 at 8:56 pm

    thanks for the example!

  5. Trần Hoà on June 28, 2015 at 10:59 pm

    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!

  6. geetha on August 25, 2015 at 12:10 pm

    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

Leave a Reply to Sebastian Cancel reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner