How to create textinputlayout with bottm shadow

Question

How to create TextInputLayout shadow, I have created but the hint is displayed bottom off and then I am editing the edit text then both are text center and also attach shadow login code Please let me know if you any question . Please sees this image Thank in advance

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical">

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_marginStart="@dimen/_10sdp"
    android:layout_marginEnd="@dimen/_10sdp"
    android:background="@drawable/shadow_login"
    android:padding="@dimen/_10sdp"
    android:layout_height="wrap_content">


    <androidx.appcompat.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="test"
        android:background="@null" />
</com.google.android.material.textfield.TextInputLayout>

My code output is

My shadow_login code is below

<?xml version="1.0" encoding="utf-8"?>

<item>
    <shape>
        <padding
            android:bottom="1dp"
            android:left="0.5dp"
            android:right="0.5dp"
            android:top="0.5dp" />
        <solid android:color="#00CCCCCC" />
        <corners android:radius="@dimen/_30sdp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            android:bottom="1dp"
            android:left="0.5dp"
            android:right="0.5dp"
            android:top="0.5dp" />

        <solid android:color="#10CCCCCC" />
        <corners android:radius="@dimen/_30sdp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            android:bottom="1dp"
            android:left="0.5dp"
            android:right="0.5dp"
            android:top="0.5dp" />

        <solid android:color="#20CCCCCC" />

        <corners android:radius="@dimen/_30sdp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            android:bottom="1dp"
            android:left="0.5dp"
            android:right="0.5dp"
            android:top="0.5dp" />

        <solid android:color="#30CCCCCC" />

        <corners android:radius="@dimen/_30sdp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            android:bottom="1dp"
            android:left="0.5dp"
            android:right="0.5dp"
            android:top="0.5dp" />

        <solid android:color="#50CCCCCC" />

        <corners android:radius="@dimen/_30sdp" />
    </shape>
</item>


<item>
    <shape>
        <solid android:color="@android:color/white" />
        <corners android:radius="@dimen/_30sdp" />


    </shape>
</item>

It doesn't solve your question but use `com.google.android.material.textfield.TextInputEditText` instead of `AppCompatEditText` — Gabriele Mariotti, Oct 16 '19 at 13:52
@GabrieleMariotti But I have display hint when user click on edittext — Jaydeep, Oct 16 '19 at 13:56
@Jaydeep The `TextInputEditText` extends the `AppCompatEditText`. And set the `android:hint` in the TextInputLayout instead of EditText — Gabriele Mariotti, Oct 16 '19 at 13:59
@GabrieleMariotti I have used this solution but It's not working. — Jaydeep, Oct 16 '19 at 14:10
@Jaydeep Just read the 1st comment: it doesn't solve your issue... — Gabriele Mariotti, Oct 16 '19 at 14:11
@GabrieleMariotti Yes sir, When user click on edit text then the label is animation bottom to top — Jaydeep, Oct 16 '19 at 14:13

SebastienRieu · Answer 1 · 2019-10-16T13:48:30.217

use margin instead of padding and add elevation to textinputlayout , and remove background="@null" from edittext

try this

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    >

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@drawable/shadow_login">

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_marginStart="@dimen/_10sdp"
            android:layout_marginEnd="@dimen/_10sdp"
            android:layout_margin="@dimen/_10sdp"
            android:elevation="8dp"
            android:layout_height="wrap_content">


            <androidx.appcompat.widget.AppCompatEditText
               android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/shadow_login"
                android:hint="test" />
        </com.google.android.material.textfield.TextInputLayout>

    </LinearLayout>

</LinearLayout>

and the background shape must only be :

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

    <solid android:color="#20CCCCCC" />

    <corners android:radius="@dimen/_30sdp" />


</shape>

your drawable background seems to be too complex, try mine (updated response) — SebastienRieu, Oct 16 '19 at 13:28
I have try your background shape but the problem is either user not type any input then hint displayed is bottom — Jaydeep, Oct 16 '19 at 13:38

Gabriele Mariotti · Answer 2 · 2019-10-16T14:36:03.313

Use something different.
Don't use the background in the TextInputLayout but wrap the component in a layout with this kind of background (a simple LinearLayout but consider for example also a CardView)

Something like:

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:background="@drawable/shadow_login">

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="CVV"
        android:paddingTop="4dp"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:paddingBottom="2dp"
        app:boxStrokeWidth="0dp"
        app:boxStrokeColor="#FFFFFF"
        app:boxBackgroundColor="#FFFFFF"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        >

        <com.google.android.material.textfield.TextInputEditText
            ../>

    </com.google.android.material.textfield.TextInputLayout>

If the shadow is not a requirement just use a standard OutlinedBox with rounded corners (with your favorite colors and dimens).

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="CVV"
    app:shapeAppearanceOverlay="@style/Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    >

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

</com.google.android.material.textfield.TextInputLayout>

with the shape defined by:

  <style name="Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

But In this solution hint and text are not center in the background. — Jaydeep, Oct 16 '19 at 14:32
If you are referring to a vertical alignment , in 2nd case no, in the 1st yes, you can use gravity as you prefer. — Gabriele Mariotti, Oct 16 '19 at 14:34

How to create textinputlayout with bottm shadow

2 Answers2