自定义编辑带边框的文本

时间:2018-05-31 07:53:55

标签: android android-edittext textview label material-design

我正在尝试将边框放在编辑文本上并在其上添加标签。我已经做了这样的边界:

redo()

但我无法达到理想的效果。

我想要以下内容:

enter image description here

请帮忙。

5 个答案:

答案 0 :(得分:7)

选中此链接以获取有关创建所需新材料设计文本字段的指南。

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/

我希望这会有所帮助。

答案 1 :(得分:1)

您可以在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>

答案 2 :(得分:1)

试试这个:

<?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/boderedt"
        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>

here

答案 3 :(得分:1)

我知道,为时已晚,但是您可能想看看thisthis

AndroidX Material EditText

答案 4 :(得分:0)

您可以尝试下面的链接为材料设计edittext的最佳示例

https://codelabs.developers.google.com/codelabs/mdc-111-java/#0