TextInputEditText custom style issue (When contain text)

Question

I need TextInputEditText bottom line color like below.

• Default color => Gray

• If user enter text, line color should remain as Blue. Currently, if i enter input in first edittext and go to other edittext, first one becoming gray again.

• Edittext is Empty => Gray

  I also require default hint animation of TextInputLayout, So, can't use EditText. I implemented this by using TextWatcher like here but not working.

Here is my code

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/EditScreenTextInputLayoutStyle"
        app:hintTextAppearance="@style/etHintText">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/etAddress"
            style="@style/et_14_blk_sngl"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:inputType="text"
            android:singleLine="true" />
    </android.support.design.widget.TextInputLayout>

Style :

<style name="EditScreenTextInputLayoutStyle">
<item name="colorControlNormal">@color/gray</item>
<item name="colorControlActivated">@color/blue</item>
<item name="colorControlHighlight">@color/blue</item></style>

And,

private void UpdateLineColor()
    {
        if (!TextUtils.IsEmpty(this.Text))
        {
            DrawableCompat.SetTint(this.Background, ContextCompat.GetColor(this.Context, Resource.Color.blue));

            if (Build.VERSION.SdkInt >= Build.VERSION_CODES.Lollipop)
            {
                ColorStateList colorStateList = ColorStateList.ValueOf(Resources.GetColor(Resource.Color.blue));
                this.BackgroundTintList = colorStateList;
                ViewCompat.SetBackgroundTintList(this, colorStateList);
            }

            this.Background.SetColorFilter(Resources.GetColor(Resource.Color.blue), PorterDuff.Mode.SrcAtop);
        }
        else
        {
            DrawableCompat.SetTint(this.Background, ContextCompat.GetColor(this.Context, Resource.Color.gray));

            if (Build.VERSION.SdkInt >= Build.VERSION_CODES.Lollipop)
            {
                ColorStateList colorStateList = ColorStateList.ValueOf(Resources.GetColor(Resource.Color.gray));
                this.BackgroundTintList = colorStateList;
                ViewCompat.SetBackgroundTintList(this, colorStateList);
            }

            this.Background.SetColorFilter(Resources.GetColor(Resource.Color.gray), PorterDuff.Mode.SrcAtop);
        }
    }

Answer 1

you could custon the TextInputEditText's background,like this:

custom et_underline_selected.axml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
  android:bottom="0dp"
  android:left="-2dp"
  android:right="-2dp"
  android:top="-2dp">
  <shape>
    <solid android:color="@android:color/transparent" />
    <stroke
      android:width="1dp"
      android:color="#00f" />  // color blue
      <padding android:bottom="4dp" />
   </shape>
 </item>
</layer-list>   

et_underline_unselected.axml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:bottom="0dp"
    android:left="-2dp"
    android:right="-2dp"
    android:top="-2dp">
     <shape>
     <solid android:color="@android:color/transparent" />
     <stroke
       android:color="#0f0"
       android:width="1dp" />
      <padding android:bottom="4dp" />
    </shape>
  </item>
</layer-list>

edittext_bg_selector.axml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_focused="true" 
    android:drawable="@drawable/et_underline_unselected"/>
  <item android:state_focused="false" 
    android:drawable="@drawable/et_underline_selected"/>
</selector>

these three files put in Resources/drawable

then in your layout.axml:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintTextAppearance="@style/etHintText">
    <android.support.design.widget.TextInputEditText
        android:id="@+id/etAddress"
        style="@style/et_14_blk_sngl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:inputType="text"
        android:background="@drawable/edittext_bg_selector"
        android:singleLine="true" />
</android.support.design.widget.TextInputLayout>

finally in your activity.cs:

TextInputEditText etAddress = FindViewById<TextInputEditText>(Resource.Id.etAddress);

etAddress.FocusChange += (s, e) =>
        {
            if (e.HasFocus)
            {
                etAddress.SetBackgroundResource(Resource.Drawable.et_underline_selected);
            }
            else
            {
                if (etAddress.Text.Length > 0)
                {
                    etAddress.SetBackgroundResource(Resource.Drawable.et_underline_selected);
                }
                else
                {
                    etAddress.SetBackgroundResource(Resource.Drawable.et_underline_unselected);
                }
            }
        };

is this effect you need ?

Answer 2

Replace your style with:

<style name="EditScreenTextInputLayoutStyle" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorControlNormal">@color/gray</item>
    <item name="colorControlActivated">@color/blue</item>
    <item name="colorControlHighlight">@color/blue</item>
</style>