如何制作TextInputLayout的edittext圆角的下划线

问题描述

我想在 Material Design 的 TextInputLayout Filled Text 中制作底线的圆角。我可以在聚焦和非聚焦模式下更改它的颜色，但如何将它的角更改为圆形。 这就是我现在所拥有的-

我正在寻找以下结果-

这是我尝试但没有做太多的代码 -

    <com.google.android.material.textfield.TextInputLayout
        app:shapeAppearanceOverlay="@style/Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout.FilledBox"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        app:BoxstrokeColor="@color/selector_otp_input_Box_stroke_color"
        app:BoxstrokeWidth="6dp"
        app:BoxCornerRadiusBottomEnd="5dp"
        app:BoxCornerRadiusBottomStart="5dp"
        app:BoxCornerRadiusTopEnd="5dp"
        app:BoxCollapsedPaddingTop="5dp"
        app:BoxstrokeWidthFocused="6dp">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:cursorVisible="false"
            android:digits="1234567890"
            android:inputType="number"
            android:textSize="40sp"
            android:textIsSelectable="false"
            android:maxLength="1"
            android:maxLines="1"
            android:backgroundTint="@color/colorPrimary"/>

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

样式 Rounded_ShapeAppearanceOverlay

<style name="Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout.FilledBox"
        parent="Widget.MaterialComponents.TextInputLayout.FilledBox">

    <item name="cornerSizeBottomLeft">4dp</item>
    <item name="cornerSizeBottomright">4dp</item>
</style>

任何工作将不胜感激，谢谢

解决方法

对于曲线按照下面的代码 对于布局

<com.google.android.material.textfield.TextInputEditText
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:cursorVisible="false"
        android:digits="1234567890"
        android:inputType="number"
        android:textSize="40sp"
        android:textIsSelectable="false"
        android:maxLength="1"
        android:maxLines="1"
        android:textAlignment="center"
        android:layout_marginStart="10dp"
        android:backgroundTint="@color/focus_tint"
        android:background="@drawable/underline"/>

将此添加到您的 TextInputEditText

android:backgroundTint="@color/focus_tint"
android:background="@drawable/underline"

下划线.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:gravity="bottom">
        <shape>
            <size android:height="4dp" />
            <solid android:color="#000000" />
            <corners android:radius="50dp"/>
        </shape>
    </item>
</layer-list>

focus_tint.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:color="@color/teal_200"/>
    <item android:state_focused="false" android:color="@color/black"/>

</selector>