Edit text with round corner and shadow

Question

I am trying to achieve the effect which is shown in this following image:

enter image description here

In this image there is an edittext with round corner and internal shadow at top. I tried a lot but not success in getting shadow inside edittext.

I searched on this topic but all examples show shadow outside edittext border. I have no idea how can I achieve this.

The button and background image is already done, The only thing which is left is edittext shadow. If someone has already done this or know how to do this please share with me. Any help whould be appreciated.

create a desired image and set it as a background of Edittext (9 patch image will be preferable) — Juned, Jan 02 '13 at 13:15
so now you just want give a shadow to that `Editext` right ? — Juned, Jan 02 '13 at 13:26
`android:shadowColor ="#0f0f0f" android:shadowRadius="1.6" android:shadowDx="1.5" android:shadowDy="1.3"` — RobinHood, Jan 02 '13 at 13:37

score 6 · Answer 1 · answered Jul 02 '16 at 06:52

Got like this

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
        <gradient
            android:centerY="0.2"
            android:startColor="#FFBDBDBD"
            android:centerColor="#65FFFFFF"
            android:endColor="#00FFFFFF"
            android:angle="270"
            />
        <stroke
            android:width="1dp"
            android:color="#C3C3C3" />
        <corners
            android:radius="25dp" />
</shape>

Born To Win · Answer 2 · 2014-06-16T04:50:07.463

5

Just create an xml file in your drawable folder name as round_corner.xml.And add this following code.

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

    <corners
        android:radius="3dp"
       />
    <solid
        android:color="@android:color/white"/>

</shape>

At Last you add this xml in background property of your Edittext as follows:-

 <EditText
    android:id="@+id/ed1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/round_corner"
  />

Done..Definitely it works..

edited Jun 16 '14 at 04:50

answered Oct 29 '13 at 05:38

Born To Win

3,319
3
19
27

2

When you have radius you already handle bottomLeft, bottomRight, topLeft and topRight. So you can remove those. – Loolooii Dec 02 '13 at 14:11

score 1 · Answer 3 · answered Jun 27 '14 at 06:47

1.) Create rounded_edittext.xml file in drawable folder

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

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

  <stroke android:width="1dip" android:color="#FF0000" />  
</shape>

2.) Put below code in styles.xml file placed in values folder

<style name="largeEdittextText">
    <item name="android:textAppearance">@android:style/TextAppearance.Large.Inverse</item>
    <item name="android:textSize">15dp</item>
    <item name="android:singleLine">true</item>
    <item name="android:paddingTop">8dp</item>
    <item name="android:paddingBottom">8dp</item>
    <item name="android:paddingLeft">5dp</item>
    <item name="android:background">#FFB90F</item>
    <item name="android:textColor">@android:color/black</item>
</style>

3.) Apply both on edittext in layout file

<EditText
android:id="@+id/userName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center_horizontal"
android:hint="@string/login_userHint"
android:text="admin"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:singleLine="true"
android:textAppearance="@style/largeEdittextText"
android:background="@drawable/rounded_edittext">
</EditText>

score 0 · Answer 4 · answered Mar 03 '16 at 04:06

if you want to make the border of EditText Round and curve, then just paste this code in Drawable/mystyle.xml (create this xml file) .

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:thickness="0dp"
  android:shape="rectangle">
  <stroke android:width="1dp"
    android:color="#c8c8c8"/>
   <corners android:radius="11dp" />
</shape>

Now in your EditText link this file as

 android:background="@+drawable/mystyle"

Edit text with round corner and shadow

4 Answers4