TextInputEditText的OutlinedBox无法使用。

Question

我正在处理登录界面，希望使用material edit text实现以下视图：

以下是我的代码：

<com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        style="@style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox"
        android:layout_height="wrap_content">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="This is Hint"/>

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

但是OutlinedBox没有出现。它的样子是这样的：

请帮忙。

- Ganesh Ghodake

---

请使用 TextInputLayout 的主题，而不是 TextInputEditText 的主题。您正在使用错误的样式，请使用此样式：style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"。 - Jeel Vankhede

这并不能解决Material 1.2.x库的问题。相关的GitHub问题在这里：https://github.com/material-components/material-components-android/issues/776 - darkrider1287

Answer 1

在styles.xml中，主题如下所示：

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

TextInputLayout 示例：

  <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:hint="@string/user_name" />
    </com.google.android.material.textfield.TextInputLayout>

希望这对你有用！

- Bala

Answer 2

请使用此功能。

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

改为这个

style="@style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox"

示例代码

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_height="wrap_content">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="This is Hint"/>

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

输出

- AskNilesh

---

这在Material 1.2.x库中不起作用。相关的GitHub问题在这里：https://github.com/material-components/material-components-android/issues/776 - darkrider1287

有关 Material 1.2.x 库，请参见答案：https://dev59.com/HFQJ5IYBdhLWcg3wqXp6#66041459 - pandey_shubham

Answer 3

在我的情况下，将应用程序从Theme.AppCompat.Light.NoActionBar移动到Theme.MaterialComponents.Light.NoActionBar是困难的。但是可以将主题仅设置为视图（在我的情况下是TextInputLayout）。最终我有了：

<com.google.android.material.textfield.TextInputLayout
                        android:theme="@style/Theme.MaterialComponents.Light.NoActionBar"
                        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                        android:id="@+id/textField"
                        android:layout_width="match_parent"
                        android:layout_height="56dp"
                        android:layout_marginStart="16dp"
                        android:layout_marginTop="23dp"
                        android:layout_marginEnd="16dp"
                        android:hint="Enter Pin"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toBottomOf="@+id/textView24">

                        <com.google.android.material.textfield.TextInputEditText
                            style="@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox"
                            android:id="@+id/secureEditTextAuthorizePin"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:inputType="numberPassword" />
                    </com.google.android.material.textfield.TextInputLayout>

- amsuredev

Answer 4

对于 Material 1.2.x 库，请确保您的自定义样式应该是您应用主题的后代，否则会出现错误：

: IllegalArgumentException: The style on this component requires your app 
  theme to be Theme.MaterialComponents

这让我花了整整一天才搞明白：

 <style name="AppTheme" parent="Theme.MaterialComponents.Light.Bridge">
   <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:statusBarColor" tools:targetApi="lollipop">@color/colorGreen</item>
    <item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
    <item name="textInputStyle">@style/TextInputLayoutStyle</item> //  add it here
</style>

<style name="TextInputLayoutStyle" 
  parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="boxStrokeColor">@color/color_green</item>
    <item name="boxStrokeWidth">1dp</item>
    <item name="errorEnabled">true</item>
    <item name="hintTextColor">@color/text_color</item>
</style>

- pandey_shubham

Answer 5

我刚将AppTheme更改为"Theme.MaterialComponents.Light.DarkActionBar"，这对我有用...

- Evans Robbie

Answer 6

我曾经遇到过同样的问题，后来发现我的活动是这样声明的：

public class MyActivity extends Activity {
}

我不得不将它改成这样：

public class MyActivity extends AppCompatActivity {
}

此外，正如其他答案中提到的那样，请检查AppTheme MaterialComponents。

- Ton

Answer 7

 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/default_text_input_layout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:hint="Default"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/default_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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


<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/filled_text_input_layout"
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:hint="FilledBox"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/default_text_input_layout">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/filled_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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


<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/outlined_text_input_layout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:hint="OutlinedBox"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/filled_text_input_layout">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/outlined_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

   </androidx.constraintlayout.widget.ConstraintLayout>

检查一下这个答案------------

- Bala Chandra