setError displays text in flyout instead of below the EditText

Question

I'm following this guide to display the error and this doc to implement it. It works fine but instead of displaying errors below the EditText I have them floating above with the warning icon.

<style name="error" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/accent</item> <!--apply the color you wat here -->
    <item name="android:textSize">12dp</item>
</style>


<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="30dp"
    app:errorEnabled="true"
    app:errorTextAppearance="@style/error">
        <android.support.design.widget.TextInputEditText
        android:id="@+id/txtPhoneNumber"
        android:textSize="24dp"
        android:singleLine="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Phone Number" />
</android.support.design.widget.TextInputLayout>


txtPhoneNumber.setError("Invalid Format");

How can I make errors to be displayed below the EditText?

Answer 1

You should pass TextInputLayout Object there .

  <android.support.design.widget.TextInputLayout
   android:id="@+id/txtLayout">
   .........    
</android.support.design.widget.TextInputLayout>

Then

  txtLayoutOBJ.setError("Invalid Format");