Remove focus border of EditText

Question

How can I remove the border with appears when focusing an EditText View?

I need it cause this view has little space in the screen, but without the border it's enough. When running on Emulator an orange border appears, on Device a blue one.

Answer 1

Have you tried setting the background of the EditText to a transparent colour?

<EditText  
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:hint="@string/hello" 
android:background="#00000000"
/>

Answer 2

<EditText
            android:id="@+id/edittext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"  
            android:background="@android:drawable/editbox_background_normal"                 

 />

Answer 3

It is possible. However I would not recommend it because users are used to certain metaphors and you should not change the general UX.

You can apply different styles to your views. In your case it sounds like you want an EditText View element which looks like a TextView element. In this case you would have to specify other backgrounds for the EditText depending on the state of the View element.

In your desired layout.xml you assign a background to your EditText:

<EditText  
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:hint="@string/hello" android:background="@drawable/custom"
/>

Then you create the custom.xml in your drawable folder and add the following:

<?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_default" />
  <item android:state_enabled="true" android:state_focused="true" android:drawable="@drawable/textfield_default" />
  <item android:state_enabled="true" android:drawable="@drawable/textfield_default" />
  <item android:state_focused="true" android:drawable="@drawable/textfield_disabled" />
  <item android:drawable="@drawable/textfield_disabled" />
</selector>

Those are the possible states of your EditText View element. Normally you can access Android platform drawables directly by using @android:drawable/textfield_default, but in this case the textfield drawables are private so you have to copy them into your own drawable folder. The original resources can be found in your SDK installation folder at ANDROID_HOME\platforms\android-(API LEVEL)\data\res\drawable-(*dpi)\.

Once you are done you end up with an EditText which looks like a TextView but completely without those borders. Those orange borders you saw in the emulator are the default Android drawables. The blue ones are vendor specific (possibly Samsung).

Hope that helped and didn't confuse that much.

Answer 4

This is the fastest solution:

<EditText
            android:id="@+id/edittext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"  
            android:background="#00000000"                 

 />

Answer 5

You can keep the background color as transparent to remove the EditText border on focus.

Method 1

<EditText 
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#00000000"
/>