Material TextInputLayout styles are not working

Question

Material TextInputLayout styles are not working.

I followed the documentation on material textinputlayout here: https://material.io/develop/android/components/text-input-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_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:hint="@string/app_name"
    app:boxStrokeColor="@android:color/white"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

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

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

With gradle:

implementation 'com.google.android.material:material:1.1.0-alpha02'

Using the style OutlinedBox, I expect to have the layout to have an outline but instead it just shows a plain TextInputLayout.

Try with `implementation 'com.google.android.material:material:1.0.0'` — AskNilesh, Jan 08 '19 at 07:29
You have to extend the material theme in your `AppTheme` for example `Theme.MaterialComponents.Light.NoActionBar.Bridge` — Aditya, Jan 08 '19 at 07:36
@NileshRathod On preview it's not working. I'll try running it on my device, hold on. — Gab Ledesma, Jan 08 '19 at 07:39
@NileshRathod it's working when I run it. But on preview it's not. Weird. Thanks anyways! — Gab Ledesma, Jan 08 '19 at 07:41

score 3 · Answer 1 · edited May 02 '21 at 19:38

Change your styles.xml Theme.AppCompat.Light.NoActionBar to Theme.MaterialComponents.Light.NoActionBar

You can use below code:

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

score 2 · Accepted Answer · answered Jan 08 '19 at 07:44

2

It seems that it's not working on preview, I had to run it on a device to see the real output. Thanks to @NileshRathod

I hope that android fixes this

answered Jan 08 '19 at 07:44

Gab Ledesma

1,785
1
7
13

1

Please take note that the Android team doesn't own the [Material Components for Android](https://github.com/material-components/material-components-android) library. It's _developed by a core team of engineers and UX designers at Google_ (see https://github.com/material-components/material-components#material-components-shared-documentation-and-policies) – Edric Jan 08 '19 at 13:17

score 1 · Answer 3 · answered Dec 05 '20 at 02:57

In my assumption, The problem is due to the Appcompat theme. You must change it to materialCompontents.DayNight.

Change your style.xml file to like this,

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

And change your TextInputLayout Code as follows:

   <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#252734"
            android:hint="Enter Name" />
    </com.google.android.material.textfield.TextInputLayout>

Sometimes it will not work in the ui designer of android studio. But it will surely work on real devices. — JOSE C S, May 09 '21 at 03:49

score 0 · Answer 4 · answered Oct 21 '21 at 06:48

It will work only on Material Component. It will not work on Theme.AppCompat, if any of the style uses this it will not work. So change all the Theme.AppCompat to Theme.MaterialComponents on your style.xml Like

Theme.MaterialComponents.Light.NoActionBar

score 0 · Answer 5 · answered Oct 04 '22 at 14:00

0

Also, be sure you have selected the correct theme in your xml

answered Oct 04 '22 at 14:00

Antony Nicolas Huaman Alikhan

329
2
8

Material TextInputLayout styles are not working

5 Answers5

Linked