如何使用Bottm阴影创建textinputlayout

时间:2019-10-16 12:31:50

标签: android android-textinputlayout material-components material-components-android android-textinputedittext

如何创建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>

2 个答案:

答案 0 :(得分:0)

使用边距代替填充,并将高程添加到textinputlayout ,然后从edittext中删除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>

答案 1 :(得分:0)

使用其他内容。
不要在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>

enter image description here

如果不需要阴影,请使用带有圆角的标准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>

enter image description here enter image description here