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.

Answer 1

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>

Answer 2

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.

Answer 3

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>

Answer 4

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.

Answer 5

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.