Material Design 中的大纲编辑文本

Question

我怎样才能实现一个概述的文本字段（如 这个材料设计页面 所示）？

原文由 andreikashin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

阅读 Outline Box 。

大纲文本字段有一个描边边框并且不太强调。要使用大纲文本字段，请将以下样式应用于您的 TextInputLayout：

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

依赖项

implementation 'com.android.support:design:28.0.0-alpha1'

XML

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

   <android.support.design.widget.TextInputEditText
       android:id="@+id/name_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:hint="@string/label_name" />
</android.support.design.widget.TextInputLayout>

DEMO

供参考

旧版支持在 Android 28 中结束。现在继续使用

implementation 'com.google.android.material:material:1.3.0'

原文由 IntelliJ Amiya 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="300dp"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_gravity="center_horizontal"
    android:layout_height="wrap_content">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:hint="First Name"/>
 </com.google.android.material.textfield.TextInputLayout>

原文由 Vyk 发布，翻译遵循 CC BY-SA 4.0 许可协议