CODEWITHSUNDEEP
android
maxsap
maxsap

Reputation: 3001

android custom EditText UI

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>

which 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? I haven't found a solution, the above code only applies the effect inside the EditText.

Upvotes: 11

Views: 29710

Answers (3)

F. Geraerts
F. Geraerts

Reputation: 1190

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

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

Upvotes: 6

mikerowehl
mikerowehl

Reputation: 2238

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?

Upvotes: 0

AppsLabz
AppsLabz

Reputation: 311

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>

Upvotes: 31

Related Questions