android custom EditText UI

Question

Hello I would like to customize the way the default EditText is drawn on the screen, I have this code

<?xml version="1.0" encoding="utf-8"?>
 <selector
 xmlns:android="http://schemas.android.com/apk/res/android">

 <item android:state_pressed="true" >
<shape android:shape="rectangle">
    <solid
        android:color="#00ff00" />
    <stroke
        android:width="5dp"
        android:color="#ff0000"
        android:dashWidth="3dp"
        android:dashGap="2dp" />
</shape>
</item>

<item android:state_focused="true" >
<shape>
    <gradient
        android:endColor="#8dc73f"
        android:centerColor="#d4d4d4"
        android:startColor="#d4d4d4"
        android:centerX="0.5"
        android:centerY="0.5"
        android:angle="270" />
    <stroke
        android:width="1dp"
        color="#8dc73f" />
    <corners
        android:radius="6dp" />
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
</shape>
</item>
 <item>        
 <shape>
     <gradient
        android:endColor="#d4d4d4"
        android:centerColor="#d4d4d4"
        android:startColor="#d4d4d4"
        android:angle="270" />
     <stroke
        android:width="1dp"
        color="#00ff00" />
     <corners
        android:radius="7dp" />
   </shape>
   </item>
  </selector>

wich works fine but the problem is that on the focused state I would like to apply the effect round of the EditText and note inside, like the default android effect is applied, is this possible and how because I haven't found a solution, the above code only applies the effect inside the EditText.

Answer 1

You can customize the way the default EditText is drawn by creating an XML file in the 'Drawable' folder and mentioning in code how you want it to look. Sample given below:

<selector><item android:state_pressed="true">
    <shape android:shape="rectangle">
        <gradient android:startColor="#40FFE600"
            android:centerColor="#60FFE600" android:endColor="#90FFE600"
            android:angle="270" android:centerX="0.5" android:centerY="0.5" />
        <stroke android:width="5dp" android:color="#50FF00DE" />
        <corners android:radius="7dp" />
        <padding android:left="10dp" android:top="6dp" android:right="10dp"
            android:bottom="6dp" />
    </shape>
</item>
<item android:state_focused="true">
    <shape>
        <gradient android:startColor="#40CB1759"
            android:centerColor="#60CB1759" android:endColor="#90CB1759"
            android:angle="270" android:centerX="0.5" android:centerY="0.5" />
        <stroke android:width="5dp" android:color="#50ff0000" />
        <corners android:radius="7dp" />
        <padding android:left="10dp" android:top="6dp" android:right="10dp"
            android:bottom="6dp" />
    </shape>
</item>
<item>
    <shape>
        <gradient android:startColor="#402168D2"
            android:centerColor="#602168D2" android:endColor="#902168D2"
            android:angle="270" android:centerX="0.5" android:centerY="0.5" />
        <stroke android:width="5dp" android:color="#50ff0000" />
        <corners android:radius="7dp" />
        <padding android:left="10dp" android:top="6dp" android:right="10dp"
            android:bottom="6dp" />
    </shape>
</item></selector>

Answer 2

To apply the customize drawable xml use the android:backgroung attibute of the EditText

For example android:background="@drawable/yourXml"

Answer 3

<solid android:color="#E6E6E6" />

<padding
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp"
    android:top="2dp" />

For more reference click here http://androiddhina.blogspot.in/2015/08/android-example-for-custom-grouped-edittext.html

Answer 4

Have you checked out the Notepad sample? They have a custom TextEdit class that draws a line between each row of text:

http://developer.android.com/resources/samples/NotePad/src/com/example/android/notepad/NoteEditor.html

Could you override onDraw() the same way to do what you're looking for?