Material-components-android: TextInputLayout OutlinedBox not showing

Created on 19 Nov 2019  路  26Comments  路  Source: material-components/material-components-android

Expected behavior: need outlinedbox as in materialcomponents 1.0.0

<style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="boxStrokeColor">@color/grey_c7c7c7</item>
    <item name="android:textColor">@color/colorAccent</item>
    <item name="android:textColorHint">@color/black_overlay</item>
</style>

Android API version: Android API version here

Material Library version: com.google.android.material:material:1.1.0-beta02'
Device: Emulator

To help us triage faster, please check to make sure you are using the latest version of the library.

We also happily accept pull requests.

bug

Most helpful comment

I faced this too. Error:

the style on this component requires your app theme to be theme.materialcomponents (or a descendant)

I was using AppCompat Theme and changing the theme to MaterialComponents theme fixed the outlined box. Source: https://material.io/develop/android/docs/getting-started/
Can you try changing the theme in style.xml?

All 26 comments

Hey @ABr751 any chance you'd be able to attach a small sample app that reproduces the issue as well as some additional details around what the expected behavior is vs. what you're actually seeing?

https://github.com/tiper/MaterialSpinner/issues/16#issue-522627983 Please have a look at this.It,s something like this the outline is not showing in studio layout and also the material spinner was working fine with the outlinedBox and which is not working right now

Running our catalog with the following layout:

  <com.google.android.material.textfield.TextInputLayout
      style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="4dp"
      android:hint="@string/cat_textfield_label"
      app:counterEnabled="true"
      app:counterMaxLength="10"
      app:errorEnabled="true"
      app:helperText="@string/cat_textfield_outlined_helper_text"
      app:helperTextEnabled="true">
    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
  </com.google.android.material.textfield.TextInputLayout>

produces an outlined text field as expected:
Screenshot_1574265063

Are you able to upload a sample that reproduces your issue?

I also had this problem while migrating to this lib and after trying to find the difference with a clean project where it wasn't reproducible I found out that in my TextInputEditText I was setting android:background="@android:color/transparent" which is recommended when using the AppCompat Theme and you want to get rid of the underlying line.

I faced this too. Error:

the style on this component requires your app theme to be theme.materialcomponents (or a descendant)

I was using AppCompat Theme and changing the theme to MaterialComponents theme fixed the outlined box. Source: https://material.io/develop/android/docs/getting-started/
Can you try changing the theme in style.xml?

+1, I am also having this exact issue when upgrading from:

com.google.android.material:material:1.1.0-beta01
to
com.google.android.material:material:1.2.0-alpha03

The issue appears to be in the Android Studio layout preview, but not in the app itself. This is a non-starter for my development, and forcing me to stay on Material library 1.1.0 until it is fixed.

I solved this problem with replacing any other versions of material design with 1.1.0

https://stackoverflow.com/a/58074458/5582162 - Solution

The linked fix doesn't work in Material 1.2.x - this is still regressed from Material 1.1.x -> 1.2.x

I am still facing the same issue.

Lib Version -> 1.1.0

Using this

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

  <com.google.android.material.textfield.TextInputEditText
      android:layout_width="match_parent"
      android:hint="Filled box dense"
      android:text="advcadv"
      android:layout_height="wrap_content" />

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

Above code crashes with

Caused by: android.view.InflateException: Binary XML file line #27: Binary XML file line #27: Error inflating class com.google.android.material.textfield.TextInputLayout
Caused by: android.view.InflateException: Binary XML file line #27: Error inflating class com.google.android.material.textfield.TextInputLayout
Caused by: java.lang.reflect.InvocationTargetException

I'm also experiencing the same issue. Downgrading to com.google.android.material:material:1.0.0 solves it. 1.1.0 and 1.20 were a no go.

Could someone please confirm if this is an issue in an Android app or in Studio preview? Thank you!

Could someone please confirm if this is an issue in an Android app or in Studio preview? Thank you!

this is happening only in the Android Studio preview for me

@darkrider1287 thanks, could you please tell us which version of Android Studio you are using and whether the bug is reproducible in Studio 4.x?

This bug is tracked at Studio's public issue tracker http://issuetracker.google.com/issues/150225404

"Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense" causing inflating bug

I am still facing the same issue.

Lib Version -> 1.1.0

Using this

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

  <com.google.android.material.textfield.TextInputEditText
      android:layout_width="match_parent"
      android:hint="Filled box dense"
      android:text="advcadv"
      android:layout_height="wrap_content" />

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

Above code crashes with

Caused by: android.view.InflateException: Binary XML file line #27: Binary XML file line #27: Error inflating class com.google.android.material.textfield.TextInputLayout
Caused by: android.view.InflateException: Binary XML file line #27: Error inflating class com.google.android.material.textfield.TextInputLayout
Caused by: java.lang.reflect.InvocationTargetException

Same problem using Android Studio 4.0. Only works in version 1.0.0

The above is my code i was facing the same problem but after changing my styles.xml with