0

I have been looking on how to highlight a focused edit text form field in an Android app.

When I focus my email field, there is no visual feedback.

What sort of visual feedback should I provide ? Is there a standard on what the user expects ?

I was thinking of some background color highlight or some field border color.

Any way to achieve this ?

My layout is:

<EditText
    android:id="@+id/login_email_edittext"
    style="@style/editext_graybg"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/ic_username"
    android:drawableStart="@drawable/ic_username"
    android:hint="@string/login_email_hint" >

    <requestFocus />
</EditText>

And the style:

<style name="editext_graybg" parent="android:Widget.EditText">
    <item name="android:background">@drawable/editext_bg_gray</item>
    <item name="android:drawablePadding">@dimen/pad_10dp</item>
    <item name="android:ems">10</item>
    <item name="android:inputType">textEmailAddress</item>
    <item name="android:paddingLeft">@dimen/pad_10dp</item>
    <item name="android:paddingRight">@dimen/pad_10dp</item>
    <item name="android:textColor">@color/black</item>
    <item name="android:textSize">@dimen/txt_18sp</item>
</style>

EDIT: I tried the following solution but it is not satisfactory as it reduces the size of my beautifully styled field: I added textfield_selected.9.png image file into the drawable/ folder, I added a edit_text.xml file in the drawable/ folder containing a <item android:drawable="@drawable/textfield_selected" android:state_enabled="true" android:state_focused="true" /> and I added the attribute android:background="@drawable/edit_text" to my field. But the field is too small now. Using an image for this styling overwrites my existing styling. Is there any way to do this without an image ?

Stephane
  • 11,836
  • 25
  • 112
  • 175
  • possible duplicate of http://stackoverflow.com/questions/4584882/how-to-change-focus-color-of-edittext-in-android – Ankii Rawat May 27 '15 at 08:10

1 Answers1

3

You must create a selector inside your drawable folder. This selector will have the different states of the editText (with focus or not i.e).

<selector 
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item 
    android:state_pressed="true"
    android:drawable="@android:drawable/edittext_pressed" 
    />    
<item 
    android:state_focused="true"
    android:drawable="@drawable/edittext_focused" 
    />  
<item 
    android:drawable="@android:drawable/edittext_normal" 
    />

After that in your editText you can put as background this selector and it should work.

acostela
  • 2,597
  • 3
  • 33
  • 50
  • I accept your answer as what you wrote is correct. Just so you know, I could not make any sense of your answer, and it did not help me at all. After having searched and tried for some days I now solved the issue myself. But no hard feelings, I thank you for your try anyway. – Stephane May 31 '15 at 10:09
  • Thank, but you could ask me what you didn't understand ;) sometimes when you understand something you think it's autoexplanable and you don't put it clearly. I think this happened to me. – acostela Jun 01 '15 at 06:58