EditText with TextInputlayout layout With hint and Border

Question

我想要 EditText 如上图所示。问题是，如果我使用 TextInputLayout，它会在底部显示默认栏，我希望它周围有自定义边框。

我也试过使用下面的例子，

Answer 1

您可以使用矢量可绘制对象作为 TextView 的背景，也可以通过以下方法实现：

  <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">


        <LinearLayout
            android:id="@+id/input_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:background="@drawable/edittextround"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="40dp"
                android:includeFontPadding="false"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:visibility="invisible" />

            <EditText
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="30dp"
                android:layout_marginRight="10dp"
                android:maxLines="1"
                android:background="@android:color/transparent" />

        </LinearLayout>

        <View
            android:id="@+id/view"
            android:layout_width="match_parent"
            android:layout_height="40dp" />



            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="40dp"
                android:layout_alignBottom="@+id/view"
                android:background="@color/white"
                android:includeFontPadding="false"
                android:paddingBottom="10dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:text="Name"
                android:textColor="@color/colorPrimary"
                android:textAppearance="@android:style/TextAppearance.Medium" />
</RelativeLayout>

edittextround.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
            <corners android:radius="3dp" />
            <stroke android:width="1dp" android:color="@color/gray" />
        </shape>
    </item>

</selector>

Answer 2

使用 Material 设计大纲框样式

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

查看设计指南here

EditText with TextInputlayout layout With hint and Border

EditText with TextInputlayout layout With hint and Border

android

android-textinputlayout