OutlinedBox for TextInputEditText is not working

Question

I am working on login screen where I want to implememt material edit text with following view :

Following is my code :

<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>

But OutlinedBox is not appearing. This is how it looks :

PLease help.

Use theme of `TextInputLayout`, not of `TextInputEditText`. You're using wrong style. use this `style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"` — Jeel Vankhede, Nov 20 '18 at 08:36
This doesn't fix the issue as of the Material 1.2.x library. Related GitHub issue here: https://github.com/material-components/material-components-android/issues/776 — darkrider1287, Apr 03 '20 at 21:09

score 9 · Answer 1 · answered Sep 24 '19 at 06:42

styles.xml theme as follows,

<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 sample:

  <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>

Hope this will work for you!

score 5 · Answer 2 · answered Nov 20 '18 at 08:41

5

Use this

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

Instead pf this

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

SAMPLE CODE

<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>

OUTPUT

answered Nov 20 '18 at 08:41

AskNilesh

67,701
16
123
163

2

This doesn't work as of the Material 1.2.x library. Related GitHub issue here: https://github.com/material-components/material-components-android/issues/776 – darkrider1287 Apr 03 '20 at 21:08
for Material 1.2.x library see the answer : https://stackoverflow.com/a/66041459/8389762 – pandey_shubham Mar 06 '21 at 10:12

score 1 · Answer 3 · answered Feb 04 '21 at 07:57

For Material 1.2.x library, please make sure your custom style should be the descendants of your app theme, otherwise will get error:

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

This took me whole day to figure out:

 <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>

score 1 · Answer 4 · answered Feb 22 '22 at 22:46

1

Just changed the AppTheme to "Theme.MaterialComponents.Light.DarkActionBar" and it worked for me...

answered Feb 22 '22 at 22:46

Evans Robbie

11
1

score 1 · Answer 5 · answered Sep 26 '22 at 11:06

In my case it was difficult to move app from Theme.AppCompat.Light.NoActionBar to Theme.MaterialComponents.Light.NoActionBar. But it is posible to set theme only to View (in my case TextInputLayout). At the end I have

<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>

score 0 · Answer 6 · answered May 01 '22 at 17:13

I had the same problem and I found out that my activity was declared like this:

public class MyActivity extends Activity {
}

And I had to change it to this:

public class MyActivity extends AppCompatActivity {
}

Also, as mentioned in other answers, check the AppTheme MaterialComponents

score 0 · Answer 7 · answered Oct 19 '22 at 08:11

 <?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>

Check Once this Answer------------

OutlinedBox for TextInputEditText is not working

7 Answers7

Linked