如何制作这种类型的自定义 EditText UI？答案

【问题标题】：How can I make this type of custom EditText UI?如何制作这种类型的自定义 EditText UI？
【发布时间】：2019-04-13 07:52:42
【问题描述】：

我正在尝试在编辑文本上添加边框并在其上添加标签。我试过这个。

<stroke
    android:width="2dp"
    android:color="@color/colorPrimary"/>
<corners android:radius="15dp"/>

但我想要以下一个。最初它看起来像这样。

点击后会是这个样子。

你能帮忙吗？

【问题讨论】：

标签： android user-interface android-edittext

【解决方案1】：

使用材质设计Outline Box style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

此链接可能对您有所帮助http://qaru.site/questions/1688917/custom-textinputlayout-android

【讨论】：

【解决方案2】：

正如@ZahoorSaleem 所说，您可以为此使用 MaterialComponents。您需要将design support library 添加到您的构建文件中。

布局将（简化）如下所示：

<TextInputLayout       
  android:hint="Label"
  style="style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <TextInputEditText />
</TextInputLayout>

【讨论】：

【解决方案3】：

put the below code in drawable and use this attribute in edittext
 android:background="@drawable/nameofdrawablefile"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#CC0505"/>
    <stroke android:width="2dp" android:color="#CC0505" />
    <corners android:radius="5dp" />
</shape>

【讨论】：