1

I'm trying to migrate from Material components 1.0.0 to 1.1.0-alpha07 in order to be able to use ExposedDropdown style. However, it messes up all my TextInputEditTexts as they are meant to be neither outlined nor filled.

I've tried setting TextInputEditText box backgrounds to transparent color, but that ends up making their fill completely white instead of making them see-through and exposing what's behind them (which is a brand color with gradient that spans more than the edit field, and that is why I can't just set its color to the background color as it just won't fit the gradient).

So, the question: Is there any way to keep the old-fashioned non-filled EditTexts in 1.1.0+ (while still using them inside TextInputLayout)?

Note: I have to say that excluding a simple option to have edit fields non-filled (as they used to be) is a huge mistake since it almost completely shuts down painless migration to 1.1.0, you now basically have to force your design to change first.

A.Boškov
  • 11
  • 4

2 Answers2

0

Setting the TextInputEditText background to transparent worked for me. My theme's parent is Theme.MaterialComponents.DayNight.DarkActionBar.

Another possibility is to use a ThemeOverlay for your editTextStyle:

<style name="Widget.YourTheme.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox>
    <item name="materialThemeOverlay">@style/ThemeOverlay.YourTheme.TextInputEditText</item>
</style>

<style name="ThemeOverlay.YourTheme.TextInputEditText parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox">
    <item name="editTextStyle">@style/Widget.YourTheme.TextInputEditText item>
</style>


<style name="Widget.YourTheme.TextInputEditText parent="Widget.MaterialComponents.TextInputEditText.FilledBox">
    <item name="android:background">@android:color/transparent</item>
</style>


<com.google.android.material.textfield.TextInputLayout
   style="@style/Widget.YourTheme.TextInputLayout"
   ...
   <TextInputEditText>
      ...
   </TextInputEditText>
 </com.google.android.material.textfield.TextInputLayout>
jns
  • 6,017
  • 2
  • 23
  • 28
  • I haven't tried your solution, but I've found a much simpler one. – A.Boškov Jul 29 '19 at 16:24
  • Setting `boxBackgroundMode="none"` works, but it removes the `EditText's` bottom line as well, which is not what I needed for my usecase. – jns Jul 29 '19 at 17:28
0

I managed to find a rather simple answer to the problem.

The solution is to use app:boxBackgroundMode="none" with the filled box style.

You can also put an application-wide style for text input layouts (also applying the aforementioned attribute) using textInputStyle attribute in your app's theme and supplying the desired style.

As a side note, this just points out the catastrophic lack of easily-accessible documentation and guides that plagues this library.

A.Boškov
  • 11
  • 4