programmatically change TextInputLayout textColorHint color to indicate/show a disabled editText inside

Question

I have a EditText that in inside a TextInputLayout. I would like to change the color of the TextInputLayout's textColorHint programmatically. As I would need to enable and disable the editTexts while user is filling up the forms. For an example, A forget password Form with 5 editText and 3 buttons. User has to submit their email, verification code, new and confirm password. Only when their email is submitted, then the verification code EditText, verification submission button is enabled. and so on.

Hence To show disabled, I would like the EditText text(placeholder) also known as android:hint in EditText xml, underline to be slightly grey out / more transparent. It is possible to resolve this using setAlpha(.5f); but I would like to change the color. Change my textPlaceholderColor(grey) to a lighter grey color.

I have tried the app:hintTextApperance=@style/TextInputLayoutHintText "method" but android:TextColorHint does not seem to work inside. I even tried to change the style using codeLayout.setHintTextAppearance(R.style.TextInputLayoutHintTextDisabled); I have also tried the selector "method" in EditText. But its seem that android:TextColorHint does not work in EditText; setting a color to it do not work. It has to be change inside TextInputLayout.

in my style file

    <!-- Legacy TextField Theme-->
    <style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
        <item name="colorControlNormal">@color/textPlaceholderColor </item>
        <item name="colorControlActivated">@color/textFieldColor</item>
        <item name="colorControlHighlight">@color/textFieldColor</item>
    </style>


    <!-- TextField Hint Theme-->
    <style name="TextInputLayoutHintText">
        <item name="android:textColor">@color/textPlaceholderColor</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColorHint">@color/disableTextColor </item>
    </style>

    <!-- TextField Text Color Hint Theme Disabled-->
    <style name="TextInputLayoutHintTextDisabled">
        <item name="android:textColor">@color/disableTextColor </item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColorHint">@color/disableTextColor </item>
        <item name="hintTextColor">@color/disableTextColor </item>
    </style>

in my activity xml file

<com.google.android.material.textfield.TextInputLayout
            android:id="@+id/forgetTextInputLayout2"
            style="@style/TextInputLayoutAppearance"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="20dp"
            android:elevation="12dp"
            app:endIconMode="clear_text"
            android:textColorHint="@color/textPlaceholderColor"
            app:hintTextAppearance="@style/TextInputLayoutHintText"
            app:layout_constraintEnd_toEndOf="@+id/forgetForm"
            app:layout_constraintStart_toStartOf="@+id/forgetForm"
            app:layout_constraintTop_toBottomOf="@+id/forget_submit_email">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/forgetVerification"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:fontFamily="@font/open_sans"
                android:hint="@string/ForgetForm3"
                android:inputType="textPersonName"
                android:singleLine="true"
                android:textColor="@drawable/edit_text_selector"
                android:textCursorDrawable="@drawable/cursor_color"
                android:textSize="18sp" />
        </com.google.android.material.textfield.TextInputLayout>

color file

  <color name="colorPrimary">#00BEBA</color>
    <color name="colorPrimaryDark">#00BEBA</color>
    <color name="colorAccent">#F60606</color>
    <color name="white">#FFFFFF</color>
    <color name="green">#17B3AB</color>
    <color name="version">#0B0008</color>
    <color name="appBackgroundColor">#00BEBA</color>
    <color name="textPlaceholderColor">#807E7E</color>
    <color name="textFieldColor">#000000</color>
    <color name="textFieldCursorColor">#FB0000</color>
    <color name="textFieldHightLightColor">#2196F3</color>
    <color name="customGreen">#92CFCD</color>
    <color name="defaultLinkBlue">#007aff</color>
    <color name="facebookBlue">#3B5998</color>
    <color name="disableTextColor">#3C95A1A0</color>

Answer 1

You can so it with a custom style:

    <com.google.android.material.textfield.TextInputLayout
        style="@style/MyTextInputLayout"

defining a selector:

  <style name="MyTextInputLayout " parent="Widget.MaterialComponents.TextInputLayout.FilledBox" >    
   <item name="android:textColorHint">@color/my_selector</item>.  
  </style>

with:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="0.38" android:color="@color/colorSecondaryLight" android:state_enabled="false"/>
    <item android:alpha="0.6" android:color="@color/colorPrimary"/>
</selector>

In this way enabling/disabling the TextInputLayout the color changes.

Programmatically you can use the setDefaultHintTextColor method:

    TextInputLayout textInputLayout = findViewById(R.id.til);                   
    textInputLayout.setDefaultHintTextColor
      (ContextCompat.getColorStateList(this,R.color.selector));

Answer 2

As far I understood your question you want to ensure all the way edit text fields are properly filled. For that you can use textwatcher. Add the textwatcher to your edittext fields and check the condition and enable or disable the button when condition gets true or false.

This is a example code for it

    //Say you have three edit fields and a button

EditText name = findviewbyId(R.id.name);
EditText email = findviewbyId(R.id.email);
EditText mobile = findviewbyId(R.id.mobile);

name.addTextWatcherListener(checkEmpty);
email.addTextWatcherListener(checkEmpty);
mobile.addTextWatcherListener(checkEmpty);


//Now add the method 

public TextWatcher checkEmpty = new TextWatcher(){

/* Here you'll get three method use the onTextChanged method and get the strings from edit text fields and check if they're empty or not if empty disable button else enable */ 
}

Answer 3

Use this style in style file :

 <style name="EditTextWrapper">
        <item name="android:layout_width">match_parent</item>
        <item name="android:textAppearance">@style/TextAppearance_open_sans_semibold</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColorHint">@color/brown</item>
        <item name="counterOverflowTextAppearance">@style/CounterOverFlow</item>
        <item name="counterTextAppearance">@style/CounterText</item>
        <item name="errorTextAppearance">@style/ErrorText</item>
        <item name="hintTextAppearance">@style/CustomHint</item>
    </style>

    <style name="CounterOverFlow" parent="TextAppearance.Design.Counter.Overflow">
        <item name="android:textSize">1sp</item>
        <item name="android:textAppearance">@style/TextAppearance_open_sans_semibold</item>
        <item name="android:textColor">@color/green</item>
    </style>

    <style name="CustomHint" parent="TextAppearance.Design.Hint">
        <item name="android:textSize">@dimen/sp11</item>
        <item name="android:textColor">@color/green</item>
        <item name="colorAccent">@color/green</item>
        <item name="colorControlNormal">@color/green</item>
        <item name="android:textAppearance">@style/TextAppearance_open_sans_semibold</item>
        <item name="colorControlActivated">@color/green</item>
        <item name="android:textColorHint">@color/green</item>
        <!--<item name="android:textAppearance">@style/TextAppearance.angelina_script</item>-->
    </style>

    <style name="CounterText" parent="TextAppearance.Design.Counter">
        <item name="android:textSize">1sp</item>
        <item name="android:textAppearance">@style/TextAppearance_open_sans_semibold</item>

        <item name="android:textColor">@color/green</item>
    </style>

    <style name="ErrorText" parent="TextAppearance.Design.Error">
        <item name="android:textSize">@dimen/sp12</item>
        <item name="android:textColor">@color/red</item>
        <item name="android:textAppearance">@style/TextAppearance_open_sans_semibold</item>

        <item name="android:textColorHint">@color/red</item>
    </style>

way of using in layout :

  <com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/wrapper_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textColorHint="@color/white"
                    android:theme="@style/EditTextWrapper">

                <com.google.android.material.textfield.TextInputEditText
                        android:id="@+id/edt_password"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:drawableRight="@drawable/ic_lock"
                        android:drawablePadding="@dimen/dp16"
                        android:hint="@string/password"
                        android:textAppearance="@style/TextView_Regular"
                        android:inputType="textPassword"
                        android:maxLines="1"
                        android:textColor="@android:color/white"
                        android:textSize="16sp" />
            </com.google.android.material.textfield.TextInputLayout>