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.

Solution 1

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!

Solution 2

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

Solution 3

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>

Comments

[darkrider1287]

This doesn't work as of the Material 1.2.x library. Related GitHub issue here: github.com/material-components/material-components-android/…

[pandey_shubham]

for Material 1.2.x library see the answer : stackoverflow.com/a/66041459/8389762