自定义带边框的编辑文本框

Question

我正在尝试为编辑文本添加边框并在其上放置标签。我已经按照以下方式创建了边框：

 <?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="1dp"
        android:color="#A0A0A0" />
</shape>

我无法实现自己想要的结果。

我想要类似下面这样的东西：

请帮忙。

- Talib

Answer 1

查看此链接，获取创建您想要的新 Material Design 文本字段的指南。

https://material.io/design/components/text-fields.html#usage

- 如何使用：

要创建材料文本字段，请将 TextInputLayout 添加到您的 XML 布局中，并将 TextInputEditText 作为直接子元素添加。

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

  <com.google.android.material.textfield.TextInputEditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="@string/hint_text"/>

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

注意：您也可以使用EditText作为输入文本组件。但是，使用TextInputEditText允许TextInputLayout更好地控制输入文本的视觉方面-它允许TextInputLayout在“提取模式”（如横向模式）下在文本字段中显示提示。

- 对于样式：

填充框（默认）

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

轮廓框

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

更多信息，请查看此链接：

https://material.io/develop/android/components/text-input-layout/

我希望这可以帮到你。

- JannahPro

---

这应该是被接受的答案。 - Algar

OutlineBox еє”иЇҐж”№дёє OutlinedBoxгЂ‚ - rmtheis

Answer 2

试试这个：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="15dp"
        android:background="@drawable/boarder"
        android:paddingLeft="5dp"
        android:text="input" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="7dp"
        android:background="#ffffff"
        android:text="Label" />
</RelativeLayout>

boarder.xml :

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<stroke
    android:width="2dp"
    android:color="#03A6F0" />

<corners android:radius="12dp" />

- Quang Doan

---

同时分享drawable中的边框。 - Talib

我使用了你的边框 <?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <stroke android:width="1dp" android:color="#A0A0A0" /> </shape> - Quang Doan

Answer 3

I知道有点晚了，但你可能想看一下 这个 和 这个。

- Rahul Mishra

Answer 4

您可以在您的XML中尝试下面的代码。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#CDCDCE"
                android:orientation="vertical"
                android:padding="10dp">


    <EditText
        android:id="@+id/si_btnSignIn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/button_round_corner"
        android:padding="20dp"
        android:text="Inp"
        android:textColor="@color/white"/>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:background="#CDCDCE"
        android:gravity="center"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:text="Label"
        android:textColor="#741c7a"/>

</RelativeLayout>

以下是可绘制代码 button_round_corner。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">

<stroke
    android:color="#741c7a"
    android:width="1dp"/>

<corners android:radius="5dp"/>

</shape>

- user4571931

---

什么是button_round_corner？ - Talib

这是我制作的Drawable，我已经编辑了我的答案。请检查。 - user4571931