Effect in EditText from xml

Question

I am trying to give shadow effect as shown below to edittext

realpassowrd

but i am unable to do it. Below is what i have done till now

enter image description here

My code are as follow:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background" >

 <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true" >

    <LinearLayout
        android:id="@+id/layout_linear_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/img_6parcels"
        android:layout_centerInParent="true"
        android:layout_marginBottom="10dp"
        android:background="@drawable/screen_background"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingBottom="20dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="20dp" >

        <EditText
            android:id="@+id/edit_text_domain"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:hint="Domain"
            android:paddingBottom="3dp"
            android:background="@drawable/edittext_shadow" 
            android:paddingTop="3dp">
            <requestFocus />
        </EditText>

        <ImageView
            android:id="@+id/address"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginBottom="3dp"
            android:layout_marginTop="3dp"
            android:src="@drawable/slice_address_transparent" />

        <EditText
            android:id="@+id/edit_text_invinzee"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="@drawable/edittext_shadow" 
            android:gravity="center"
            android:hint="Invinzee"
            android:paddingBottom="3dp"
            android:paddingTop="3dp" />

        <EditText
            android:id="@+id/edit_text_password"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="@drawable/edittext_shadow"
            android:gravity="center"
            android:hint="Password"
            android:inputType="textPassword"
            android:paddingBottom="3dp"
            android:paddingTop="3dp" />

        <Button
            android:id="@+id/log_in_Button"
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:layout_marginTop="25dp"
            android:gravity="center"
            android:text="LOGIN" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/img_6parcels"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="20dp" >

        <ImageView
            android:id="@+id/parcel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:src="@drawable/six3_03" />
    </LinearLayout>

    <TextView
        android:id="@+id/text_delivery"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/layout_linear_login"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:text="Perfect Job"
        android:textColor="#353f41" />
</RelativeLayout>

</RelativeLayout>

My edittext_shadow.xml is as follow:

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

<!-- most important is order of layers -->

<!-- Bottom right side 2dp Shadow -->
<item >
    <shape android:shape="rectangle">
        <solid android:color="#660099" />           
    </shape>
</item>

<!-- Bottom 2dp Shadow -->
<item>
    <shape android:shape="rectangle">
        <solid android:color="#660099" />   
    </shape>
</item>

<!-- White Top color -->
<item android:top="-3px" android:left="-3px">
    <shape android:shape="rectangle">
        <solid android:color="#86ae0b" />  

    </shape>
</item> 
</layer-list>

I tried as shown in this link Add drop shadow effects to EditText Field but unable to accomplish it.

Any Help!!!

You need to lay with 1) android:shadowColor 2)android:shadowDx 3)android:shadowDy 4)android:shadowRadius — Hardik Trivedi, Nov 11 '13 at 12:17
Aren't these for the content of edittext rather than edittext design???? — surhidamatya, Nov 12 '13 at 04:44
Yea it is. This post has solution http://stackoverflow.com/questions/10850726/add-drop-shadow-effects-to-edittext-field — Hardik Trivedi, Nov 12 '13 at 04:51
yeah i had viewed that post but was unable to apply it to mine problem — surhidamatya, Nov 12 '13 at 04:54

surhidamatya · Accepted Answer · 2021-07-30T04:04:28.543

Thanks, Guys For helping.

Mixing code from Add drop shadow effects to EditText Field and answer from babar sanah I was able to find the solution.

My solution is as below:

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

<!-- most important in order of layers -->

<!-- Bottom right side 2dp Shadow -->
<item >
    <shape android:shape="rectangle">
        <gradient
    android:angle="270"
    android:endColor="#333333"
     android:centerColor="#86ae0b"
    android:startColor="#666666" />          
    </shape>
</item>

<!-- Bottom 2dp Shadow -->
<item>
    <shape android:shape="rectangle">
        <gradient
    android:angle="270"
    android:endColor="#333333"
     android:centerColor="#86ae0b"
    android:startColor="#666666" />
    </shape>
</item>

<!-- White Top color -->
<item android:top="5px" android:left="5px">
    <shape android:shape="rectangle">
        <gradient
    android:angle="-90"
    android:endColor="#333333"
     android:centerColor="#86ae0b"
    android:startColor="#666666" />
      
    </shape>
</item> 
</layer-list>

Thanks alot for the help it means a lot to me.

I would suggest, If you get solved your problem, Please! make a Green Tick mark to this solution, So It will help other too. Thanks :) — swiftBoy, Nov 13 '13 at 11:21
yeah i was about to tick mark the solution but had to wait for 3 hrs so late. — surhidamatya, Nov 13 '13 at 11:25

score 1 · Answer 2 · answered Nov 12 '13 at 11:22

1

Why you didn't try gradient? If it is possible please let me know..

 <gradient
        android:angle="270"
        android:centerColor="@color/shadow_alpha"
        android:endColor="@color/shadow_alpha1"
        android:startColor="@color/shadow_alpha2" />

Define the colors as per your need..

answered Nov 12 '13 at 11:22

Sripathi

1,760
15
20

2

Create new drawable shape. Refer http://www.vogella.com/articles/AndroidDrawables/article.html and http://developer.android.com/guide/topics/resources/drawable-resource.html – Sripathi Nov 12 '13 at 16:51
Ok, i did as your suggestion but it only gives the effect in in bottom. i want it to be in top and left side. – surhidamatya Nov 13 '13 at 04:50
2

The startColor indicates the top of the rect, endColor indicates the bottom of rect. It changed based on the angle we using.. So swap the colors codes of startColor and endColor or invert the angle.... That's it.. – Sripathi Nov 13 '13 at 05:29

score 1 · Answer 3 · edited Nov 15 '18 at 09:16

1

create an xml shape.xml put in drawable folders and give your edit text background

android:background="@drawable/shape"

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle" 
      android:padding="10dp">
    <!-- you can use any color you want I used here gray color-->
    <gradient android:angle="-90"
          android:endColor="#436EEE" 
          android:startColor="#436EEE"
          android:centerColor="#4876FF" />        
</shape>

edited Nov 15 '18 at 09:16

barbsan

3,418
11
21
28

answered Nov 12 '13 at 11:43

Babar Sanah

533
1
7
13

1

i did as your suggestion but it gave effect on bottom only i want it to be in top and right side – surhidamatya Nov 13 '13 at 04:51

Effect in EditText from xml

3 Answers3

Linked