Search code examples
androiduser-interfacematerial-components-androidandroid-textinputlayoutandroid-textinputedittext

Show label of TextInputEditText when not focused on this


I have a layout with two TextInputEditText and when I set a text on this (programmatically or with xml) and set focus on another TextInputEditText, the above label of TextInputEditText was hidden. I want to show this label even a text was written in this.

My xml code:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/whiteGray2">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginRight="5dp"
    android:layout_marginLeft="5dp"
    android:orientation="horizontal"
    android:weightSum="2"
    android:layout_marginBottom="10dp"
    android:layout_marginTop="10dp">
    <com.google.android.material.textfield.TextInputLayout
        style="@style/CustomBorderTextInputEditText"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:hint="@string/oldCount"
        app:hintTextColor="@color/gray_text">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/input_address"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textIsSelectable="true"
            android:inputType="none"
            android:imeOptions="actionNext"
            android:text="Hi How are you"
            android:textColor="@color/gray_text"
            android:textColorHint="@color/gray_text" />

    </com.google.android.material.textfield.TextInputLayout>
    <com.google.android.material.textfield.TextInputLayout
        style="@style/CustomBorderTextInputEditText"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:hint="@string/newCount">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/newCount"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:textColorHint="@color/gray_text"
            android:hint="@string/newCount"
            android:textColor="@color/gray_text"
            android:inputType="number"/>

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

</LinearLayout>

My style:

 <style name="CustomBorderTextInputEditText" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="boxStrokeColor">@color/text_input_box_stroke</item>
    <item name="hintTextColor">?attr/colorPrimary</item>
</style>

I n


Solution

  • Your issue is here:

        <com.google.android.material.textfield.TextInputEditText
            android:textColorHint="@color/gray_text"
    

    Remove android:textColorHint in the TextInputEditText and the use:

    <com.google.android.material.textfield.TextInputLayout
          app:hintTextColor="@color/colorSecondary"
          android:textColorHint="@color/text_input_hint_selector"
    

    The hintTextColor is the color of the label when it is collapsed and the text field is active.

    The android:textColorHint is the color of the label in all other text field states (such as resting and disabled).

    Just an example:

    enter image description here

    And this is the selector:
    enter image description here

    Here the TextInputLayout:

    Without text:
    enter image description here

    Focused:
    enter image description here

    With text not focused:
    enter image description here

    Disabled:

    enter image description here