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

Question

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.

Solution 1

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.

Solution 2

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.

Solution 3

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.

Solution 4

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>

View more solutions

Comments

[Aamir Shah]

how to use it... i have created the above xml file as res/drawable/edittext ... how do i actually use the above code .... Thanks

[Laksh]

android:background="@drawable/yourXml"

[Aamir Shah]

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]

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]

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]

android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp" are ineffective .... i.e. still the bottom two corners are rounded.... Any ideas.... Thanks

[Siddharth Lele]

@AamirShah: This works just perfect in two of my apps. Which API are you testing this on?

[Aamir Shah]

I'm trying on Android 2.2... i guess its is a bug 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

[mihirjoshi]

try removing those two lines instead of setting them 0dp.

[Siddharth Lele]

@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.

[Aamir Shah]

very true... works fine in device... but nothing is shown in graphical layout....

[Mike T]

Upvoted for the stroke and padding shown (regardless of correct corners)