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

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”

Figure 1 : New Android Project

2. Select Android build target

Select Android Build Target

3. 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

9-patch images for custom EditText widget 1.85 KB

Download 9-patch images for custom EditText widget

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

Figure 4: Application in Execution

10. Download

Custom EdittText Demo 160.64 KB

Download Full Source Code

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: 9-patch, statelist, themes