Home > Software engineering >  Shadow for EditText Android
Shadow for EditText Android

Time:10-29

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 .

  • Related