Edit text with a round corner and shadow.

Question

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

This image has an edittext with a round corner and an inner shadow on top. I tried a lot, but did not manage to get the shadow inside the edittext.

I searched for this topic, but all the examples show a shadow outside the border of the edittext. I have no idea how I can achieve this.

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

Answer 1

put the below style.xml in your drawing folder

style.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:state_focused="true"> <shape> <stroke android:width="2.3dp" android:color="#F6EBC9" /> <corners android:radius="10dp" /> </shape> </item> <item android:state_pressed="true" android:state_focused="false"> <shape> <stroke android:width="2.3dp" android:color="#F6EBC9" /> <corners android:radius="10dp" /> </shape> </item> <item android:state_pressed="false" android:state_focused="true"> <shape> <stroke android:width="0.7dp" android:color="#000000" /> <corners android:radius="15dp" /> </shape> </item> <item android:state_pressed="false" android:state_focused="false"> <shape> <gradient android:startColor="#F6EBC9" android:centerColor="#F6EBC9" android:endColor="#F6EBC9" android:angle="270" /> <stroke android:width="0.7dp" android:color="#000000" /> <corners android:radius="15dp" /> </shape> </item> <item android:state_enabled="true"> <shape> <padding android:left="4dp" android:top="4dp" android:right="4dp" android:bottom="4dp" /> </shape> </item> </selector> 

and in your XML file inside the edittext tag, apply this android: background = "@ drawable / style" adjust the start, end and center colors inside the gradient instyle.xml tag to make the shadow effect inside your edit text

Answer 2

Just create an xml file in the drawable folder name as round_corner.xml . And add the 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> 

Finally, you add this xml to the 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.

Answer 3

It turned out 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> 

Answer 4

You can set a shape that can be selected (rectangle) as the background for the view.

 <TextView android:text="Some text" android:background="@drawable/back"/> 

And the drawable rectangle back.xml (placed in the res / drawable folder):

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <solid android:color="#ffffff" /> <stroke android:width="1dip" android:color="#4fa5d5"/> </shape> 

You can use # 00000000 for a solid color to have a transparent background. You can also use padding to branch text from the border. for more information see: http://developer.android.com/guide/topics/resources/drawable-resource.html

Answer 5

1.) Create a rounded_edittext.xml file in a portable 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 the code below in the styles.xml file located in the 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 to edittext in the 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> 

Answer 6

if you want to make border in EditText Round and curve, then just paste this code into 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 file this file is like

  android:background="@+drawable/mystyle"