Как создать textinputlayout с нижней тенью

Question

Как создать тень TextInputLayout, я создал ее, но подсказка отображается снизу, а затем я редактирую текст редактирования, тогда оба текста расположены по центру, а также прикрепляют теневой код входа в систему. Пожалуйста, дайте мне знать, если у вас возникнут вопросы. Пожалуйста, смотрите это изображение Заранее благодарны

<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>

Мой код выводится

Мой код shadow_login ниже

<?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>

Answer 1

Используйте что-то другое.
Не используйте фон в TextInputLayout, но оберните компонент в макете с этим фоном (простой LinearLayout, но рассмотрите, например, также CardView)

Что-то вроде:

<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>

Если тень не требуется, просто используйте стандартный OutlinedBox с закругленными углами (с вашими любимыми цветами и размерами).

<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>

с формой, определяемой как:

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

Answer 2

используйте поле вместо отступа и добавьте высоту для textinputlayout и удалите background = "@ null" из edittext

попробуйте это

<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>

и фонформа должна быть только:

<?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>