在Android应用程序中实现概述文本字段输入标签文字

Question

我想用浮动标签实现这种输入文本的布局，但是问题是当我运行应用程序时，它看起来不一样，标签出现在输入文本字段的上方。

但是，这是我的结果

我的代码是：

roundview.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="10dp" />

                <stroke
                    android:width="2dp"
                    android:color="#3bbdfa"
                    />
            </shape>
        </item>
    </selector>

<android.support.design.widget.TextInputLayout
    android:id="@+id/text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:errorEnabled="true">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/edittxt"
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:background="@drawable/roundview"
        android:fadeScrollbars="false"
        android:fadingEdge="vertical"
        android:foregroundGravity="fill_vertical"
        android:hint="name"
        android:isScrollContainer="false"
        android:requiresFadingEdge="vertical"
        android:singleLine="false"
        android:visibility="visible" />

</android.support.design.widget.TextInputLayout>

我遵循https://material.io/design进行文本字段设计，但是遇到了这个问题。

Answer 1

可以通过Widget.MaterialComponents.TextInputLayout.OutlinedBox在TextInputLayout.

<android.support.design.widget.TextInputLayout
        android:id="@+id/name_text_input"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:errorEnabled="true">
        <android.support.design.widget.TextInputEditText
            android:id="@+id/name_edit_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Name" />
    </android.support.design.widget.TextInputLayout>

您可以检查此答案，该答案也有指向示例的链接。