TextInputLayout android 如何同时做 Filled 和 Outlined？

Question

我使用了 <com.google.android.material.textfield.TextInputLayout 但我也会接受其他选项或库

预期结果：

专注于：
不专心：

Answer 1

    <com.google.android.material.textfield.TextInputLayout
    android:id="@+id/email"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="16dp"
    <!--have your custom style/text appearance for hint and text input-->
    //android:theme="@style/TextInputLayoutStyle"
    //app:hintTextAppearance="@style/HintTextAppearance"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.textfield.TextInputEditText
      android:id="@+id/edEmail"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="Email"
      android:importantForAutofill="no"
      android:singleLine="true" />
  </com.google.android.material.textfield.TextInputLayout>

Answer 2

您可以使用继承自 Widget.MaterialComponents.TextInputLayout.FilledBox 的自定义 TextInputLayout 样式和 TextInputEditText 的自定义背景选择器来实现此目的。

在 xml 中创建 TextInputLayout，如下所示：

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/emailTextInputLayout"
    style="@style/MyTextInputLayoutStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="16dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/emailTextInputEditText"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@drawable/edit_text_background"
       android:hint="Email"
       android:importantForAutofill="no"
       android:singleLine="true" />
</com.google.android.material.textfield.TextInputLayout>

其中 @style/MyTextInputLayoutStyle 是继承自 Widget.MaterialComponents.TextInputLayout.FilledBox 的自定义样式，如下所示：

<style name="MyTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
   <item name="boxBackgroundColor">@android:color/transparent</item>
   <item name="boxStrokeWidth">0dp</item>
   <item name="boxStrokeWidthFocused">0dp</item>
   <item name="hintTextColor">#7d8b9f</item>
</style>

和 @drawable/edit_text_background 是一个可绘制选择器，用于根据默认和聚焦状态更改背景，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="#f0f5fa"/>
            <stroke android:width="2dp" android:color="#b5c3f6"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#f0f5fa"/>
            <stroke android:width="0dp" android:color="#b5c3f6"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
</selector>

结果如下：

TextInputLayout android 如何同时做 Filled 和 Outlined？

How to do Filled and Outlined at the same time TextInputLayout android?

android

android-layout

material-design

android-custom-view

material-components-android