Android different EditText backgrounds for different states using shapes, selector or list

Question

I'm starting a new app where I use ActionBarSherlock & HoloEverywhereLib. My min & target SDK are the same (10/2.3.3). This is just so I can also quickly port it to Amazon Kindle & BB10 using the android runtime they have (already used this setup for another app and it worked without issue). All the while the app should have as close to ICS/JB look as possible.

For my EditTexts though, I'm giving them a Girgerbread/iOS (round corners, but no shadows) look to them

Someone mentioned to me a few weeks ago to grab the drawables for Gingerbread and use them to my EditTexts. but i starting using another answer I found here at S/O, very simple:

<EditText
 background:"@drawable/edittext_round_white"
 ..../>

& my edittext_round_white.xml:

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android" 
  android:shape="rectangle"
  >
  <corners android:radius="8dp"/>
<stroke android:width="1dp"
    android:color="#444"/>
<solid android:color="#FFFFFF" />
  </shape>

Now, when I run the app, two things are not right

a) there is no 'focus' at all (I'm aware I need to implement this, it's the point of the question)

b) the cursor does not appear at all in my edittext (the gray vertical line hinting at to where in the edittext the input is directed)

For a) I assume I've to use some sort of selector or list, right? how? I'm new to styling in android and any help would be appreciated. The only thing I'm going to change is the stroke color.

For b) how can I make cursor show up?

Any hints / links / etc here are very much welcomed!

Answer 1

I suggest to use NinePatch images to customize your EditText. Here goes an example based on my code:

The Selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_window_focused="false" android:state_enabled="true"
        android:drawable="@drawable/twitter_im_edittext_normal" />
  <item android:state_window_focused="false" android:state_enabled="false"
        android:drawable="@drawable/twitter_im_edittext_normal" />
  <item android:state_pressed="true" android:drawable="@drawable/twitter_im_edittext_normal" />
  <item android:state_enabled="true" android:state_focused="true" android:drawable="@drawable/twitter_im_edittext_focused" />
  <item android:state_enabled="true" android:drawable="@drawable/twitter_im_edittext_normal" />
  <item android:state_focused="true" android:drawable="@drawable/twitter_im_edittext_focused" />
  <item android:drawable="@drawable/twitter_im_edittext_normal" />
</selector>

Use selector the same way you used in your code, set it to background of your EditText.

Images:

twitter_im_edittext_focused.9.png

twitter_im_edittext_normal.9.png

More about NinePatch images you can found here.

Hope it helps.

Answer 2

Short version of accepted answer

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_focused="true"
        android:drawable="@drawable/edit_text_background_focused" />
    <item android:drawable="@drawable/edit_text_background_normal" />
</selector>

Answer 3

I think the problem is that your cursor is above the left 'border / wall' of the editText box and is not visible due to the overlap.

What I did was to add some padding for the text and this moved the cursor and text more 'inward' and it then became visible.

Try adding this to your editText:

android:paddingLeft="8dp"