Search code examples
javaandroidmaterial-designandroid-textinputlayoutmaterial-components-android

While using a material.textfield.TextInputLayout, my outlined box covers the hint. How can I display the hint without getting it covered my the box?


enter image description here

As you can see in the image, I am using a material textInputEditText with an outlined Box style. However, my hint 'Exchange' is getting covered by the outlined box. How can I prevent that?

Here is my textfield.TextInputLayout code:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/Exchange_Name"
    app:errorEnabled="true"
    android:paddingTop="32dp"
    style="@style/TextInputLayoutStyle">

      <com.google.android.material.textfield.TextInputEditText
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:hint="@string/Exchange"
          android:inputType="text">

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

And here is my styles.xml-

    <style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">

        <item name="boxStrokeWidth">2dp</item>
        <item name="boxStrokeColor">#FF6F9824</item>

    </style>

Solution

  • Remove the android:paddingTop="32dp" in your TextInputLayout.
    Also the hint should be set on TextInputLayout, rather than the TextInputEditText.

    <com.google.android.material.textfield.TextInputLayout
        android:hint="@string/Exchange"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/Exchange_Name"
        app:errorEnabled="true"
        style="@style/TextInputLayoutStyle"
        >
    

    enter image description here