32

I am creating three EditTexts in my xml file using code like this:

<EditText
    android:id="@+id/name_edit_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/profile_image_view_layout"
    android:layout_centerHorizontal="true"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="20dp"
    android:ems="15"
    android:hint="@string/name_field"
    android:inputType="text" />

When I run the app, it looks like this on my device:

enter image description here

But I want it to look like this, without using any background image:

enter image description here

So how can that be done? Any ideas or suggestions will be helpful.

CarenRose
  • 1,266
  • 1
  • 12
  • 24
Rahul
  • 1,667
  • 6
  • 21
  • 38

6 Answers6

39

Create xml file like edit_text_design.xml and save it to your drawable folder

i have given the Color codes According to my Choice, Please Change Color Codes As per your Choice !

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

<item>
    <shape>
        <solid android:color="#c2c2c2" />
    </shape>
</item>

<!-- main color -->
<item
    android:bottom="1.5dp"
    android:left="1.5dp"
    android:right="1.5dp">
    <shape>
        <solid android:color="#000" />
    </shape>
</item>

<!-- draw another block to cut-off the left and right bars -->
<item android:bottom="5.0dp">
    <shape>
        <solid android:color="#000" />
    </shape>
</item>

</layer-list>

your Edit Text Should contain it as Background :

add android:background="@drawable/edit_text_design" to all of your EditText's

and your above EditText should now look like this:

      <EditText
        android:id="@+id/name_edit_text"
        android:background="@drawable/edit_text_design"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/profile_image_view_layout"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="20dp"
        android:ems="15"
        android:hint="@string/name_field"
        android:inputType="text" />
Tarsem Singh
  • 14,139
  • 7
  • 51
  • 71
  • I tried your code. but all the border are removed from the editText. But in my case i want a blue line at the bottom of edit text as shown in screen shot – Rahul Jul 03 '13 at 13:45
  • 1
    But the EditText body change to black color..how to make it transparent. Actually on focus of EditText i want to show blue color and when focus is removed from edit text i want to show gray color..how that can be done – Rahul Jul 03 '13 at 13:54
  • 1
    This strategy wont work if you want a transparent backround, and solid color lines – Josh May 12 '14 at 14:00
29

You have a few options.

  1. Use Android assets studios Android Holo colors generator to generate the resources, styles and themes you need to add to your app to get the holo look across all devices.

  2. Use holo everywhere library.

  3. Use the PNG for the holo text fields and set them as background images yourself. You can get the images from the Android assets studios holo color generator. You'll have to make a drawable and define the normal, selected and disabled states.

UPDATE 2016-01-07

This answer is now outdated. Android has tinting API and ability to theme on controls directly now. A good reference for how to style or theme any element is a site called materialdoc.

Ali
  • 12,354
  • 9
  • 54
  • 83
  • If i change the theme holo everywhere.Then its work, but how to change the color of box based on my own color. I mean to say now i change the theme to holo. So the edit text show gray line when not focussed and show blue line when focus, so how that color can be customized – Rahul Jul 03 '13 at 13:40
  • that is just a background image on the whole activity or fragment... if you need it to be the background to the edittext i'm afraid you'll have to extend edittext. – Ali Jul 03 '13 at 14:46
  • @Ali hey when i use you 3rd suggestion my drawable looks streched when i set as backgroud of the EditText. – anshul Oct 13 '13 at 07:56
  • @anshul the images should be patch-9 images. – Ali Oct 13 '13 at 16:50
  • especially the link to materialdoc was very helpful for me, here the link to the entry with the editText, http://www.materialdoc.com/edit-text/ – Elementary Aug 22 '17 at 15:33
  • The link was deprecated when vectors started to become more common, it can be found [here](https://romannurik.github.io/AndroidAssetStudio/) now. But as mentioned in the update, you either use tinting now, or use style or theme elements as shown on the materialdoc page. – Ali Sep 24 '19 at 04:31
11

I solved the same issue 10 minutes ago, so I will give you a short effective fix: Place this inside the application tag or your manifest:

 android:theme="@android:style/Theme.Holo"

Also set the Theme of your XML layout to Holo, in the layout's graphical view.

Libraries will be useful if you need to change more complicated theme stuff, but this little fix will work, so you can move on with your app.

Deepzz
  • 4,573
  • 1
  • 28
  • 52
Josh
  • 6,251
  • 2
  • 46
  • 73
6

edittext_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/edittext_pressed" android:state_pressed="true" /> <!-- pressed -->
    <item android:drawable="@drawable/edittext_disable" android:state_enabled="false" /> <!-- focused -->
    <item android:drawable="@drawable/edittext_default" /> <!-- default -->
</selector>

edittext_default.xml

       <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#BBDEFB" />
            <padding android:bottom="2dp" />
        </shape>
    </item>
    <item android:bottom="5dp">
        <shape android:shape="rectangle" >
            <solid android:color="#fff" />

            <padding
                android:left="0dp"
                android:right="0dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#fff" />
        </shape>
    </item>
</layer-list>

edittext_pressed.xml

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#00f" />
            <padding android:bottom="2dp" />
        </shape>
    </item>
    <item android:bottom="5dp">
        <shape android:shape="rectangle" >
            <solid android:color="#fff" />

            <padding
                android:left="0dp"
                android:right="0dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#fff" />
        </shape>
    </item>

</layer-list>

edittext_disable.xml

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
        <item>
            <shape android:shape="rectangle" >
                <solid android:color="#aaaaaa" />
                <padding android:bottom="2dp" />
            </shape>
        </item>
        <item android:bottom="5dp">
            <shape android:shape="rectangle" >
                <solid android:color="#fff" />

                <padding
                    android:left="0dp"
                    android:right="0dp" />
            </shape>
        </item>
        <item>
            <shape android:shape="rectangle" >
                <solid android:color="#fff" />
            </shape>
        </item>

    </layer-list>

it works fine without nine-patch Api 10+ enter image description here

Samet ÖZTOPRAK
  • 3,112
  • 3
  • 32
  • 33
5

I use the below code . Check if it helps .

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#00f" />
            <padding android:bottom="2dp" />
        </shape>
    </item>
    <item android:bottom="10dp">
        <shape android:shape="rectangle" >
            <solid android:color="#fff" />

            <padding
                android:left="2dp"
                android:right="2dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#fff" />
        </shape>
    </item>
</layer-list>
demongolem
  • 9,474
  • 36
  • 90
  • 105
  • You can explain whats going on what and was the problem? – Rahil Wazir Feb 04 '14 at 14:56
  • 3
    Problem : somebody wants to have that style but does not want an image . This Solution : Get a box of color you want , then hide part of it with a different color box (in this case has to be same with background color, transparency will not work in here) to get the shape you need. Why I do this , it lets me change my text box color as I want , for image I would have needed to create all those colored images . –  Feb 09 '14 at 05:58
0

Now For AppCompatEditText

Note: We need to use app:backgroundTint instead of android:backgroundTint

<android.support.v7.widget.AppCompatEditText
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="Underline color change"
    app:backgroundTint="@color/blue_gray_light" />
MilapTank
  • 9,988
  • 7
  • 38
  • 53