CODEWITHSUNDEEP
androidmaterial-design
Zee
Zee

Reputation: 1697

Can not get TextInputLayout & TextInputEditText to style correctly on disabled

I use multiple of the new TextInputLayout & TextInputEditText objects in my Android project, as described here: https://material.io/develop/android/components/text-input-layout/

But, no matter what I do, I cannot get the field to appear 'grey' when it is disabled. In fact, it looks the same either way.

Here is how I define it in my Layout: 

        <android.support.design.widget.TextInputLayout
            android:id="@+id/username_wrapper"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/header_container"
            android:layout_marginLeft="@dimen/list_verticle_margin"
            android:hint="@string/username">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/username_field"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress" />
        </android.support.design.widget.TextInputLayout>

I also had to overwrite a color in my colors.xml file:

<color name="mtrl_textinput_default_box_stroke_color">#fff</color>

Although, removing this does not make much of a difference. Can anyone please help me figure out how to make this appear disabled?

Here is the resulting textfield: enter image description here

enter image description here

Upvotes: 1

Views: 2063

Answers (1)

Zee
Zee

Reputation: 1697

I forgot I asked this question...

Here is how I solved it (but it affects ALL the TextInputs).

  1. Overwrite the disabled color in your colors.xml file:

<color name="mtrl_textinput_disabled_color" tools:override="true">#919191</color>

  1. Set the TextInputLayout and the TextInputEditText as disabled from the code. Hope this helps someone!!

UPDATE: YOU NO LONGER HAVE TO OVERWRITE 'mtrl_textinput_disabled_color'. With new material components, you can just set a style like:

<style name="example.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="boxStrokeColor">@color/example_color</item>
    //// Other stuff here if you want.
</style>

example_color.xml in your colors directory, looking like:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/colorAccent" android:state_focused="true"/>
<item android:color="@color/disabled" android:state_enabled="false"/>
<item android:color="@color/textDefault"/>
</selector>

Then you can apply the style to any InputTextLayout, using

style="@style/example.TextInputLayout"

in its xml. This gives a lot more flexibility and allows you to be able to style each TextInputLayout individually if you so wished.

Upvotes: 3

Related Questions