I need to create a shadow for EditText as shown here - design . I was able to partially recreate the same using the code below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SignupActivity">
<ImageView
android:id="@ id/signinPageLogo"
android:layout_width="171dp"
android:layout_height="160dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="132dp"
android:src="@drawable/dummy_logo" />
<TextView
android:id="@ id/signinAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@ id/signinPageLogo"
android:layout_centerHorizontal="true"
android:text="@string/welcomePageText1"
android:textSize="30sp"
android:textStyle="bold" />
<androidx.cardview.widget.CardView
android:id="@ id/signinEmailIdCardView"
android:layout_width="234dp"
android:layout_height="73dp"
android:layout_below="@ id/signinAppName"
android:layout_centerHorizontal="true"
android:layout_marginStart="6dp"
android:layout_marginTop="109dp"
android:layout_marginEnd="6dp"
android:outlineSpotShadowColor="@color/teal_700"
android:layout_marginBottom="10dp"
app:cardCornerRadius="10dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="true">
<EditText
android:id="@ id/signinEmailId"
android:layout_width="211dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/rounded_edittext"
android:hint="@string/signinPageText1"
android:inputType="textEmailAddress"
android:padding="10dp" />
</androidx.cardview.widget.CardView>
<com.google.android.material.textfield.TextInputLayout
android:id="@ id/signinPassword"
android:layout_width="211dp"
android:layout_height="wrap_content"
android:layout_below="@id/signinEmailIdCardView"
android:layout_centerHorizontal="true"
app:boxBackgroundColor="@color/white"
app:boxBackgroundMode="none"
app:hintEnabled="false"
app:passwordToggleDrawable="@drawable/show_password_selector"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/signinPageText2"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
<TextView
android:id="@ id/signinForgotPass"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@ id/signinPassword"
android:layout_alignEnd="@id/signinPassword"
android:text="@string/signinPageText3" />
<androidx.appcompat.widget.AppCompatButton
android:id="@ id/signinButton"
android:layout_width="256dp"
android:layout_height="64dp"
android:layout_below="@ id/signinForgotPass"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:background="@drawable/button_style"
android:gravity="center"
android:text="@string/welcomePageText1"
android:textAllCaps="false" />
</RelativeLayout>
But I need to increase the shadow length to get the correct effect. The design I am able to produce now - my design
The android:outlineSpotShadowColor is limited to above 28 api only. so is there any other alternative for this? Please advice to get this shadow effect properly.. Thanks a lot!
CodePudding user response:
You can try using the "elevation" property. Here is the documentation: https://developer.android.com/training/material/shadows-clipping .
To change the color you will need to use Carbon (https://github.com/ZieIony/Carbon). You could also see this answer: Android change Material elevation shadow color .