自定义文本输入布局

Question

我想为

TextInputLayout

应用边框，如图所示。

现在，它看起来像这样：

但是，我需要它看起来像这样（即标签放置在边框内）：

我为我的

EditText

实现的代码如下。

<customviews.MyEditText
             android:id="@+id/email"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="@drawable/edittext_border_background"
             android:layout_marginEnd="30dp"
             android:layout_marginStart="30dp"
             android:layout_marginTop="45dp"
             android:gravity="start"
             android:hint="@string/hint_username"
             android:imeOptions="actionNext|actionDone"
             android:inputType="textEmailAddress|text"
             android:padding="10dp"
             android:textColor="@color/primary_text"
             android:textColorHint="@color/secondary_text"
             android:textSize="16sp"
            />

而且，对于边框，我已经应用了背景

edittext_border_background.xml

像这样：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="20dp">
    <solid android:color="#FFFFFF"/>
    <corners
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
    <stroke 
        android:width="1dip"
        android:color="@color/primary" />

</shape>

当我尝试将边框应用于

TextInputLayout

，但是，它没有给出预期的输出。

有人能帮帮我吗？

Answer 1

您应该为 Outline Box 使用 Material Design 风格。简单使用：

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

在

TextInputLayout

。请参阅Material Design Guide中的Android的Text Field

Answer 2

根据您的使用情况以及在您想要应用此边框的任何视图中的任何位置更改颜色和边框，并在背景属性中更改它，例如... android:background="@drawable/border"

使用此代码在资源目录的 android drawable 文件夹中制作名称为 border 的可绘制文件。

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
   <solid android:color="#ffffff" />
    <stroke
       android:width="1dip"
       android:color="#000000" />
    <corners android:radius="4dip" />
    <padding
        android:bottom="0dip"
        android:left="0dip"
        android:right="0dip"
        android:top="0dip" />
</shape>

Answer 3

使用“android:state_focused”选项，您可以存档您的目标。

详情：https://stackoverflow.com/a/23417544/850347

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_enabled="true"
        android:state_focused="true">
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle"
        android:padding="20dp">
        <solid android:color="#FFFFFF"/>
        <corners
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
    <stroke 
        android:width="1dip"
        android:color="#0000FF" />

</shape>
</item>
<item android:state_enabled="true">
          <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle"
        android:padding="20dp">
        <solid android:color="#FFFFFF"/>
        <corners
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
    <stroke 
        android:width="1dip"
        android:color="@color/primary" />

</shape>
</item>

并且，在 java 代码中：

editText.setBackgroundResource(R.drawable.yourFile);

Answer 4

This will work 'hint' is inside in box .I  changed this property and add roundbox in background
  app:boxBackgroundMode="none" and app:boxCollapsedPaddingTop="5dp"
This is layout and change design according to your need.

<com.google.android.material.textfield.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="52dp"
                android:layout_marginTop="30dp"
                android:background="@drawable/round_box"
                app:boxBackgroundMode="none"
                app:boxCollapsedPaddingTop="5dp">
                <com.google.android.material.textfield.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@null"
                    android:gravity="center_vertical"
                    android:hint="hint"
                    android:inputType="textMultiLine"
                    android:maxLines="6"
                    android:paddingStart="5dp"
                    android:textSize="14dp" />
            </com.google.android.material.textfield.TextInputLayout>

round_box.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/listview_background_shape">
    <stroke android:width="2dp"
        android:color="#000000"
        />
    <padding android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />
    <corners android:radius="4dp" />
    <solid android:color="#2C000000" />
</shape>

    enter code here

sorry for my bad english