How to create rounded edit text as is given in the pic

Question

enter image description here

Can anybody tell me how to set the upper two corners of the edit text as rounded (user name) and the below two corners of email rounded.

Siddharth Lele · Accepted Answer · 2012-12-25T05:53:31.717

7

You will need two shape drawable files.

For the top EditText, call this, top_edittext_bg:

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

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

    <corners
        android:radius="1dp"
        android:bottomLeftRadius="0.1dp"
        android:bottomRightRadius="0.1dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" >
    </corners>

</shape>

And for the bottom EditText, call it for example, bottom_edittext_bg:

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

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

    <corners
        android:radius="1dp"
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="0.1dp"
        android:topRightRadius="0.1dp" >
    </corners>

</shape>

And then set these in the android:background="@drawable/RESPECTIVE_XMLS" attribute to the relevant EditText's.

edited Dec 25 '12 at 05:53

answered Dec 25 '12 at 05:23

Siddharth Lele

27,623
15
98
151

android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp" are ineffective .... i.e. still the bottom two corners are rounded.... Any ideas.... Thanks – Aamir Shah Dec 25 '12 at 05:40
@AamirShah: This works just perfect in two of my apps. Which API are you testing this on? – Siddharth Lele Dec 25 '12 at 05:42
I'm trying on Android 2.2... i guess its is a bug http://code.google.com/p/android/issues/detail?id=939 which was fixed in Android 3.1.... So can u suggest any work arounds for lower android versions... Thanks – Aamir Shah Dec 25 '12 at 05:46
1

@AamirShah: As per a few comments in the bug you have linked to, some people have sound success in implementing the code a little differently. Try the changes in edited answer. – Siddharth Lele Dec 25 '12 at 05:54

score 5 · Answer 2 · edited May 23 '17 at 10:28

Before going to put question here search for your requirement.

There are lots of example for your requirement. See here, here and here etc...

Anyway let me answer also,

You need to create shape.xml in the drawable folder.

    <?xml version="1.0" encoding="UTF-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke 
        android:width="1dp" 
        android:color="#505050"/>
    <corners 
        android:radius="7dp" />

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

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

</shape>

After that Simply set it to the Background of your LilnearLayout. Nothing to do with EditText if you want to achive the above like layout.

e. g.

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:background="@drawable/shape"
        android:orientation="vertical"
        android:padding="5dp" >

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:textStyle="bold"
            android:text="Sign In" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:textColor="#ffffff"
            android:text="Sign Up" />
    </LinearLayout>

Just do like above explaination and let me know about your suggestion or output.

Hope you got my Point.

Update

If you want just EditText like above Layout then you have to made two shape files name as username_shape.xml and email_shape.xml

username_shape.xml is like below:

    <?xml version="1.0" encoding="UTF-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke 
        android:width="1dp" 
        android:color="#505050"/>
    <corners 

        android:topLeftRadius="7dp"
        android:topRightRadius="7dp" 
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"/>

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

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

</shape>

And another file email_shape.xml is like below:

    <?xml version="1.0" encoding="UTF-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke 
        android:width="1dp" 
        android:color="#505050"/>
    <corners 

        android:topLeftRadius="0dp"
        android:topRightRadius="0dp" 
        android:bottomLeftRadius="7dp"
        android:bottomRightRadius="7dp"/>

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

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

</shape>

Now, set the background of the usename with username_shape.xml and do same for the email but set file email_shape.xml.

Please concentrate on both the file. I have done changes in the <corners ... />

Hope this will help you. as i have allready done it and it works for me.

this is not the answer... look at the fig above... the two edit texts are combined such that the above one has upper two rounded corner and the lower edit text text has below two round corners... Also the point at which the two edit text meet there is no rounding off.... Any ways thanks... — Aamir Shah, Dec 25 '12 at 05:28
Upvoted for the stroke and padding shown (regardless of correct corners) — Mike T, Jun 05 '15 at 18:00

mihirjoshi · Answer 3 · 2012-12-25T05:29:27.483

4

Customize your EditText.Modify this line android:shape="rectangle". Follow this Link for more information.

<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>
</selector>

Try this-

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
 <solid android:color="#FFFFFF"/>
    <corners
     android:bottomRightRadius="8dp"
     android:bottomLeftRadius="8dp"
  android:topLeftRadius="8dp"
  android:topRightRadius="8dp"/>
</shape>

It will do it for you.

edited Dec 25 '12 at 05:29

answered Dec 25 '12 at 05:08

mihirjoshi

12,161
7
47
78

how to use it... i have created the above xml file as res/drawable/edittext ... how do i actually use the above code .... Thanks – Aamir Shah Dec 25 '12 at 05:16
`android:background="@drawable/yourXml"` – Laksh Dec 25 '12 at 05:19
that i know... but nothing is happening.... i change ur code (color = #ffffff) coz the background is black... but no effect... infact the default background of the edit text is also gone.... – Aamir Shah Dec 25 '12 at 05:21
ya the background is coming... but for the upper edit text i don't wont the radius so i tried android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp" but still it is showing the rounded corners at the bottom. For the upper edit text only upper two two corners should be rounded.... Thanks – Aamir Shah Dec 25 '12 at 05:38
try removing those two lines instead of setting them 0dp. – mihirjoshi Dec 25 '12 at 05:46

score 1 · Answer 4 · answered Dec 25 '12 at 05:47

save this in drawable with style bottem.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="#FF00FF00" />

                <corners
                    android:bottomLeftRadius="40dp"
                    android:bottomRightRadius="40dp" />
            </shape>
        </item>

    </layer-list>

very true... works fine in device... but nothing is shown in graphical layout.... — Aamir Shah, Dec 25 '12 at 06:49

score 0 · Answer 5 · answered Mar 02 '14 at 03:07

probably this code should run. for username Edit-text make new XML file and save it in draw-able naming "corners_top" and copy paste this code.

    <?xml version="1.0" encoding="UTF-8"?>
   <shape 
    xmlns:android="http://schemas.android.com/apk/res/android">
<stroke 
    android:width="1dp" 
    android:color="#505050"/>
    <corners 
    android:radius="5dp"
    android:bottomRightRadius="0dp"
    android:bottomLeftRadius="0dp"
    android:topRightRadius="7dp"
    android:topLeftRadius="7dp" />

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

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

</shape>

And for the Email edit-text make another xml in drawable file naming "corner_bottom" and copy paste the code below.

<?xml version="1.0" encoding="UTF-8"?>
 <shape 
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke 
    android:width="1dp" 
    android:color="#505050"
    android:dashGap="2dp"/>
<corners 
    android:radius="5dp"
    android:bottomRightRadius="7dp"
    android:bottomLeftRadius="7dp"
    android:topRightRadius="0dp"
    android:topLeftRadius="0dp" />

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

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

</shape>

How to create rounded edit text as is given in the pic

5 Answers5