如何使用底部阴影创建 textinputlayout

Question

如何创建 TextInputLayout 阴影，我已经创建，但提示显示在底部，然后我正在编辑编辑文本，然后都是文本中心并附加阴影登录代码如果您有任何问题，请告诉我。 Please sees this image 提前致谢

<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

我的 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"

试试这个

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