How to change bottom line color and hint color of TextInputEditText?

Question

I am using TextInputLayout and TetInputEditText to get floating hint. Now I want to change the color of hint and bottom line of an edit text. I want it to get changed when user clicks on edit text.

So I tried to change its color onClickListener of an edit text. But I did not found any change in color.

xml layout :

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical">


    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_item_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_marginTop="20dp"
            android:paddingTop="05dp">
        <android.support.design.widget.TextInputEditText
            android:layout_width="240dp"
            android:layout_height="45dp"
            android:id="@+id/editTextItemName"
            android:layout_gravity="center_horizontal"
            android:hint="@string/item_name"
            android:textSize="12sp" />
        </android.support.design.widget.TextInputLayout>
    </LinearLayout>

java code :

      public void setUpUI(){

        edt_Item_Name = (TextInputEditText) findViewById(R.id.editTextItemName);
        edt_Item_quantity = (TextInputEditText)findViewById(R.id.editTextItemQuantity);
        edt_Item_Unit = (TextInputEditText)findViewById(R.id.editTextItemUnit);

        textInput_Item_name = (TextInputLayout)findViewById(R.id.input_layout_item_name);
        textInput_Item_quantity = (TextInputLayout)findViewById(R.id.input_layout_item_quantity);
        textInput_Item_Unit = (TextInputLayout)findViewById(R.id.input_layout_item_unit);

        edt_Item_Name.getBackground().mutate().setColorFilter(ContextCompat.getColor(this, R.color.edtColor), PorterDuff.Mode.SRC_ATOP);

        edt_Item_Name.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                edt_Item_Name.setHintTextColor(ContextCompat.getColor(SearchActivity.this, R.color.edtColor));
                edt_Item_Name.getBackground().mutate().setColorFilter(ContextCompat.getColor(SearchActivity.this, R.color.edtColor), PorterDuff.Mode.SRC_ATOP);
            }
        });
    }

}

Output :

How can I achieve this?

Answer 1

Define color in colors.xml file

<color name="colorControlNormal">#c5c5c5</color>
<color name="colorControlActivated">@color/accent</color>
<color name="colorControlHighlight">@color/accent</color>

and create style in styles.xml

<style name="TextAppearence.App.TextInputLayout"  parent="@android:style/TextAppearance">
     <item name="android:textColor">@color/main_color</item>
</style>

and applied to your TextInputLayout

 app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout"
 android:textColorHint="#0072BA"

Change Your code to this:

 <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_item_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_marginTop="20dp"
            android:paddingTop="05dp"
            app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout"
            android:textColorHint="#0072BA">
        <android.support.design.widget.TextInputEditText
            android:layout_width="240dp"
            android:layout_height="45dp"
            android:id="@+id/editTextItemName"
            android:layout_gravity="center_horizontal"
            android:hint="@string/item_name"
            android:textSize="12sp" />
        </android.support.design.widget.TextInputLayout>
    </LinearLayout>

Answer 2

Create style in styles.xml

<style name="ThemeOverlay.AppTheme.TextInputEditText.Outlined" parent="">
    <item name="colorControlActivated">@color/your_color</item>
</style>

Add in xml

 <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/email_layout"
        android:hint="Enter Your Email*"
        app:hintTextAppearance="@style/MyHintStyle"
        android:textColorHint="#6a6a6a"
        android:theme="@style/ThemeOverlay.AppTheme.TextInputEditText.Outlined"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
>

Answer 3

To change hint color, use:

android:textColorHint="@color/blue"

in your TextInputLayout, for example:

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColorHint="@color/blue"
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Text"/>
    </com.google.android.material.textfield.TextInputLayout>