Always make the prefix text in text input layout visible like the hint

Question

I am having a prefix text in a Text Input Layout but it only shows when i click inside the Text Input Edit Text which is inside the Text Input Layout that has my prefix text. How can i make the prefix text to always show with the hint

Below is my Text Input Edit Text

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/til_number"
                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/til_country"
                android:layout_marginStart="30dp"
                android:layout_marginLeft="30dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="30dp"
                android:layout_marginRight="30dp"
                android:layout_marginBottom="10dp"
                android:padding="5dp"
                app:boxBackgroundColor="#EFEFF2"
                app:prefixText="+01&#160;-&#160;"
                app:shapeAppearanceOverlay="@style/RoundedTextInputLayout">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/et_first_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:hint="@string/number"
                    android:inputType="phone"
                    android:maxLength="100"
                    android:textSize="15sp" />

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

What i would like to achieve is

+01 - 

the above text in prefix should always show

i have tried doing the following below

app:prefixTextColor="@color/secondaryDarkColor"

Answer 1

If you check the logic of the view, you will see the prefix text will be hidden if:

prefixTextView.setVisibility((prefixText != null && !isHintExpanded()) ? VISIBLE : GONE);

Add app:expandedHintEnabled="false" to your TextInputLayout and your prefix text will stay visible:

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/text_input_layout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        app:expandedHintEnabled="false"
        app:prefixText="MyPrefix: ">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/text_input_edit_text1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="My optional Hint" />

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

Note: Of course the hint will show on top like this.

Answer 2

From the Material.io website, you can use:

Adding a prefix/suffix to a text field:

app:prefixText="@string/prefix"

Inside your com.google.android.material.textfield.TextInputLayout.

The Android Studio preview will not show the prefix in the text view but if you run the application on a device, when the user selects the input text, the prefix will be shown. Below there are the screenshots of what i tested.

• With the input layout not selected

• With the input layout selected (my_prefix if what i used as text prefix in the xml, and typed text is what i added from the keyboard)

Answer 3

If you want to show the suffix when the hint is not expanded using Kotlin:

textInputLayout.viewTreeObserver.addOnGlobalLayoutListener {
    textInputLayout.suffixTextView.visibility = View.VISIBLE
}